Level the Playing Field with Reset Style Sheets

Recent Article

Level the Playing Field with Reset Style Sheets

Posted on April 23, 2008. By Guest Author.

Scott Phillips is a web developer working at Drake University in Des Moines, Iowa.

The most frustrating part of learning cascading style sheets is getting consistent results across browsers. As you probably know, not every browser supports every rule in the same way (or at all).

Luckily, strategies have emerged that can help CSS newbies keep their sanity. The first is to write CSS so that it works in a browser that has solid support for CSS (like FireFox or Opera) and later tweak it, as needed, to work correctly in others (like IE6). Another strategy is to use a validator to find any simple syntax mistakes. These days, more and more developers are using a reset style sheet to cancel out pesky differences between browsers.

What’s the problem?

Even when you don’t use CSS in your web pages, you are still using CSS in your web pages. Huh? I’ll explain. Begin with the simplest page you can imagine:

<html>
	<h1>Here is my title.</h1>
	<p>Here is my paragraph.</p>
</html>

View it with several browsers and you’ll see subtle differences. The margins are off. The font sizes and weights are different. We’ve hardly begun and already our pixel-perfect design is breaking down!

Here is what’s happening. Every browser has built-in default styles. To see Firefox’s on Windows XP, for example, open the file C:\Program Files\Mozilla Firefox\res\html.css. You’ll find rules like this:

h1 {
	display: block;
	font-size: 2em;
	font-weight: bold;
	margin: .67em 0;
}
...
blockquote[type=cite] {
	display: block;
	margin: 1em 0px;
	padding-left: 1em;
	border-left: solid;
	border-color: blue;
	border-width: thin;
}
...
hr {
	display: block;
	height: 2px;
	border: 1px -moz-bg-inset;
	margin: 0.5em auto 0.5em auto;
}

The lesson is this. If you don’t express an opinion about how an element should look, the browser will substitute its own. We’ve already seen that browsers never agree. Furthermore, even if an element looks identical across browsers, you can’t assume it is actually being treated identically (i.e. one browser may use a default margin for the white space around a list while another uses padding). Make a seemingly small adjustment and suddenly they both change in different ways. What a mess.

What can we do?

Zero-out the default browser styles. Then replace them with your own. A very simple reset rule looks like this:

* {
	margin: 0;
	padding: 0;
}

That cancels out margin and padding for all elements on the page. From here you might want to continue by resetting font sizes and removing image borders:

html {
	font-size: 1em;
}
body {
	font-size: 100%;
}
:link img, :visited img {
	border: 0;
}

It would also be handy to fix inconsistencies with lists and tables:

table {
	border-collapse:collapse;
	border-spacing:0;
}
ol,ul {
	list-style:none;
}

Slap all that code into a file called reset.css and @import it at the top of every page. You are on your way to more consistent results and fewer debugging headaches.

Standing on the Shoulders of Giants

Our reset style sheet is simple but effective but it’s just the beginning. The universal selector (*) can occasionally cause issues of its own. And inheritance problems can also crop up as you continue to expand your reset style sheet.

Luckily, web pros like to share. Yahoo has released their own reset style sheet for us to use, called Reset CSS, as a part of the larger Yahoo User Interface (YUI) library. Eric Meyer, a full-fledged CSS Jedi, has also done a lot of work on a robust reset style sheet. Both are excellent, and I recommend studying and adopting either (or parts of both) of them into your own projects.

Responses

On 4/23/2008 at 8:39am, Turulcsirip - Takács Dániel said,

[…] http://www.cssnewbie.com/reset-style-sheets/ - Level the Playing Field with Reset Style Sheets « előző | Takács Dániel — 2008. 04. 23. 15:39 […]

On 4/23/2008 at 4:25pm, Mr Kuzio said,

So, now where i can download a pre-compiled “reset CSS”?

I’m not a web designer, i’m not able to write it by myself.

On 4/23/2008 at 4:32pm, Richard said,

There has been quite a lot of discussion about reset stylesheets in the blogosphere this week, some in favour of them and some against, but mostly people saying that they don’t really care about browser defaults, and therefore don’t see a need to reset anything. I have dabbled with them and without them, but my current leaning is towards using a simple reset for some elements, or using a more comprehensive reset and removing certain elements from it.

For me, the jury is still out on reset stylesheets, but I am still pretty much a CSS newbie and I am sure I will chop and change on a per project basis

On 4/23/2008 at 4:33pm, Richard said,

Mr. Kuzio, the reset sheet from Yahoo, as well as Eric Meyer’s reset is linked to in the last paragraph of the article above.

On 4/24/2008 at 12:56pm, Mr Kuzio said,

Oh, richard… thank you! XD

Sorry for the inconvenience.

On 4/25/2008 at 11:51am, David Hucklesby said,

Some good advice and links there, Scott. Thank you.

Personally I would not use the * {margin:0; padding:0;} solution. Considering that the majority of page elements don’t have margins or padding to begin with, it seems like using a sledgehammer to crack a nut. Besides, you’ll wind up adding back most margins and padding anyway, no?

My fave is Eric Meyer’s “Reset Reloaded” that you link to. As he notes in his article though, these are not intended to be used “as is.” He writes: “Think of these as a starting point for creating your own defaults.”

On 4/30/2008 at 9:42pm, NETTUTS - Web development tutorials and links - Best of the Web - April said,

[…] Visit Article […]

On 5/1/2008 at 4:14am, » Level the Playing Field with Reset Style Sheets Webcreatives said,

[…] Level the Playing Field with Reset Style Sheets Related Stuff4 Uber Cool Css Techniques For Links30 Exceptional CSS Techniques and ExamplesDate StampsIE CSS Bugs That’ll Get You Every Time20 Very Useful CSS3 TutorialsUsing Definition Lists: Question & Answer formattingUsing CSS to Do Anything: 50+ Creative Examples and TutorialsAnimated horizontal tabsCSS Confirmation Message BoxesEffective CSS Shorthand […]