Because web browsers are notorious for displaying things differently from each other, for many web designers it sometimes feels like so many browsers, so little control. But there are ways around this- and one of my favorites is a little something called a CSS reset. A CSS reset can be anything from a single definition on your stylesheet to an entirely new stylesheet that you link to. For example, many designers like to add this to the beginning of their existing stylesheets:
* {margin:0;padding:0}
This, a very basic reset, "resets" all elements (signified by the asterisk) to have zero margin and zero padding. Here's an example of a more advanced reset:
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: "" "";
}
The above is one of the most popular CSS resets out there, made by CSS guru Eric Meyer. You use it the same way- either add it to the top of your existing stylesheet, or put it in a separate "Universal reset" CSS file and link to it from your pages. The advantage of doing the latter is that if you want to make changes in the future, you only have to edit one stylesheet.
It's important when using any CSS resets that you make sure to define certain styles that have been reset. For example, if you don't define padding-bottom and/or margin-bottom for your paragraphs, you won't see any space between your paragraphs.
You can, of course, write your own reset- in fact, if you've done a reasonable amount of web design with CSS, you probably already have a certain baseline framework you work with. When developing your own signature reset, it's a good idea to get to know the various browser defaults that exist, and perhaps the best way to do this is to view your non-css-resetted HTML page in as many browsers as you can get your hands on.
Finally, if you'd like to learn more about the various CSS resets available, and get more tips on rolling your own, here are some links I recommend:
- Reset Reloaded
Eric Meyer's uber-popular reset, with his explanations.
- YUI Reset
If you've used Yahoo!'s YUI grid system, you already know about their reset.css stylesheet. Another very popular one.
- Tripoli
It's called a "CSS Framework", not a reset, but Tripoli essentially does the same thing- and more: it resets everything, then provides definitions according to their idea of "optimal legibility and well-structured text presentation".
- Don't want to use CSS resets? You're not alone. Read Jonathan Snook's No CSS Reset or Warpspire's Why I don't use CSS Frameworks.
Do you use CSS resets?
