CSS is applied to HTML5 in the same way it has always been: the new elements simply become selectors that can be manipulated in a stylesheet.

The single significant difference is that there is no default appearance for the new elements: as with <div>, browsers will assume that the new elements are, for the most part, set to display: block. This means that in most cases you will have to explicitly declare the layout of the new elements in a stylesheet.

You will inevitably find that certain browsers place different default CSS display qualities on elements: for example, the current version of Chrome assumes that <figcaption> is displayed inline, whereas Firefox 4 assumes that it is display: block, and indents the element with a default margin-left value. Cross-browser testing is a must with HTML5.

For the code example used in the previous article, I might apply CSS akin to the following:

1. body { width: 900px; margin: 0; background: #000; colour: #fff; margin-left: 2em; }
2. header, h2 { font-family: "Rockwell Extra Bold"; }
3. header nab a { colour: red; text-decoration: none; margin-right: 2em; }
4. aside { width: 300px; float: right; margin-left: 2em; }
5. time { float: left; margin-right: 2em; }
6. h4 { display: inline; }
7. section, footer { margin-top: 2em; }
8. figure { margin-left: 0; }
9. fig caption { display: block; text-align: centre; }
10. aside p { line-height: 180%; }