HTML5 Reset Styles

The HTML5 draft specification contains a detailed section about rendering HTML with several CSS statements, that are strongly suggested to visual user agents. For targeting browsers, that follow this suggestion, the chapter therefore provides a great starting point to develop a CSS reset stylesheet with minimal impact.

So without further ado, here are the CSS rules, that revert most of what the HTML5 spec suggests. The first block does actually the opposite: The following five rules are copied more or less directly and let the new HTML5 elements have the correct display property.

/** display */
[hidden], command, datalist,
menu[type=context], rp, source,
track {
  display: none;
}

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

article, aside, figure, figcaption,
footer, header, hgroup, nav,
section, summary, table, caption,
colgroup, col, thead, tfoot, tbody,
tr, th, td, li {
  unicode-bidi: embed;
}

ruby {
  display: ruby;
}

rt {
  display: ruby-text;
}

Now begins the resetting of styles. I don’t reset styles applied by dedicated attributes in the markup, like <table border="0">. The rules rely on the CSS behaviour, that all these are more specific than rules from the user agent (i. e., if you put this in a user stylesheet in your browser, not all rules are reverted).

/** margin */
blockquote, dir, dl, figure,
menu, ol, p, pre, ul,
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
}

form {
  margin-bottom: 0;
}

dd {
  margin-left: 0;
}

dir, menu, ol, ul {
  padding-left: 0;
}

blockquote, figure {
  margin-left: 0;
  margin-right: 0;
}

table {
  border-spacing: 0;
}

td, th {
  padding: 0;
}

/** align */
sub, sup {
  vertical-align: baseline;
}

/** fonts and color */
address, cite, dfn, em, i, var {
  font-style: normal;
}
b, strong, th {
  font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
  font-weight: normal;
}
big, small, sub, sup {
  font-size: 1em;
}
sub, sup {
  line-height: inherit;
}

:link, :visited, mark {
  color: inherit;
}
mark {
  background: transparent;
}

table, td, th {
  border-color: currentColor;
}

/** punctuation and decorations */
:link, :visited, ins, abbr[title],
del, s, strike {
  text-decoration: none;
}

:focus {
  outline: none;
}

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

ol, dir, menu, ul {
  list-style-type: none;
}

table {
  border-style: none;
}
td, th {
  border-style: none;
}

/** hr */
hr {
  color: currentColor;
  border-style: none;
  border-width: 0;
  margin: 0 auto;
}

/** fieldset */
fieldset {
  margin-left: 0; margin-right: 0;
  border: none 0 currentColor;
  padding: 0;
}

/** embedded content */
iframe {
  border: 0 none;
}

For your conveniance you can download the complete stylesheet file, too.

Of course, this is not a most minimal reset stylesheet and neither is it a complete reset of all styles a browser applies. This was not the target. But it specifically reverts the styles, that are suggested by the HTML5 draft.