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 HTML 5 specification, such as <acronym>, <center> and <big>.

Next it incorporates new HTML 5 elements, like <menu>, <nav>, <section> and <video>, in order to remove any default user-agent styles from those. There is also the explicit addition of the display:block property for new tags that are required to be rendered as block-level elements.

One key addition (or subtraction) – definitely a positive one – is the removal of the resetting of the :focus pseudo-selector. According to the website, there are two key reasons for this, both of which are valid:

First, by declaring outline:0, you remove the focus identifier for keyboard users. Second, Eric [Meyer] released his [Reset CSS] stylesheet in good faith that people would explicitly style :focus, but they generally don’t, so it’s safer to leave the default :focus styles in place.

Other differences to Eric Meyer’s Reset CSS:

• Styles of the <ins> tag, which was often left out along with the re-styling of the :focus pseudo-class.
• Leaves the list-style property for <ul>, <ol> and <li> elements intact, relying on the user-agent (browser-specific) style for these. Most people tend to redefine them anyway, so resetting them often doesn’t make sense.
• Declares list-style:none; for the nav ul selector, which does the job of removing list-style markers from navigational <ul> elements.
• Includes the new HTML 5 <mark> element, which is used to mark (read: highlight) text in a document.
• Uses attribute selectors for <abbr> and <dfn>, which means that these selectors will only be styled with a dotted border and display the help (question mark) cursor if they also have a  title="" attribute to explain what they are. This is great for accessibility, as the tag should instruct screen readers to pronounce abbreviations letter-by-letter, but will not imply a hover action if no extra definition is included.

The HTML5 CSS Reset – Downloads & Code

The stylesheet is provided below in full and minified formats, for you to copy and paste. The two versions are also available to view/download separately, and in a .zip file:

• html5-doctor-reset-stylesheet.css (1.82KB)
• html5-doctor-reset-stylesheet.min.css (1.16KB)
• CSSReset.com – HTML5 Doctor Reset Stylesheet.zip (both versions)

Full Version (1.82KB)

See below for minified version

/**
 * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
 * Richard Clark (http://richclarkdesign.com)
 * http://cssreset.com
 */
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;
}

Minified Version (1.16KB)

/* html5doctor.com Reset v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) - http://cssreset.com */
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:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
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}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}