Using Reset Stylesheets

Current revision

Even the browsers with the most rigorous support for web standards have slightly different starting points for many HTML elements. It's true -- measure your page elements in Firefox, Safari and Opera with a ruler and you'll see each renders them in their own subtly different ways.

For example, the default margin for paragraph tags in Safari is smaller than it is in Firefox. And what about the fact that most browsers automatically add bullets to your unordered list tags? Or that headlines appear bold? Web designers have been struggling to cope with these differences since the dawn of history (about 1993).

One popular solution is the use a reset stylesheet -- a stylesheet with the sole purpose of forcing every element to a common default setting that looks and behaves the same way in every browser.

That sounds great, you say. How does one do it?

We'll get to that. But first, it's worth exploring some of the arguments both for and against the reset stylesheet.

Q: Why Use Reset CSS?
A: Duh, it makes browsers do your bidding.

Here's the argument in favor of the technique: Using a reset stylesheet creates a baseline starting point that will render common elements in exactly the same way, regardless of browser, operating system or environment.

Resets are designed to tear down differences between browsers. Generally this translates to removing the default padding and margins from elements that would otherwise have inherent browser defaults.

Reset stylesheets are merely a starting point. They aren't intended to be an actual style, just a common beginning upon which to build your own custom styles.

Q: Why NOT Use Reset CSS?
A: Because it's a stupid hack and you override it anyway.

The view from the other side of the coin comes from designers who don't see the point of a global reset. After all, they argue, what's the point of resetting a CSS rule if you're just going to override it with your own rules anyway?

Those who shun reset stylesheets will argue that if something doesn't look right by default, then you should create a style to address that specific issue. There's no need, they say, to reset it back to zero and then set it again to what you really want.

If you're OK with the fact that some browsers render an <h1> tag 5 pixels larger than the others, and you aren't seeking pixel-perfect cross-browser nirvana, the reset stylesheet might not be for you.

Enough with the debates! I want one

There are a number of popular prefab reset stylesheets out there. Here are three of the best-known:

• CSS guru Eric Meyer's Reset

• Yahoo's YUI reset stylesheet

• A similar effort from the Blueprint framework

If none of those do quite what you want, you can always tweak and modify them or even create your own tailored to your whims.

To give you a walk through of what a reset stylesheet does, let's take a look at Meyer's version. Here's the code:

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;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

As you can see, Meyer has grouped together all the elements that generally have some sort of browser-defined default spacing, and then proceeded to eliminate the margins, padding, border and outline for each. He's also set the font size to 100 percent, made sure that every element sits on its baseline by default and eliminated any background.

After that, there's a set of rules that are arguably not strictly resets, but Meyer's default working preferences. The body line-height, for instance, may not work for you, especially if you're concerned with keeping a strict baseline grid working on your project. You also might want your ul and ol lists to have bullets or numbered lines, whereas Meyer has opted to eliminate those.

Also note that, as you can see from Meyer's inline comments, he defines his own custom :focus and ins highlights in site-specific stylesheets.

Using a reset stylesheet in your projects

You may be wondering how you should go about loading the reset styles. There's no right answer here, but the habit we've developed is to load a single stylesheet (generally we name it base.css) from the head tags of our HTML like so:

<link rel="stylesheet" 
      href="http://mysite.com/css/base.css" 
      type="text/css" 
      media="screen">

Then within base.css, we do something like this:

/* Core stylesheets */
@import url("reset.css");
@import url("type.css");
@import url("layout.css");
...etc...

This method provides some built-in hierarchical organization and makes it easy to swap out the reset.css without needing to change anything else. One the downside, it means more HTTP requests, which could slow down your pages. However, in our experience, any resulting slowness is pretty minimal compared to what you gain in organization and development time.

Conclusion

Like a lathe, a reset stylesheet is a tool. And just as not every carpentry project necessitates a lathe, not every designer needs or wants a reset stylesheet. How useful it is depends a lot on how you work.

Just as there's nothing wrong with using a reset stylesheet, there's certainly no requirement that you use one. If reset stylesheets make your life easier, then by all means grab yourself one. If not, then you can carry on designing as you were.

• This page was last modified 00:20, 24 October 2008.