itssamuel.com is the home of Samuel Cotterall, a web designer & developer from the north west of England.

CSS Reset is something I have found myself regularly explaining to fellow developers. The concept is simple:

Each browser (or browser family) applies different default values to elements - be it page margins, heading sizes or whatever, meaning that even before you begin to add style to your markup, the pages will render differently under different browsers. Granted, they will render differently using this method, but it’s best to start with a blank page.

More often than not, when I am presented with someone else’s code, and it renders differently in Internet Explorer to Firefox, it is not a browser ‘bug’ - rather the default formatting kicking in. A common example of this is Lists, where one has been used to create a vertical navigation bar, and the developer has removed the list-style and it, just by pure luck, site perfectly within it’s container. However, IE may indent this list more than Firefox, and cause it to break out of position.

Because of the cascade, the value of zero can be passed to each element, over riding the browser’s defaults. Similarly, this can be overridden, later on in the document, with your own values. For example:

/* We remove the default border from image links */

a img, :link img, :visited img {

border: 0;

}

/* We apply a 1px border to image links within a specific element */

div#gallery a img {

border: 1px solid #333;

}

For this to work you will need to either write your own, or use someone else’s reset file (recommended) and include it before your own stylesheet (either pasting it at the top of your .css file, or link-ed before your .css file within your markup).

Eric Meyer writes about this subject in greater detail, and I can’t fault his ‘Reset Reloaded‘.