One of the most essential tools I have when I build a web site is the CSS reset. What the reset does is basically strip some or all the default styling (like padding, margins, font-sizes, etc) applied to HTML elements by different web browsers. The reason we want to do this is that each browser has its own default set of styles, and guess what - they differ from browser to browser. Starting from a fresh slate is often the easiest way to shorten development time and get the most predictable cross-browser results (though some designers, like Jonathan Snook, @snookca, don’t personally see a strong need for resets). If you see the benefit of using CSS resets, creating your own reset is very doable, and honestly not super difficult, but why re-invent the wheel? There are plenty of reset CSS code out there that you can use. I’ve listed below some of the more popular reset resources that I know of.

• Yahoo’s YUI Reset CSS
  This reset does some basic resetting of margins and borders, as well as remove some table borders, and form inputs styling. It validates as CSS 2.1 against W3C’s Validator.


• Eric Meyer’s 2008 Reset
  This latest version from Eric Meyer (@meyerweb), based on Yahoo’s reset, also validates as CSS 2.1 against W3C’s Validator, and is used in the 980 grid system (which is a solid starting point for any web design project). Eric’s reset is well known for resetting all default styles (generally speaking) - meaning you have to style virtually every element (except for notably form inputs). Though this is great for advanced designers, it may not be for everyone.

• Place the reset code first
  Obviously, resetting the styles at then end of your CSS is counter-productive.


• Avoid *{padding:0; margin:0;}
  I’m guilty of doing this. A couple of years ago, it seemed like a good idea. One line, reset everything. But according to Christian Montoya, this method is very intensive for the browser, and it’s better to write specific selector resets.