CSS Reset – A Handy Tool

Friday, March 04th, 2011

As a web developer / designer, one of the major issues I encounter when creating a new site is dealing with many inconsistencies between browser default base style sheets.

This is especially true when we are required to conform with the older but still widely-used and popular Internet Explorer (IE) browser version 6 and 7.  Today, IE 7 is the standard browser used by most US government institutions.

An ideal website design should provide a somewhat consistent feel and look when viewed from different browsers. There are numerous other increasingly popular web browsers that people use alongside IE, such as Firefox, Chrome, and Safari. All of these browsers come with their own base style sheet to ensure that a website is rendered reasonably well even if there is no custom CSS (Cascading Style sheet) provided. Although the existence of these default browser style sheets is good, each browser interprets the style sheet differently which isn’t always so good.

Furthermore, these default style sheets can conflict rather than conform to the designer-applied custom CSS styles. In the worst case scenario, a browser that completely ignores widely accepted CSS attributes makes a mess of web pages that otherwise display perfectly in other browsers.

The best solution I have found for this is "CSS Reset," a script that allows you to re-write from scratch these default style sheets rather than modifying or applying a custom style sheet on top of them.

There are many varieties of CSS Reset scripts; the popular ones are available here. I have personally used the Eric Meyer's version of CSS reset and have always been happy with that. The Universal Selector contains a much simpler code (only one line), but some developers have voiced concern over the possibility of it slowing down the entire page rendering / CSS processing on browsers.

Want some more to read about CSS Reset? Try this article.