Reset CSS: A simple solution to browsers’ inconsistencies.

One of the challenges web designers face is to get various web browsers render their web pages in a consistent manner. The reason is every browser assigns slightly different default styles to certain page elements.


A simple approach to handle this cross-browser inconsistency is to overwrite browsers’ default styles. This technique is known as resetting CSS. To me it is more like setting a starting point for your web page being rendered by various browser. By setting (or resetting) the base styles you start with a consistent base for each browser.
Now the question is how to reset browser’s default style. Eric Meyer created the following style sheet to reset browsers’ default CSS style.


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: "" "";
}

Many web developers considered this as the standard reset style sheet. Save this CSS as reset.css and include this file in your header file (or header section of every web page). Make sure that this style sheet comes before your other style sheets otherwise it will overwrite your styles.