I’ve spent quite alot of time recently looking at best practices for designing on the web. One of those best practices, is the idea of having a CSS reset.

Because browsers have different ideas of what the default spacing, size and decoration elements should have, unstyled pages can look different on every browser. A CSS reset cleans out these defaults so that your page will look the same on all browsers. This is very handy, as it allows you to create your design without having to worry about different browsers, at least not as much as you would have to otherwise. Jacob Gube goes into more detail at Six Revisions.

Up until now I’ve been using the generic:

*  { margin: 0; padding: 0; }

to start off any project, but I’ve found that increasingly annoying to use. Also, as well as being overly generic, the * syntax is also time consuming and so increases the page load time. Not by a huge amount, but still, every little helps. The annoying part of it’s use, is that zero is a very bad default for anything to do with text, and requires a bit of working before text is nicely laid out.

This realisation has lead me to check out some of the more popular CSS reset templates. The main two that have attracted my attention are Eric Mayer’s and Yahoo! UI’s which are both very similar. Yahoo’s allow you to hot link to their file, an option which may be nice, although I would probably integrate the reset into my work a bit more than a link would allow.

Below is the CSS reset from Yahoo! UI.

Below is my take on the CSS Reset idea. It’s more styled than the previously mentioned resets because I prefer it like that, not because the others are bad in any way. I’ve also added the font-size: 62.5% trick in, so that it’s easier to layout the page using em’s. This allows for better resizing when using the default font option in IE (including 8).

body { font-size: 62.5%; /* 1em = 10px */}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
cite { font-style: italic; }
strong, em { font-weight: bold; }
ol,ul,dl {
	list-style:none;
	margin: 0 0 0 2em;
}
dd { font-style: italic; margin-left: .5em; }
caption,th { text-align:left; }
 
/*	Font Sizes */
h1 { font-size: 2.2em; }
h2 { font-size: 2.1em; }
h3 { font-size: 2.0em; }
h4 { font-size: 1.9em; }
h5 { font-size: 1.8em; }
h6 { font-size: 1.7em; }	
p,li,dd,dt,th,td,label,legend,pre,address { font-size: 1.6em; }
p>label,p>address { font-size: 1em; }
 
h1,h2,h3,h4,h5,h6 {
	font-weight:bold;
}
h1,h2,h3,h4,h5,h6,p,table,label {
	padding: .5em;
}
th, td { padding: .5em; }
p, li { line-height: 1.7em; }
q:before,q:after { content:''; }
abbr,acronym { border-bottom:1px dashed black; }