Feature
Post

Category
Code


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?


  1. By Harry Roberts posted on October 13, 2009 at 7:58 am
    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.

  2. By Harsha M V posted on October 14, 2009 at 4:55 am
    Want an avatar? Get a gravatar! • You can link to this comment

    amazing post. thanx a lot

  3. By Jeff Starr posted on October 14, 2009 at 6:02 pm
    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 :)

  4. By David S posted on October 14, 2009 at 9:53 pm
    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.

  5. By Brp Web Design posted on October 25, 2009 at 11:31 pm
    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.

  6. TrackbackDescubrimientos del 14 Octubre 2009 | Blog de unique3wwhat would be the css code? | Pay-Per-Click - infoEnlaces semanales que no he publicado (34) | triunfoweb.comBreadcrumb Navigation Examined: Best Practices & Examples | GraphicsBreadcrumb Navigation Examined: Best Practices & Examples | Lunch Time LaughWordpress Blog Services - Breadcrumb Navigation Examined: Best Practices & ExamplesBreadcrumb Navigation Examined: Best Practices & Examples | Technology you can trust here...Breadcrumb Navigation Examined: Best Practices & Examples | Mac BargainsBreadcrumb Navigation Examined: Best Practices & Examples | FulldigiBreadcrumb Navigation Examined: Best Practices & Examples « Blogoholics AnonymousBreadcrumb Navigation Examined: Best Practices & Examples | Programming BlogBreadcrumb Navigation Examined: Best Practices & Examples | Internet Marketing Tips and Strategy To Make Money OnlineBreadcrumb Navigation Examined: Best Practices & Examples | Web DeveloperBreadcrumb Navigation Examined: Best Practices & Examples | The Apple Tech Blog