Far too many novice CSS designers don't realize the importance of creating a "reset.css" file. When you have an environment where each browser has its own "default" styling, you'll often find yourself thumping your skull as you ask yourself, "Why is there a spacing here?" To save yourself some of the headaches that you'll undoubtedly experience, you'll need to create your own simple reset file. The problem with using one of the many currently existing frameworks is that they aren't tailored specifically to you. For example, I never use the deprecated "center" element in my projects. Consequently, I don't need to put it into my default styling. However, others may need to do so - though they would deserve a slap on the wrist...or the buttocks if you're so inclined.
Step 1: Zero Out Your Margins And Padding
By default, the browsers will add margins to many elements. For example, typically there are about six pixels of margins on the body element. As the designer, you should be the one specifying these figures! (Except maybe when it comes to font size - which is a whole other topic to be debated at length.) So let's zero out a bunch of these elements!
1 |
|
2 |
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, |
3 |
ol, li, dl, dt, dd, form, a, fieldset, input, th, td |
4 |
{
|
5 |
margin: 0; padding: 0; border: 0; outline: none; |
6 |
}
|
Step 2: Take Control Of Your Elements
You may have noticed that your elements vary in size from browser to browser. You can change this by setting the default font-size to 100%.
1 |
|
2 |
h1, h2, h3, h4, h5, h6 |
3 |
{
|
4 |
font-size: 100%; |
5 |
}
|
Next, we'll need to define the margins and padding for our heading elements. I'm also going to remove the list-style-type from my list elements. Lastly, I'll set a base font-size for the body element.
1 |
|
2 |
body
|
3 |
{
|
4 |
line-height: 1; |
5 |
font-size: 88%; |
6 |
}
|
7 |
|
8 |
h1, h2, h3, h4, h5, h6 |
9 |
{
|
10 |
font-size: 100%; |
11 |
padding: .6em 0; |
12 |
margin: 0 15px; |
13 |
}
|
14 |
|
15 |
ul, ol |
16 |
{
|
17 |
list-style: none; |
18 |
}
|
19 |
|
20 |
img
|
21 |
{
|
22 |
border: 0; |
23 |
}
|
Step 3: Expand
I typically like to include a few common classes that I use in all of my projects. You may or may not choose to use these yourself.
1 |
|
2 |
.floatLeft
|
3 |
{
|
4 |
float: left; |
5 |
padding: .5em .5em .5em 0; |
6 |
}
|
7 |
|
8 |
.floatRight
|
9 |
{
|
10 |
float: right; |
11 |
padding: .5em 0 .5em .5em; |
12 |
}
|
Here Is Our Final Simple Reset.css File.
1 |
|
2 |
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, |
3 |
li, dl, dt, dd, form, a, fieldset, input, th, td |
4 |
{
|
5 |
margin: 0; padding: 0; border: 0; outline: none; |
6 |
}
|
7 |
|
8 |
body
|
9 |
{
|
10 |
line-height: 1; |
11 |
font-size: 88% /* Decide for yourself if you want to include this. */; |
12 |
}
|
13 |
|
14 |
h1, h2, h3, h4, h5, h6 |
15 |
{
|
16 |
font-size: 100%; |
17 |
padding: .6em 0; |
18 |
margin: 0 15px; |
19 |
}
|
20 |
|
21 |
ul, ol |
22 |
{
|
23 |
list-style: none; |
24 |
}
|
25 |
|
26 |
a
|
27 |
{
|
28 |
color: black; |
29 |
text-decoration: none; |
30 |
}
|
31 |
|
32 |
a:hover |
33 |
{
|
34 |
text-decoration: underline; |
35 |
}
|
36 |
|
37 |
.floatLeft
|
38 |
{
|
39 |
float: left; |
40 |
padding: .5em .5em .5em 0; |
41 |
}
|
42 |
|
43 |
.floatRight
|
44 |
{
|
45 |
float: right; |
46 |
padding: .5em 0 .5em .5em; |
47 |
}
|
At least for me, this is all I need to get started with a new website. For your own projects, you should expand upon what I have here so that it best suits you. You should probably specify the margins on more of your commonly used elements, like the paragraph tag.
If you wish to have a 100% reset file, I recommend that you refer to Eric Meyer's popular "Reset CSS" file. Alternatively, you can check out the YUI Reset CSS. See you on Monday!
