CSS Resets

I've always used a simple form of "CSS Reset", where you zero out a few CSS properties to avoid some common cross-Browser compatibility problems that are caused by different Browsers using different default styles. The classic example is to zero out the margins and padding for all elements. But in 2007, Eric Meyer posted a more advanced reset, that zeroes out many more CSS properties, along with his reasoning on the subject.

The idea is to get all Browsers on equal footing, by stripping them all down to a very minimal base, and then building them back up with your own styles. That way, you will explicitly set the styles you want, and not rely on Browser defaults which could vary from Browser to Browser. Eric later posted an updated version of his reset, and now maintains the latest/greatest version here.

Yet another reset has been published by Yahoo as part of their YUI CSS Foundation. Yahoo goes a step further by actually providing some basic styling to be applied after the reset. So, once you applied the reset and the "Base CSS", you should have all the "A-Grade" Browsers rendering the same, and you can build up your own styles on that foundation.

You'll find resets being used in the so called "CSS Frameworks" such as Blueprint, and 960 grid. More on CSS Frameworks and grid systems in a later post.