Element normalization with reset.css

Often, one of the most painful exercises in web development is simply getting everything to look consistent across the major browser platforms. No standard states how a particular HTML element should look. The intent of a markup might be self-evident; we would expect an <h1> to look larger or bolder than an <h2>, and both larger than plain text but there is no standard saying by how much. Developers will often design and test an implementation in one particular browser, and then when everything is working and rendering correctly in their browser of choice, they will have to refine it and tweak it until it works and renders similarly in all of the other major browsers.

Due to the differences between the default stylesheet in use in the various browsers, getting pages to render in the same way can be a challenge. Something that lines up perfectly in IE will undoubtedly be misaligned in other browsers. And of course, when you correct the differences so that it renders in the way you want it to, say in Safari, you'll find that when you go back to IE, it's out of alignment there once again.

For a quick example of CSS inconsistencies at work, take a look at the following screenshot; the subtle differences in font size, padding, and margins make the text fit into one line in one browser but fail to do so in another. There is no right and wrong here as there is no standard to comply with, but our layout ends up broken anyway:

Until now, the quickest way around these issues has been to use a modern browser to design in and resort to separate stylesheets, hacks, or filters so as to make the various versions of old, though still popular browsers, play along. Still, there is no guarantee that future browsers will not choke on any hacks or filters that you may be using in your stylesheet, so it is best to try to avoid them whenever it is possible for you to do so.

Using a range of different stylesheets for different browsers and browser versions can also be problematic in terms of maintenance, as you will find that when you want to make a change to the way in which your site is displayed, there are many more files that need to be updated.

The CSS Tools can provide a firmer guarantee that future browsers will still display everything correctly and can cut down on the number of files that you need to actively maintain (as Yahoo! will kindly maintain these for you).

The reset.css file provided by the YUI Library avoids the need to use most hacks or workarounds by standardizing the default rendering of all of the most common HTML elements across the different browsers, saving you the tricky troubleshooting that sometimes needs to be done to get everything lined up and looking right in all browsers.

Most styles have been removed, set to zero, or otherwise neutralized, so you can worry about presenting your content, without trying to remember whether additional padding in a particular browser is going to put everything out of place.

Element rules

reset.css consists mostly of element selectors that match nearly all content containing HTML elements and reset them to a non-styled state. This enables the designer to apply consistent styling that works across all browsers.

The font size of all text is set alike and all italics or bold typefaces are cancelled. Margins, padding, and borders are set to zero; space in between table cells is collapsed. Lists have no indentation and no bullets or numbers. All text is left-justified.

As an example of what reset.css does to elements, the following screenshot shows a collection of all of the elements targeted by this CSS Tool, before reset.css has been applied. Most of the elements have visible styling applied to them by the browser, and this varies slightly between different browsers.

I've chosen Firefox on Windows to highlight this example because the <fieldset> element is one of the few examples of this browser styling an element badly. Note that no <br> elements or positional CSS have been used in this example at all; all of the styling has been applied automatically by the browser.

Next, we can see what a difference reset.css makes to this page by including a reference to the file in the <head> of the page. With reset.css linked, all elements are reset.

Hence, the Reset CSS Tool can be an invaluable asset when either used as part of a YUI implementation, or completely isolated from the rest of the library, and linked to by pages entirely of your own design. This tool is completely compatible across the A-grade browser spectrum. (Refer to

It's also very easy to change the default rendering provided by this file. You may wish to have certain images that do have a border, so all you need to do is add your own class attribute to the <image> and define a new CSS class in a separate CSS file of your own making.

If you only ever use one file from the library, this one alone could provide the most benefit in the long term (but of course you won't want to exclude the rest of the fantastic functionality provided by the YUI!).