HTML5 - Box Model vs. FlexBox Model - CSS

In the last tutorial, we started building our box model. I hope you've copied the base HTML code. In this tutorial, we're going to start styling the web page that we made in the previous tutorial. But in this tut. we're mostly going to focus on backward compatibility and in the next tut. we'll actually start prettifying our web page...

Removing default margin and padding

The first thing we'll have to do is remove the default margin and padding that comes with all HTML elements. We'll set the margin and padding of all elements to 0 like this:

*{
    margin:0; padding:0; 
    // Setting the margin and padding of all elements to 0
}

Styling the headings

The only thing we'll have to do with the headings is to change the font settings.

h1{
    font: bold 20px "Trebuchet MS";
}

h2{
    font: bold 14px "Trebuchet MS";
}

Taking care of backward compatibility

In our HTML, we've used many HTML5 tags that the older browsers don't recognize and thus might display as inline elements. However, these HTML5 elements are block elements. Thus, to take care of backward compatibility, we're going to add a CSS rule that makes all these HTML5 elements block.

header, section, footer, aside, nav, article, hgroup{
    display:block;
}

Aligning our body to the center

Now lastly, we must align our body to the center so that when we style our elements, the text is not floating outside the boxes.

body{
    text-align:center;
}

What we've achieved

Let's have a look at what we've achieved thus far.

View Demo View Code

So, if you notice, it's a plain website that sits in the center. Now that we've taken care of backward compatibility and styled the headings a little bit. We can start styling our website. But I'll leave that for the next tutorial...