CSS Resets

When designing XHTML and CSS it is important to be cognoscente of the fact that every browser will interpret your code a little bit differently. This mostly has to do with the default styling, padding, and margin of different elements as determined by a particular browser. While your page may look generally the same in all browsers, if you look closely, there is a good chance that you can catch the minor differences in presentation. Most of the time it is readily evident if you develop a site in one browser (Firefox) and then proof it in another (IE). The margin and padding of commonly used tags such as <h1> and <p> will most likely be slightly different, resulting in minor presentation deviations that drive us crazy. So what’s the simplest solution?

Introducing: The CSS Reset

The concept behind a CSS reset is to have a standard set of code that you can declare at the beginning of a stylesheet that intentionally eliminates those minor browser differences. After the reset declaration, you may style the various elements of your stylesheet as you usually do. There are numerous iterations on the subject that we could debate ad infinitum. So, I will simply show you the one that works for me.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* Zero Out */
 
h1, h2, h3, h4, h5, h6, ul, ol, li, em, strong, pre, code, blockquote, form, img {
	padding: 0;
	margin: 0;
        border: 0;
        outline: 0;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	font-family: inherit;
}
table {
	border-collapse: separate;
	border-spacing: 0;
	font-size: inherit;
}
img a {
	border: 0px;
	background: none;	
}
p {
	margin: 1em 0px;
}

Notes

Keep in mind, this is what works for me. Everyone writes CSS differently so the possibilities are endless here. You have the potential to get very detailed with the CSS reset technique and reset everything. This can erase a lot of default styles that you’ve gotten used to using and expect to just magically be there. I have intentionally eliminated many tags and selectors that I virtually never use. I don’t see a point in including them in my generic reset code. If you find yourself using a particular set of tags more often then I do, by all means add them to your reset code. I tend to style tags such as <body> and <a> very differently from site to site so I do not include them in the reset.

The key here is to experiment. Develop a CSS reset tailored to your coding tendencies and the features the site demands. It will make ironing out the “why does my site look different in…?” issues down the road much easier.

| More
  

Post a Comment

Allowed Tags »
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">