Tantek Çelik’s ‘undohtml.css‘ stylesheet is as much good sense as quirkiness. This CSS Reset stylesheet does what you might expect – removing borders from linked images, eliminating margins and padding for the most common elements, and resetting the font size for most typographical elements to 1em.
Now for the quirky part – ‘undohtml.css’ also removes underlines from links, and un-italicizes the rarely-seen <address> element. And if you’re looking for /* comments */, get ready to feast your eyes…
Click here to skip straight to the script, or continue reading for some discussion…
Tantek’s ‘undohtml’ CSS Reset is definitely lacking in a few important areas, and perhaps a little over-specific in others, but it presents some key ideas very succinctly in the comments. Most notably was his reasoning for the common practice of setting list-style:none on the <ul> and <ol> elements:
/* no list-markers by default, since lists are used more often for semantics */
This point is also worth a look:
/* link underlines tend to make hypertext less readable, because underlines obscure the shapes of the lower halves of words */
While the readability issue might be subjective, some designers and developers prefer to replace text-decoration:underline with border-bottom:1px solid #etc, as this gives them greater control over the underline styling. Many websites (CSSReset.com included) have non-underlined links that are underlined on hover, but for this to work, they need to be very clearly coloured.
Tantek’s CSS Reset, although written in 2004, may be useful in some production websites – it’s smaller in size (minified) at almost 1/3rd the size of Eric Meyer’s famous “Reset CSS” – but most of all it provides an interesting jump-off point for discussion and serves as a reminder that there’s no such thing as a one-size-fits-all CSS Reset stylesheet, and that designers and developers should always customise theirs for each different website.
Next time you’re building a website that makes use of the <address> element, spare a thought for ‘undohtml.css’ : )
The CSS Reset
Here’s the stylesheet, in both full and minified formats, for you to copy and paste:
Full version (1.48KB):
/* undohtml.css - http://www.cssreset.com */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */
/* link underlines tend to make hypertext less readable,
because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }
/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }
/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
/* remove the inconsistent (among browsers) default ul,ol padding or margin */
/* the default spacing on headings does not match nor align with
normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/* nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }
/* de-italicize address */
address { font-style:normal }
/* more varnish stripping as necessary... */
Minified Version (0.26KB)
/* undohtml.css - http://www.cssreset.com */
:link,:visited{text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6,pre,code{font-size:1em}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0;padding:0}
a img,:link img,:visited img{border:none}
address{font-style:normal}