CSS Report

Every web browser has a default style sheet it uses when rendering content, and every web browser uses slightly different defaults. Perhaps a button will use an extra 2 pixels of width in one browser, but 3 fewer pixels in another. These differences are insignificant to many of us, but they worry some designers and keep them awake at night. This is where CSS reset style sheets come into play. The goal of a CSS reset style sheet is to set the default styling for all HTML elements into a known state. A good CSS reset will effectively “undo” all the default styles any web browser might define. The CSS designer can then built their own style rules and feel relatively confident that a design will look the same across all browsers and environments. For example, here is what you will be starting with after applying the YUI Reset CSS:

• Black text on a white page background
• Margin and padding for all elements set to zero
• Table borders set to zero
• All fonts sized 100% of base
• Font-weight and font-style set to normal
• and more

There are a few CSS resets available on the web:

• YUI 3: Reset CSS
• Eric Meyer’s Reset CSS
• Blueprint
• HTML5 Reset Stylesheet

Note that YUI and Blueprint both include a CSS reset as part of a larger CSS framework. Should I Be Using A CSS Reset? This is the subject of some debate. Some people feel a CSS reset creates more work – both for the designer and the web browser. The designer has to start from scratch and will write more CSS style rules to design a page that has been stripped of all aesthetics by a CSS reset. Naturally the browser will also work harder to process all these additional rules and cascades. But, if you care deeply a design, and how that design will render around the universe, then you won’t mind any of the extra work. CSS reset can be good. As Eric Meyers says in his post “Crafting Ourselves”