Part Four: CSS3 Helps Old Web Browsers Understand HTML5
This is a Companion Tutorial to “Smooth Strides from HTML to HTML5” where we mentioned some of HTML5’s new elements. But we also discovered that there is a problem with old web browsers and their understanding of these new elements. Basically, they have no clue what they are.
But we can get them to cooperate with our progressive efforts by adding some code to our linked CSS3 document. We have linked to our CSS document with the link element in the head element of our HTML5 page.
<link rel=”stylesheet” href=”style.css”>
As you can see, we named it “style.css” and in order for this to work correctly, we must put our CSS style sheet at the same level as our HTML5 document in our website. If we decide to put the CSS file in its own folder, it won’t be linked correctly.
To help old web browsers understand the new HTML5 elements we added to our web page: header, nav, aside, section, article and footer, we must add the following code to our CSS style sheet.
We can write it like this:
article, section, aside, nav, header, footer
{
display: block;
}
or this:
article, section, aside, nav, header, footer {display: block;}
The web browsers understand both ways of styling the CSS rule. (By the way, a block-level element occupies the entire space of its parent element (container), thereby creating a block.)
Now in order to position the elements in our web page so that each of our “sectioning” elements don’t just fill up the full width of the page (since they are block elements), we need to use CSS to create a page layout.
CSS layout is something that you will learn through experience, learning the different CSS properties, following tutorials and practicing a lot. See this tutorial for more details: CSS Page Layout .
Return to Top