Tips on using CSS Resets
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?
Want an avatar? Get a gravatar! • You can link to this comment
The * reset is a pretty bad idea I’m afraid…
Imagine the work a user agent has to do to reset the margins and paddings on every single element on a page. That’s a lot of unnecessary work. Especially considering a lot of elements don’t have margins/padding anyway.
The Yahoo! one is my reset of choice though. A well considered reset is an amazing tool.
Want an avatar? Get a gravatar! • You can link to this comment
amazing post. thanx a lot
Want an avatar? Get a gravatar! • You can link to this comment
I think resets are great, and use them all the time. You definitely need to be aware of the rules and not just copy and paste blindly, but when used correctly, they can really help. Here is a great collection of CSS resets that I put together for easy reference:
http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/
I hope it further helps your readers. Thanks for the post
Want an avatar? Get a gravatar! • You can link to this comment
Just thought I would add YAML (Yet Another Multicolumn Layout) CSS Framework to your list here. I’ve built my site using this amazing framework, which also contains several “resetting” features.
YAML not only contains a reset, such as the one in your article, but it also contains literally dozens of fixes for IE 5-7, Firefox, Safari (and by extension, Chrome), and Opera browsers. These fixes also perform the function of “resetting” the browsers to a common starting point, so that whatever you add to one, you add to all.
The size of code in frameworks is usually a concern for folks, but YAML has slim versions of its CSS, so it is very compact, while still providing the resetting functions.
Want an avatar? Get a gravatar! • You can link to this comment
Browser resets are not much work for the browser. I personally feel only a few of the elements really need to be reset but there is no problem with using the same reset.css across the board.