Coding Dojo Show me the Code!

Resetting your CSS Styles

All HTML elements are treated differently among browsers and have default predetermined CSS styling applied to them. These predefined styles are among the most common culprits when it comes to cross browser styling issues.

So it's a very practical and recommended practice to reset these styles to prevent obscure quirks to appear in our designs. Applying this technique will remove and neutralize the inconsistent default styling among A-grade Browsers providing a solid foundation on which to create great web designs.

When it comes to resetting your CSS styles I've come across things of this nature:

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

I don't recommend using this technique it's to aggressive and breaks many default properties on some HTML elements.

The technique I use to reset my CSS styles is based on the Eric's Meyer technique which he also based from YUI's reset.css.

So enough said lets dive into the code:

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,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}

It's almost a copy of the same rules used by Eric but with 2 small changes, I removed the property of font-size:100% which I find conflicts with the default behavior when using the Header HTML tags ( <h1> ..<h6>) and also removed the styling rules for block quotes which I have found doesn't work quite right with multilingual website designs.

Enjoy.