Archive for July, 2010

CSS Reset

Tuesday, July 20th, 2010

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. In a nutshell, a CSS reset removes default styling from page elements so that you are “starting fresh” with the attributes you choose to apply. This is important for two reasons. One, puts all browsers on a level playing field. Different browsers apply different default styling to elements, so if you are looking to have your website look the same in all the different browsers, a CSS reset is important. Two, it allows you to “think forwards” as far as applying attributes like margin and padding to page elements. Instead of having to “think backwords” in removing attributes from elements, you can only apply them to elements you know need them.

If you want to learn more about the CSS resets, Perishable Press has a pretty nice round up a lot of different ones. I’m going to leave the poll up for a few more days in case anyone else wants to weight in. Those of you that voted “custom”, care to share? For the next poll, I’m gonna try and figure out a way to get voting right inside the post so maybe it’ll work through the feed.

Here is a sample of my css reset

/************************************************
*    CSS Reset                                  *
*    http://meyerweb.com/eric/tools/css/reset/  *
************************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,  tfoot, thead {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
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;
}
.clear {
	clear:both;
}