CSS Reset

A CSS Reset style sheet is a list of rules that 'reset' all of the default browser styles.

We reset the browser styles for two primary reasons:

Not all browsers apply the same default rules. They may be similar, but not exact. It can be difficult to provide the same designs in each browser if the basic styles are different.
Once you start designing and coding all of the fine details of your site, you may discover that a lot of what you are doing is simply overriding default browser styles. The reset does this quickly so that you don't have to.

The Meyer's Reset Code

There are lots of different CSS Resets that we can use for our sites. You could even create your own. One of the two resets we'll use in this class is the Eric Meyer's Reset, created by CSS guru Eric Meyer.

Here's the code in the Meyer's Reset:

reset.css

Including the Reset Stylesheet

We can include the reset style sheet using several different methods.

External Style Sheet

We can use the reset style sheet as an external style sheet just like we do with our normal styles. Just make sure to add it first, since order matters.

<head>
  <meta charset="utf-8"/>

  <title>HTML Page for Testing CSS</title>

  <link rel="stylesheet" href="reset.css" media="screen" />
  <link rel="stylesheet" href="styles.css" media="screen" />
</head>

Remember, the CSS Reset style sheet should always go first.

Copy and Paste Into Our Own Style Sheet

You can also simply copy all of the rules from the reset style sheet and paste them into your own. Make sure that you put them at the top so that they don't override any of your rules.

If you use this method, be sure to clearly mark the reset section of the style sheet and give credit to the author using CSS comments. While the author has made this style sheet available for everyone to use, this isn't your work, so don't pretend like it is.

If you used this method, your CSS would look something like this:

styles.css

The Reset in Action

Remember that page of all of the sample HTML code that we marked up with CSS?

HTML Test Page

Right now the page is using the default browser styles, because we didn't define any other styles.

After we apply the CSS reset style sheet, here's what the page looks like.

HTML Test Page with Reset

This give us a clean slate to work with. Things to note:

All type sizes are set to the same size
All margins and padding are set to zero
Lists no longer display bullets or numbers by default
<em> no longer displays as italic text and <strong> no longer displays as bold text

The Why

This seems like a lot of work. Why would you want to do this?

Two reasons:

This will save you a lot time and frustration when you are creating complicated layouts with CSS.
You're the designer. You shouldn't let the browser makers decide how any part of your web pages will look.

Normalize Style Sheet

If the Meyer's reset seems a bit too much, there is a newer version which takes a slightly different approach: normalize.css. Instead of trying to eliminate the default browser styles, the normalize.css instead tries to normalize them to standard values across browsers. This removes some of the downsides of the Meyer's reset. It is also a newer and actively developed stylesheet, so it includes more modern HTML elements.

normalize.css

normalize.css in Action

Back to Week 4 page »