CSS Reset

In this article we are going to scratch the surface of CSS Reset and introduce to a basic version and amore complex version which I use.

 

Firstly I will explain what a CSS Reset is, it is basically used to create a baseline for certain element styles so that they remain consistent across different browsers.

The first CSS Reset I used was:

* { margin:0; padding:0; }

This was ok, but it caused a with problems with form elements which didn’t like it and refused to be reset. So I went in search of a more advanced CSS Reset and I found Eric Meyer’s Reset which I am using to this day.

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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

I recommend reading this article from smashing magazine which includes many more CSS Reset’s and information about CSS Frameworks.

One Comment to “CSS Reset”

#1 Posted by Wrinkle Reviews (12.06.09 at 20:09 )

wow!! thanks…