HTML5 Doctor CSS Reset

Based on Eric Meyer’s Reset CSS, the HTML5 Reset Stylesheet by HTML5Doctor.com aims to provide a basis for any websites making use of the new HTML 5 attributes, while improving in some areas and also removing support for deprecated HTML 4 elements.

Click to jump straight to the code, or keep reading for some explanations and discussion…

What’s New?

The HTML5 Reset Stylesheet begins by removing support for elements that have been deprecated from the HTML5 specification, like <acronym>, <center>, and <big>. New HTML5 elements like and have been added to remove any default padding, margin, and borders, and display: block has been added for all elements that are required to render as blocks. The explicit styling of the :focus pseudo-selector has also been removed, and nav ul has been given list-style: none to get rid of bullets in an unordered list.

Attribute Selectors

Attribute selectors for <abbr> and <dfn> have been included in this CSS reset code, meaning the styling will only appear if there’s a title attribute on the element.

What About the Application Elements?

Here’s what the author has to say about certain web-app elements :

Application elements is a term I’ve loosely used to describe elements like menu, etc. These elements are more likely found in web apps than web sites. I left these out since, at the time of writing, browsers implement barely any of what was “Web Applications 1.0”. Also, this stylesheet is intended primarily for authors serving their pages astext/html, not XML.

The Code:

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
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,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
}

body {
 line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
 display:block;
}

nav ul {
 list-style:none;
}

blockquote, q {
 quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
 content:'';
 content:none;
}

a {
 margin:0;
 padding:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
}

/* change colours to suit your needs */
ins {
 background-color:#ff9;
 color:#000;
 text-decoration:none;
}

/* change colours to suit your needs */
mark {
 background-color:#ff9;
 color:#000; 
 font-style:italic;
 font-weight:bold;
}

del {
 text-decoration: line-through;
}

abbr[title], dfn[title] {
 border-bottom:1px dotted;
 cursor:help;
}

table {
 border-collapse:collapse;
 border-spacing:0;
}

/* change border colour to suit your needs */
hr {
 display:block;
 height:1px;
 border:0; 
 border-top:1px solid #cccccc;
 margin:1em 0;
 padding:0;
}

input, select {
 vertical-align:middle;
}