CSS Reset
Welcome to our little corner of the CSS world.
If you’re just getting started with CSS, feel free to check out our pages on basic and introductory concepts.
If you are already more or less up to speed, you’ve probably already noticed that the ‘universal’ nature of CSS is not without exceptions. In fact, one of the biggest challenges in working with CSS is dealing with the different ways in which browsers are set up to interpret rules and styles.
All the ‘big’ browsers (Firefox, Internet Explorer, Opera, Chrome) may generate unpredictable results depending on the version. IE is particluarly notorious for (among other things) drastic differences between CSS interpretation in various versions. IE5.xx for Windows has a number of CSS idiosyncrasies (‘behaviors’?), but virtually every browser has its own quirks that need to be taken into consideration.
The answer is in CSS reset — basically, a way to keep results as universal as possible by defeating any browser-based rules and omissions before your CSS is applied.
The following will strip away much of the browser’s pre-formatting, and in many cases will give you a nice blank slate upon which to style in confidence:
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
To be even more thorough, you may add:
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Which should take care of nearly every situation involving blockquotes, lists, headings, forms, et cetera.
If you’re still experiencing problems or getting reports of strange results, we highly recommend the Tripoli Reset, the Tantek reset, and Erik Meyer’s CSS Reset page for further experimentation.