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.