reset CSS = rethink CSS

I am always up for a challenge, so I decided to incorporate a reset.css stylesheet into a site I am developing. I was quite surprised at the effect — and had to rethink a whole lot of stuff I thought I knew!

So when last did you style an HTML form? I thought the way I currently styled my forms was quite smart. Then, on a new project, I decided to apply a reset.css stylesheet. After the initial shock had worn off, I got busy!

Basically, a reset stylesheet is designed to level the browser playing field: you apply it in addition to (and before) your normal stylesheet/s. It accomplishes this by explicitly setting – or rather “resetting” – the properties of your elements (margins, padding, borders, etc.) to zero (or a specific value), rather than allowing the various browsers’ different defaults to disrupt/“break” your layout (see code excerpt at the bottom of post).

I have applied the same reset.css to www.stylus.co.za, and am in the process of ironing out some of the small problems (some of which you will find at the time of writing this if you take a look around).

I have used Eric Meyer’s Reset, and recommend you do the same. Apart from its desired effect, it has also proved to be a valuable exercise in CSS!

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, font, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

Below screenshot of the stylus blog from all those years ago, courtesy of the WayBackMachine! I think I far prefer this old, clean layout to the current theme.

First published 7 March 2008. Retrieved from reset CSS = rethink CSS | stylus (archive.org)