HTML5 CSS reset
Though reseting CSS is a controversial practice, when it comes to HTML5 we inevitably need to specify some default CSS styles for the new elements, since unknown elements are treated by browsers as if they were inline elements.
Thus, we need a (re)set stylesheet to tell the browser that header, section, etc, should be block level elements. Thus, we might just as well add some other useful declarations to the style sheet. I believe Eric Meyer’s CSS reset is a good start, but I think he goes a bit too far at some places, such as removing default quotation marks and list-items, so I’ve trimmed it down. Of course, I have also removed any references to elements removed in HTML5.
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
line-height: 1;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
section, article, aside, header, footer, nav, dialog, figure {
display:block;
}Or download it minified here: HTML5 CSS reset.
Ah, good call on the elements removed from HTML5. I’ve amended the CSS reset in my HTML5 WordPress starter theme as a result, thank you.
Regards, Karl