CSS Reset

**1/19 update, see my notes at bottom of the page.

Quick note on how I start all my CSS docs with a quick little reset to make pages render as universal as possible across all browsers.

1. IE, Firefox, Safari, Chrome etc. all treat margins and padding just a little different from one another… which leads to your pages rendering slightly different from browser to browser. This issue becomes quite apparent if you are using tables (for table data only of course). To reset all padding and margin set the value to zero on the universal selector as follows:

* {
padding: 0;
margin: 0;
}

2. Bullet’s for list’s (unordered in particular) appear different in each browser as well. A list of bullet items in IE will be bulleted with a solid circle, where another browser may show it as a triangle or perhaps a square. I like to set the decoration to none, and then add in my own bullet image if I must have one. To remove decoration from your Unordered Lists, set the following in your CSS:

ul { list-style:none;
}

3. For all my anchor tags (hyperlinks), I again like to set the decoration to none and then specify color, underline, etc. as part of my design.  In particular, I typically do not like the auto-standard for hyperlinks to be underlined or appear in blue, especially if they are in a top-level navigation.  At the top of my CSS, I set my anchor tags as follows:

a {text-decoration: none;
}

a:hover {text-decoration: none;
}

a:visited {text-decoration: none;
}

Then of course if I wanted all anchor tags to appear white on load, but black on hover, I would set the first two as follows:
a {text-decoration: none;
color:#FFFFFF;
}

a:hover {text-decoration: none;
color:#000000;
}

I would love to know more about what other people (you) use as generic CSS resets and if you typically write them in each CSS doc, or if you have a master CSS reset doc that you always point to.

Happy Cascading,

Gregg – http://richterwebdesign.com

1/19 Update… I posted this article on a couple of LinkedIn discussion boards and had no less that 50-ish comments discussing the merits and drawbacks to CSS resets.  While the opinions on this varied greatly, one of the most consistent comments were in regards to the Eric Meyer CSS Reset.  Eric Meyer is widely regarded as the CSS guru.  I have included a link to his site in my links section, or you can click here.