. This is my blog, where I talk about web design and development with 
Gameify Everything
Slash PNG Sizes
Ligature Icon FontsCSS 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:
- body { width: 900px; margin: 0; background: #000; colour: #fff; margin-left: 2em; }
- header, h2 { font-family: "Rockwell Extra Bold"; }
- header nab a { colour: red; text-decoration: none; margin-right: 2em; }
- aside { width: 300px; float: right; margin-left: 2em; }
- time { float: left; margin-right: 2em; }
- h4 { display: inline; }
- section, footer { margin-top: 2em; }
- figure { margin-left: 0; }
- fig caption { display: block; text-align: centre; }
- aside p { line-height: 180%; }
Haha, that is actually incredibly clever.
![Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]](http://ecx.images-amazon.com/images/I/5192I1rtYnL._SL160_.jpg "Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]")
