Up until last year I didn’t really use a CSS reset on any site I created. I would instead start by nullifying everything and then only adding in what I needed for the site to work how I wanted it to. As I have found, this was bad practice. What I used to do was this:

What I used to do

* {
	margin:0px;
	padding:0px;
}

and then add in styles for each element I was going to be using on the site. This method worked okay for what I was using it for at the time, but zeroing out every element was not the best practice (as I soon found out).

Sometime last year I set out to create my own default stylesheet that I could use as a starting point for any website. I didn’t get far as the first thing I did was search to see if anyone else had come up with a similar file and what they had included in theirs. This search got me stumbling upon Eric Mayer’s CSS Reset which I then decided I could not better and so started using it as my own default stylesheet.

But Why?

Well, the main reason I decided to use it instead of creating my own was because it is tried and tested, used by many web developers already and is a good starting point for any stylesheet. It also meant less work for me to do (i.e. creating my own), which is always nice.

So what does it do?

It does what it says really. It sets the default styles of a HTML document in a browser to whatever you want them to be so that you know each browser will be rendering these elements in the same way.

What about HTML 5?

Yes, when HTML 5 comes into use the stylesheet will have to be edited to one that includes the HTML 5 elements – but that shouldn’t be much of a hassle to do, and I will likely make a post about it once I have done that (but I probably won’t touch it until the HTML 5 specification is finalised).

And CSS 3?

CSS 3 is about the same situation as HTML 5 – it will need edited/updated, but I will do it once the version is finalised and into mainstream use.

The Stylesheet

For those who don’t want to visit Eric Mayer’s site to find the stylesheet, here it is:

Eric Mayer's CSS Reset

/* v1.0 | 20080212 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Posts You Might Also Like

• April – a Lot Going on (0)
• My University Experience (7)
• March – a Productive Month (1)
• May – Unis ended and I got a Job! (1)
• Uni Showcase + Dissertation (0)