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:

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:

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:

The Reset in Action

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

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.

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

The Why

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

Two reasons:

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 in Action