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 significant difference is that if the browser does not understand a new element it will display it inline. This means that you will have to explicitly declare the layout of the new elements in a stylesheet for older browsers.
For the code example used in the previous article, I might apply CSS akin to the following:
body {
margin: 0;
background: #000;
color: #fff;
margin-left: 2em;
}
header a {
color: 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;
}
figcaption {
display: block;
text-align: center;
}
aside p {
line-height: 1.8;
}
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.