Resetting your styles or more accurately - setting - the styles of all elements to a base value so that you avoid cross-browser differences due to their built-in and sometimes crappy (looking right at you IE6) default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser.

Laying a good foundation may be an extra step, but it will continually reward you by cutting down on the time and stress of common cross-browser inconsistencies. Everyone does this different, but here is how I like to lay it down.

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;
}
/* The :focus pseudo-class is supported in all major browsers, except the fabulous Internet
Explorer. The :focus pseudo-class adds special style to an element that has keyboard
input focus*/
a:focus {
        outline: none;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
        /*overflow: scroll; Optional - good for a page with alot of collapsing or moving elements*/
}
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: "" "";
}

SPEAK / ADD YOUR COMMENT
Comments are moderated.




Return to Top

The Ultimate CSS Reset