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:
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:
We can include the reset style sheet using several different methods.
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.
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:
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:
<em>no longer displays as italic text and
<strong>no longer displays as bold text
This seems like a lot of work. Why would you want to do this?