Elegant Universal/Global CSS Reset Solution

The contents of this article may be out of date. It has been archived and will no longer be updated, comments are closed and the page is provided for reference purposes only. In 2015 you should use Normalize.css to make browsers render all elements more consistently and in line with modern standards.

In a perfect world all browsers would interpret and apply CSS rules constantly across the board. Unfortunately the word is not perfect. All browsers have their own built in default styles they apply to a page when it is rendered, these styles vary and this causes elements to be displayed differently in almost every browser. So what is to be done? Applying our own set of reset rules before we begin levels the playing field across A-grade browsers and provides a sound foundation upon which we can explicitly declare our intentions.

The quick and dirty way:

* {margin: 0; padding: 0;}

The wildcard method is used a lot to reset the default padding and margin on ALL elements. This method hoverer does cause issues within forms and some other HTML elements. Applying this rule indiscriminately is a start but does not resolve many issues and can even create issues of its own.

I used to use this this method when working with CSS but soon discovered some of its draw back when working on larger sites. I started using Eric Mayer’s CSS Reset a few years ago and have since modified this original idea to suit my own needs and have come up with my own variation I use on my projects. If you want to use this code you are free to do so.

When starting a new project I usually start by including this CSS reset at the beginning of my new CSS document with the following line of CSS code:

@import url(“reset.css”);

This must appear at the beginning of the CSS document for the @ import to work and so as to not override your own rules. Using a reset script may not be right in all circumstances and will require you to style elements to make them appear as users would expect. For example <strong> you may want to add font-style: bold; to make the tag embolden text otherwise it will not be distinguishable but the point here is it will always be emboldened and not be italicized if that is how the browser interprets the <strong> tag.

This is what the code looks like:

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, sub, sup, 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-weight: inherit;
     font-style: inherit;
     font-family: inherit;
     vertical-align: baseline;
     }
:focus { outline: 0; }
table {
     border-collapse: separate;
     border-spacing: 0;
     }
caption, th, td {
     text-align: left;
     font-weight: normal;
     }
blockquote:before, blockquote:after, q:before, q:after {
     content: "";
     }
blockquote, q { quotes: "" ""; }
abbr { border: none; }
abbr[title] {
     border-bottom: 1px dotted #aaa;
     cursor: help;
     }
a img { border: none; }

The Yahoo! UI Library also has its own version of a reset script as part of it’s YUI Base CSS files. Taking things a step further the Blueprint project is an entire CSS framework that gives a foundation for grids, typography, print and includes the reset function.

This article was posted on 6 March 2009 in CSS

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.