Web development, coding & SEO


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.

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. Sample of default CSS.

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

Third, heavyweight approach by Erik Meyers, has some drawbacks.

//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}

2008.