How To Use a CSS Reset

What is a CSS Reset?

A CSS Reset is a chunk of CSS code which defines baseline styles for some (or all) HTML elements. There are a plethora of CSS Reset stylesheets out there, and it’s easy to write your own.

Why use a CSS Reset?

Different browsers use varied default style settings, and these differences can screw up your layout! Resetting these styles to one base evens out the differences, meaning fewer cross-browser issues when designing a website.
And in the end, there is little to lose. A very basic CSS Reset takes up little space and can be easily over-written if it presents any problems.

How To Use a CSS Reset:

  • Either write your own or copy-paste a free version into the top of your style.css.
  • Alternately, you can save the CSS Reset in a different file, (reset.css), and then call it at the top of your style.css.

My Experiences:

Too Little!

I began my earlier (hand-coded) website design began with a “standard reset”, but then I switched to WordPress and created a child-theme to give my site a make-over. I had assumed the parent theme included a CSS reset, but it doesn’t! To add a reset I would have to edit the parent theme directly, and re-edit it each time the parent is updated.

Too Much!

I recently tried out the “Shape” theme as a WP theme development framework, and it includes a large and thorough CSS Reset, as well as a separate CSS Rebuild stylesheet. Designing without any worries about browser-specific style defaults was great, but the Reset/Rebuild felt rather bulky. I found that by the end of my design, I had overwritten most of the reset and rebuilt CSS values, meaning the elements had values reassigned 2 or 3 times. In my humble opinion, that is too much extra code.

Just Right: My current CSS Reset

There are a plethora of CSS reset stylesheets to choose from, and it’s also easy to write your own. After reviewing the most popular versions, I made my own hybrid CSS Reset. It does 4 things:

    1. Eliminate extra margin and padding.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, 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;
}
    1. Standardize font sizes with % measurements.
p{font-size:100%;}
h1{font-size:160%;}
h2{font-size:150%;}
h3{font-size:140%;}
h4{font-size:120%;}
    1. Set HTML5 elements to display as blocks.
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
        display: block;
}
    1. Set the HTML5 element “del” to display in a standard way.
del {
        text-decoration: line-through;
}

Resetting padding and margins is the most basic thing that (from what I’ve seen) is always done as part of a CSS reset. Dealing with HTML5 tags is, of course, a very recent feature of some CSS resets. Other resets remove styling on lists and remove all font styles, but I don’t want to go that far in my own.
And of course, my version isn’t perfect. I’ll be testing it and making changes as needed.

Tips for using a CSS Reset:

  • Do reset the padding and margins for body and html, as well as other elements that you don’t want to style individually. Will you really want to specify the margins for h1 and p every time you write a new design?
  • If you’re in a hurry, just grab the latest version of Eric Meyer’s CSS Reset, it’s considered a standard.
  • CSS Reset is most helpful when starting a new website, don’t worry too much about adding it to finished sites.

Intrigued? Check out:

Creative Commons License
This work, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.