As any web developer using CSS will know, different browsers render pages in different ways. Some browsers have a built-in stylesheet that can effect such things as margin and padding on page elements.

By resetting the built-in stylesheet in modern browsers a lot of the anomalies can be avoided - reducing the headache of adjusting CSS files by trial and error.

By first resetting your CSS, the web developer can make a clean start on producing a stylesheet for multiple browsers. This approach means the web developer can determine what can be achieved by using a single stylesheet across multiple browsers, and where the limitations of each browser are.

Below is the latest Reset CSS file from Eric Meyer, to find out more check out his website.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

Yahoo also have a CSS reset file as part of the Yahoo Developer Network - the website contains the latest information for web and app. developers.

How To Do It

1. Copy the code above and save it in a notepad file as reset.css

2. At the top of your external stylesheet add:

@import url(”http://path/to/file/reset.css”);

Make sure this is on the first line of your css file

3. If you’re CSS is in-line call your reset.css file by putting the following in the head of your page:

<style type=”text/css” media=”screen”>@import —->

url(”http://path/to/file/reset.css”)</style>

Make sure it is before your inline CSS in the code