CSSBefore you start building a new site, one important decision you need to make is whether or not you want certain elements of your design to rely on the default settings of your user’s browser. The problem with this is that not all browsers use the same default settings. A perfect example is with the header tags. The default font size for the h1 tag in IE is 24px, while most other browsers set it at 32px. The margins can range anywhere from about 14px to 20px. That’s a big difference that can throw your design off quite a bit.

The way to get around this is to use a CSS reset. A CSS reset does exactly what it states, it resets your CSS so that you can then style your elements exactly how you want, without having to worry about any default settings screwing things up.

If you do a quick Google search for CSS reset, the first result will be Eric Meyer’s Reset CSS Tool. This is the one that I like to use. All you need to do is add this to the top of your style sheet.

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: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

The one thing you need to remember when using a CSS reset, is that it resets everything. So now your paragraph tags won’t have any margins, nor will your unordered lists and so on. That means you need to start setting some styles for these elements.

Here is what I like to add immediately after the reset to get things started.

h1, h2, h3, h4, h5, h6, p { margin: 12px 0; }
ul, ol { padding: 0 0 0 20px; list-style: disc; }
ol { list-style: decimal; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }

That sets up most of the common tags that I use. Some things might look strange as you start to put together your site, so just remember that now you need to set all the default CSS for any element you use.

Another popular reset is YUI Reset CSS by Yahoo. It does things a little bit differently. Take a look at the YUI homepage to see some examples of how it is used and you may decide that this reset is the right one for you.

The reset I have seen used the most on other people’s sites is the Global Reset. I don’t like to use it because it pretty much just resets the margin and padding for every element but that might be all you really want.

* { margin: 0; padding: 0; }

Whichever reset you choose is totally up to you, but you should consider including a reset as your starting point when creating the stylesheet for your site to guarantee your design looks the way you intended it to across all browsers.