Reset CSS Styles

Reset CSS styles.

First approach

First approach - do nothing. Just default html/xhtml. KISS. But, different browsers will display the page differently. Not any approach for fine pixel-split design pages.

But bitchy design pages love absolute units and floating and no browser defaults...

Second approach

Second approach - kill everything. As browsers tend to interpret defaults and properties differently, set everything by zeroes and declare all needed properties anew. Default styles, global styles and individual ones.

*{
	margin:0;
	padding:0;
}
img{
	border:none;
}

Third, Erik Meyers

Third, the heavyweight approach by Erik Meyers has some drawbacks, like throttling the site performance and being a total overkill. Well, we understand this approach was relevant many yearsat ago. But whoever uses it today... illiteracy.

//Lightweight default CSS setup to simplify CSS development.
/*******************************************************
* Reset CSS styles (Thanks to Erik Meyers)
*******************************************************/
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: 1em;
vertical-align: baseline;
background: transparent;
text-decoration: none;
}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

/*******************************************************
* Font Setup
*******************************************************/
body { line-height: 1; font-size: 100.01%; font-family: sans-serif; }

/*******************************************************
* Basic content styling (Thanks to Davil from Tripoli)
*******************************************************/
*{font-size:1em;line-height:1.6em}
h1{font-size:1.6em;line-height:1}
h2{font-size:1.5em;line-height:1}
h3{font-size:1.4em;line-height:1}
h4{font-size:1.3em;line-height:1}
h5{font-size:1.2em;line-height:1}
h6{font-size:1em;line-height:1}
hr{display:block;background:#aaa;color:#aaa;width:100%;height:1px;border:none}
ul{list-style:disc outside}
ol{list-style:decimal outside}
table{border-top:1px solid #ccc;border-left:1px solid #ccc;border-collapse:collapse}
th,td{border-bottom:1px solid #ddd;border-right:1px solid #ccc}
hr,p,ul,ol,dl,pre,blockquote,address,table,form{margin-bottom:1.6em}
p+p{margin-top:-.8em}
h1{margin:1em 0 .5em}
h2{margin:1.07em 0 .535em}
h3{margin:1.14em 0 .57em}
h4{margin:1.23em 0 .615em}
h5{margin:1.33em 0 .67em}
h6{margin:1.6em 0 .8em}
th,td{padding:.8em}
caption{padding-bottom:.8em}
blockquote{padding:0 1em;margin:1.6em 0}
fieldset{padding:1.6em;margin:1.6em 0}
legend{padding-left:.8em;padding-right:.8em;}
legend+*{margin-top:-.4em;}
textarea,input{padding:.3em .4em .15em .4em}
select{padding:.1em .2em 0 .2em}
select[multiple]{margin-bottom:.8em;}
option{padding:0 .4em .1em}
button{padding:0.3em 0.5em}
input[type='radio']{position:relative;bottom:-.3em;}
dt{margin-top:.8em;margin-bottom:.4em}
ul,ol{margin-left:2.2em}
ul ul,ol ul,ul ol,ol ol{margin-bottom:0}
form div{padding-bottom:.8em}

Fourth approach to reset CSS styles

As universal selectors *{…} decrease the site performance it would be smarter, and not complicated at all, to reset the type selectors like A, LI, P, etc. individually. Something in these lines -

body{
	color:#333;
	font-family:arial,sans-serif;
	font-size:14px;
	line-height:1.3em;
	margin:0;
	padding:0;
}
p{
	margin:0;
}

Writing efficient CSS - Guidelines for optimizing CSS code, and more specifically how to write efficient selectors.

Sample of default CSS.

2008, 2012