CSS reset explained

Eric Meyer recently published the second version of his CSS Reset, a simple style sheet that normalizes the differences between the various browser versions. The approach used in this file is massive, in the sense that all the default styles of a web browser are completed reduced to a common denominator. I'd like to show some of the most interesting sections of this file in order to choose whether they're useful for your needs or not.

The first section encompasses a wide range of elements, both inline and block-level:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}

Note that also HTML5 elements have been normalized here, although a default style sheet for HTML5 elements is not yet a part of the current CSS specifications. Margins, padding and borders have been set to 0. To get consistent results with font resizing, the base font size has been set to 100%. Finally, the vertical-align property deals with elements such as sub and sup.

The next section sets a common display role for block-level HTML5 elements:

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

These styles will be no longer required when a public default style sheet for HTML5 will be released.

The subsequent section deals with some particular styles of HTML elements:

body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Two things to note here: the first rule comes from an extensive study conducted by Eric on the default line height used by web browsers, whereas the last rule tends to compensate some oddities in the application of table layout algorithms.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.