It is common knowledge that some HTML elements display differently across browsers, even when no extra styling is applied to them. Thus, sometimes it is justified to start designing on a level playing field by resetting margins, padding, heading sizes, etc. to some kind of default values. How would you go about that task?

The two most popular solutions come from the free Yahoo! User Interface library and from the site of web consultant/designer Eric Meyer.

If you take the time to compare the two CSS files, you will see that they are very similar. Both specify a white background for the page, black text, list-style: none; for lists, specific values for the respective heading levels, etc. They differ in that the YUI's reset.css is a part of large (8MB), well documented framework, while the other is a stand alone project which is constantly updated with feedback from the public. Which one you select to use is thus up to you. Simply link to a dedicated CSS file, or include the declarations in your own stylesheet.

Bonus application scenario: often your web publishing platform of choice will use a ctylesheet, which specifies custom size, color, and positioning values that have nothing in commmon with the vanilla styling of a browser. If you write about web design, and want to show to your readers a "before and after" example by comparing the default look of an element to a custom solution, then reset.css is where you would look for the default values.

Bookmark this article with:

 •    •    •