CSS Reset or: How I Learned to Stop Worrying and Love the Browser

Tagged as: CSS

And the sins of the browser shall be visited upon the site.

Take a look at this test page of various HTML elements. Take a brief look at its formatting. The headers are bold and set in varying sizes. Block quotes are indented. Emphasised text is set in italics (or oblique, depending on the font, but that’s a topic for another day). Paragraphs have margins. Even the <body> itself has a margin. But why? I certainly didn’t tell the browser to style these HTML elements like this.

“But Jack, that’s what those elements are supposed to look like.”

Precisely. They’re supposed to look like that. It’s convention. Tradition. The way of things. In the days before CSS, browser manufacturers took it upon themselves to implement a set of presentational standards for HTML elements, making life for the website creator easier.

“We know you want your header to be big and bold, so we’ll save you the trouble by making it the default.”
“Oh, thank you, Netscape Navigator!”

That was fine and dandy until the day someone wrote out a CSS rule h1{ font-weight: normal; } and realized, “Wait, why should I be telling the browser what not to do? The browser shouldn’t be doing anything!” We simply don’t live in 1995 anymore. We’ve separated our markup from our presentation, and we want to keep it that way, but even modern browsers are hell bent on setting an arguably arbitrary set of default presentational rules. The worst of it is that the myriad browsers can’t even agree on the same defaults. Sure, headers will always default to bold, but how much space should be between a header and the following paragraph? Does a second-level unordered list use round or square bullets? Just how much do you indent a blockquote?

For an example of what the defaults for various browsers are, here are some screenshots I took of the aforementioned page.

Take particular note of the whitespace. While browsers may be more or less in sync when it comes to default font sizes, they’re all over the map when it comes to margins and line-heights. Firefox 3 in Windows is pretty generous with whitespace while Opera on OS X tries to cram as much content above the fold as it can. Also note that Opera 9 breaks from the crowd and refuses to style unordered sub-lists any differently than their parents.

Hit the Reset Button

You have two options here. Live with the fact that your users’ browsers are going to poke at prod at your markup and hope that you’ve defined a sufficient number of styles to keep the browser defaults from showing through, or you can wipe the slate clean before you even start writing your CSS. That’s where the CSS Reset comes in.

I won’t go into too much depth, because it’s been discussed at length over the past few years. In fact, Six Revisions has a pretty thorough article on resetting CSS. To make a long story short (too late), Eric Meyer, master of all things CSS, has what can be considered a pretty definitive foundation for CSS Resets. I say foundation, because you shouldn’t just dump this into your site untouched. For instance, why create a body{} rule to set up font color and background images when one already exists right there in the reset stylesheet? Also, your specific project may necessitate default styles that differ from what Meyer has deemed appropriate.

In fact, I wouldn’t really think of it in terms of resetting your CSS, but rather creating a new default for your particular site. If you know all the tables in your site will have a particular border style, don’t write a new table{} rule, just overwrite the existing rule in your reset stylesheet.

That said, let’s revisit our test page of HTML elements, now with Eric Meyer’s reset stylesheet applied. Much better…almost. You’ll notice that headers still appear in boldface, as well as table header cells (which also remain defaulted to a central alignment). Also, emphasized and strong text maintain their default appearance. Meyer has argued in favor of leaving these particular defaults as they are common enough and sensible enough to avoid resetting. However, for my needs, I would prefer defaulting headers to a normal font-weight and setting all elements to a default left alignment. To achieve this, I’ve added a few lines to Meyer’s universal rule to handle these attributes:

font-weight: inherit;
text-decoration: inherit;
font-style: inherit;
text-align: left;

These rules will default all elements to a normal font weight with no style or decoration, but allow me to override that as needed and ensure that all children of those elements inherit the overridden style. Of course, this also eliminates the styling on emphasized and strong text, so I need to explicitly define those styles now:

em { font-style: italic; }
strong { font-weight: bold; }

One last change I made was to ordered lists. While it’s good to leave unordered lists without any default styling (because they’re often used for much more than just lists of text), I decided that ordered lists will only be used for just that, ordered lists of text.

ol { list-style: decimal; }
ol ol { list-style: lower-alpha; }
ol ol ol { list-style: lower-roman; }

Let’s take one final look at our test page, this time with my version of the reset stylesheet. Now that’s a clean slate if I’ve ever seen one. I guess it’s high time I get cracking on making this site less of an eyesore. Readability, coming’ up!

P.S. – You won’t see any numbering on the ordered lists of the final test page because list-style-position defaults to outside, and since there are no margins in the page, the numbers wind up residing off the left edge of the browser window.

1 Comment

You can follow any responses to this entry through the RSS 2.0 feed.

1 Comment so far

Jack — April 19, 2009 at 5:34 pm

Just realized a number of links on this page broke when I installed WordPress. They should be fixed now.

Space for a Name

An Experiment in Design