Always the same mess: Through several meetings, customer and designer develop a layout-structure and after some days, a flashy Photoshop-File appears on your desk. Now, it's all up to you, programming a nice little template for the backend-programmer, that “looks exactly the same” in every single browser – just as the customer awaits, being overwhelmed by the design.

Everyone, who experienced that situation will know the shock when a template is finished and looks perfect in Firefox and then opens the same page in Internet Explorer. The next step would be rearranging the pixels by conditional comments, browser-specific selectors and dirty hacks until it comes to Safari and you start again.

STOP! This dilemma could be prevented in most cases by clean, standards-aware coding on one hand and by setting back the default user-agent-style on the other. Never trust a browser-default: A clean css-reset brings you in the position of knowing and determining the default-values, independent of the browser.

You can find as many resets as there are css-frameworks and -gurus out there. Everyone who bothers, stumbles upon Eric Meyer's "Reset Reloaded" or Tantek's "undohtml.css" or even peeks behind the curtain of blueprint or Yahoo!'s YUI.

If you haven't done that yet, start getting in touch with wise men's code. Try to get a glimpse on as many different practices as you find and read their motivations too. Someone said that eyes become beautiful, watching beautiful things. I haven't figured out, but it's been a fact that you will write beautiful code, if you suck every piece out of the web.

However, try to avoid copy and paste. Instead, it's better to know how it works, then write one clean code that fits your needs and recycle it for the next problem. If you care after it like for your cat – killing errors, adding smart ideas – it will become more and more powerful.

Even though e.g. Safari's and Chrome's default style sheet, show pretty much the same margins, as you can see in the picture, there are wide differences, if you compare them to Internet Explorer.

As far as design is considered, we got no use for elements flying around depending on the user's browser and of course we need strict alignment for containers. So the first rule, we have to implement, is to set the margin and padding of all elements to zero. We avoid using the star-selector as far as possible, especially in a basic style sheet, which is going to be reused, due to improving the performance. However, for a small reset (e.g. for testing purpose) the star-selector would do it.

Lazy guys do it that way…

* {
	margin: 0;
	padding: 0;
}

…but that one is better

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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
}

It's a sad truth that most of designers can't cope with the particularity of different resolutions and the zoom-ability of their clients. Font-size informations are often made in pixels or dots, instead of using the more liquid em. One way to use em's where pixels were given is to peek at conversion tables or to calculate every value given. It would be great, if the reset makes it easier to calculate it, without losing zoom-ability for Internet Explorer 6 by using fixed measures (px). If we know, that the font-size in every browser is pretty much the same, which means 16px, we can set the font-size to 62.5%. The size of 1em now equals 10px, because 62.5% of 16 are 10. That technic is described on Clagnut I also used set the line-height to zero (memo for myself: paranoid?).

html { font-size: 62.5%; } /* 1em = 10px when font-size standard is 16px */
 
body {
    line-height: 1;
    font-family: "Times New Roman",serif; /* you can leave that out */
    font-size: 1em;
}

We need some more punishment for images, which are rendered with ugly blue borders, if linked.

a img {border: 0;}

If you use image-replacement, it's also useful to prevent focus-elements from having an outline (may User-Experience-Guys kill me for that rule). But remember to give elements an outline, where it makes sense!

:focus {outline: 0;}

Lists are widely used for menus, navigations and other semantic combinations. Andy Clarke writes in his book: “all the world's a list; every item must play it's part”. It makes a lot of sense to hide the list-style-type in the reset and then set it manually for the lists of your content-container.

ol, ul {list-style-type: none;}

Now, we should also collapse the borders of the tables and avoid border-spacing to have clear border-lines.

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Finally, lets set back the quotes for blockquote and q. But remember not to make Richard Rutter and Mark Boulton angry (webtypography.net-visitors know what I mean) by using bad quotation marks.

blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

A good reset is worth some minutes of thinking. It prevents you from frustration, many sleepless hours and high Starbucks-Bills. The pre-condition is that you take a moment of research and challenge your habits. The result is a reusable code, which saves time and brain. You just have more time to make your customers happy.

• http://meiert.com/en/blog/20070922/user-agent-style-sheets - good article from Jens Meiert about browsers default style sheets with a great collection of examples
• http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles - wonderful collection of resets from different frameworks and gurus