CSS Reset

[Stomme poes]

It feels very, very, very wrong to list every possible HTML element and set a reset on it.

Since I deal with graphics of sites, I DO need A reset. Most of the time it's the easy one:

* {
  margin: 0;
  padding: 0;
}

img, fieldset {
  border: 0;
}

ul, li {
  list-style: none;
}

Since I've begun using my fieldsets more, I don't have fieldset border set to none anymore. If the page has a lot of actually bulletted lists, instead of menus, I don't have the last delcaration either.

If there are a lot of forms (something other than username/password, or search) then I modify the padding. I hate doing it, but somewhere there's some magical problem with padding and forms-- I've never heard explicitly what the problem actually is, just "something to do with accessibility" that I can't find with JAWS, so in this case, one the site with the 100 forms:

* {
  margin: 0;
}
html, body, div, span, a, p, any other elements used ON THAT PAGE/SITE only, form, fieldset, legend, label {
  padding: 0;
}

Meaning it's different per page, since I will not list elements who are not in use in my reset. I still remove padding etc from form elements, just not the inputs, which is apparently where the problem is. Since the inputs are inline, I'm 99% sure that the "accessibility" problem has nothing to do with margins, but only padding. So I can still zero my margins.

I like the control of setting margins and padding where I need them, and know that wherever I say nothing, the amount there is ZERO. This is so incredibly useful, especially when stlying lists-- you just can't beat that "IE uses margin and FF uses padding" (or is it the other way around?) with CSS. You need to start at zero, or lose your bullets or images or whatever--choose which browser will look like garbage. That's not a choice I will make.

I know some people would think it's a good idea to have a slightly bloated CSS reset sitting somewhere, and letting every page reference to it. But it seems much easier to me to just taylor the code to the page-- I'd rather have each page or site optimised rather than use bloat to make things flexible or easier for the developer. Why make the client download all that garbage if it's not needed?

My two eurocents : )

[PicnicTutorials]

You are a good coder and know your stuff. I have been looking at your site. Keep up the good work. Lets put our minds together and come up with an even better reset.css. I see from yours and mine combined that we could complete the missing pieces

Thanks, but I'll be the first the first to admit, I still have a lot to learn!

Also, I would omit your stylesheet from using outline: 0;

.inline, .floatleft, .floatright I would get rid of.

Morning,

Well as long as you give a :focus style then outline: 0; is fine. Ya I don't really use those classes. Those are more or less for the people out there that like using classes for things - just good ones to have in your pocket. I usually target all my elements like this

#home #content h2 {
yada: yada;
}

But you know what I saw in yours that I like? It's this one!

br, .br {
clear: both;
display: block;
overflow: hidden;
zoom: 1;
height: 0;
line-height: 0;
font-size: 0;
text-indent: -9999em;
}

As a clearing method I really like it! But whats the -9999em for? And why the zoom? I know what it does - but is it necessary? And it can also be trimmed. You'd only be using the <br> for that - so you can do away with the class of .br. But I like it. No one uses the <br> anymore so it's perfect for this. Plus there's no closing tag with in the html. So essentially you just have to put a <br> as a clear. Verses <div class="clear></div>. I don't know - this might give <br> an actual use again. So I'd do it like this!

The CSS
br {
clear: both;
display: block;
overflow: hidden;
height: 0;
line-height: 0;
font-size: 0;
}

The html
<br>

[cooper.semantics]

Actually, there has been another update.

http://meyerweb.com/eric/tools/css/reset/

But personally, I just remove the margin, padding and border from each element, and that's it for me.

This reset looks exactly like his resetting again 'reset'.

nukeemusn - Overkill if you build less than 10 page sites :-D

ewwatson - Yes I do agree, the br needs some fine tunning. I think the .br class is unnecessary hehe

I do agree with your standpoint.

br {
clear: both;
display: block;
overflow: hidden;
height: 0;
line-height: 0;
font-size: 0;
}

This reset.css is a little outdated - that's why I have you guys brainstorming with me

[PicnicTutorials]

Just a thought? Isn't only nessesary in a css reset to remove margin and padding on block level elements? If that's the case, then Eric Meyer's resets can and should be trimmed.

Also, one of the reasons most people don't just say *{margin:0;padding:0;} is becuase it's heavy on browser resources to have to constantly be removing everything from every element. So, from what I've read, the consencious is that it's better to just reset element by element.

Just my 2 cents.

[cooper.semantics]

It feels very, very, very wrong to list every possible HTML element and set a reset on it.

Since I deal with graphics of sites, I DO need A reset. Most of the time it's the easy one:

* {
  margin: 0;
  padding: 0;
}

img, fieldset {
  border: 0;
}

ul, li {
  list-style: none;
}

Since I've begun using my fieldsets more, I don't have fieldset border set to none anymore. If the page has a lot of actually bulletted lists, instead of menus, I don't have the last delcaration either.

If there are a lot of forms (something other than username/password, or search) then I modify the padding. I hate doing it, but somewhere there's some magical problem with padding and forms-- I've never heard explicitly what the problem actually is, just "something to do with accessibility" that I can't find with JAWS, so in this case, one the site with the 100 forms:

* {
  margin: 0;
}
html, body, div, span, a, p, any other elements used ON THAT PAGE/SITE only, form, fieldset, legend, label {
  padding: 0;
}

Meaning it's different per page, since I will not list elements who are not in use in my reset. I still remove padding etc from form elements, just not the inputs, which is apparently where the problem is. Since the inputs are inline, I'm 99% sure that the "accessibility" problem has nothing to do with margins, but only padding. So I can still zero my margins.

I like the control of setting margins and padding where I need them, and know that wherever I say nothing, the amount there is ZERO. This is so incredibly useful, especially when stlying lists-- you just can't beat that "IE uses margin and FF uses padding" (or is it the other way around?) with CSS. You need to start at zero, or lose your bullets or images or whatever--choose which browser will look like garbage. That's not a choice I will make.

I know some people would think it's a good idea to have a slightly bloated CSS reset sitting somewhere, and letting every page reference to it. But it seems much easier to me to just taylor the code to the page-- I'd rather have each page or site optimised rather than use bloat to make things flexible or easier for the developer. Why make the client download all that garbage if it's not needed?

My two eurocents : )

I agree with your viewpoints. I think a reset.css depends on exactly how big of a project your on at the time. For a smaller project you could get away with bare minimal styles. With a larger project a bulkier reset.css becomes the case.

Think of it like this: 50 page site.
It would be a pain building/debugging if your reinventing the wheel for pretty much every 5 pages :-D

[Bob Carologees]

If you are re-inventing the wheel on every page it probably indicates an implementation flaw. As long as your stylesheets are well organised and encapsulated, you simply don't need bloated default styles on every page.

[cooper.semantics]

If you are re-inventing the wheel on every page it probably indicates an implementation flaw. As long as your stylesheets are well organised and encapsulated, you simply don't need bloated default styles on every page.

Exactly, that is why there is a reset.css

What I like to do is:
If there are 10 pages tied to the about section I will have an about_common.css.

This will set common styles for the about section.

[cooper.semantics]

Just a thought? Isn't only nessesary in a css reset to remove margin and padding on block level elements? If that's the case, then Eric Meyer's resets can and should be trimmed.

Also, one of the reasons most people don't just say *{margin:0;padding:0;} is becuase it's heavy on browser resources to have to constantly be removing everything from every element. So, from what I've read, the consencious is that it's better to just reset element by element.

Just my 2 cents.

Very True!

[Bob Carologees]

What I like to do is:
If there are 10 pages tied to the about section I will have an about_common.css.

This will set common styles for the about section.

That is what I'm getting at. Modularisation is far better (imo) than huge catch-all style sheets. It's more extensible, adaptable and convenient for debugging purposes as you can immediately isolate certain components.

[Paul O'B]

I would leave certain form elements alone from your reset techniques as if you change borders or padding you can kill their default look and behaviour straight away. This was cited as the main reason for moving away from *{margin:0;padding:0} and moving to a more spohisticated set of reset rules.

I wrote an article years ago which explain what happens to form elements when you start removing padding etc and was about the same time that the reset techniques started popping up. Once the behaviour is removed (such as the depress effect of submit buttons when padding is removed in mozilla) the behaviour can't be re-instated.

I use a smaller version of Eric Meyer's reset but I don''t see the usefulness of removing bold from headings and other elements that everyone expects to be bold as i have to spend my time re-applying bold to them all again which creates more work than if I had to remove it when needed.

I wouldn't use a break as a clearer because there are better methods available such as the clearfix method or the "overflow" method.

I think reset stylesheets are a good idea especially for beginners that don't realise that they should be in control. However, I do find that 50&#37; of the reset is redundant on a day to day basis and I'm coding different sites every day.

However, snippets of code are always useful and if you build a reliable code base that you can cut and paste from project to project then that's a good thing

[WoodiE55]

This is my CSS Reset code I put at the top of my CSS sheet. While not as detailed as other style sheets it covers the majority of the tags without being bloated.

/* --[ CSS Reset ]------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,p,
blockquote,th,td {margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:”; }
abbr,acronym { border:0; }

[cooper.semantics]

I would leave certain form elements alone from your reset techniques as if you change borders or padding you can kill their default look and behaviour straight away. This was cited as the main reason for moving away from *{margin:0;padding:0} and moving to a more spohisticated set of reset rules.

I wrote an article years ago which explain what happens to form elements when you start removing padding etc and was about the same time that the reset techniques started popping up. Once the behaviour is removed (such as the depress effect of submit buttons when padding is removed in mozilla) the behaviour can't be re-instated.

I use a smaller version of Eric Meyer's reset but I don''t see the usefulness of removing bold from headings and other elements that everyone expects to be bold as i have to spend my time re-applying bold to them all again which creates more work than if I had to remove it when needed.

I wouldn't use a break as a clearer because there are better methods available such as the clearfix method or the "overflow" method.

I think reset stylesheets are a good idea especially for beginners that don't realise that they should be in control. However, I do find that 50% of the reset is redundant on a day to day basis and I'm coding different sites every day.

However, snippets of code are always useful and if you build a reliable code base that you can cut and paste from project to project then that's a good thing

Yeah I agree. Headers should prob. be left with there default font-weight.
For clearing I personally think that the clearfix is probably the best I have seen so far. The float to float method is not fun debugging

Also, overflow fixes are not that fun either because you never know when you are going to have an overlay pop-up via JScript. It clips anything outside it's walls.

I saw your reset and think its a cleaner version of Eric Meyers. Its minimal and gets the job done

[rabbitsfeat]

Personally I agree with the people using the universal selector for things like margin and padding.

I don't see why some have a whacking great list of tags for this? Surely:

* {
   margin: 0;
   padding: 0;
   }

is much less cluttered!

[PicnicTutorials]

Personally I agree with the people using the universal selector for things like margin and padding.

I don't see why some have a whacking great list of tags for this? Surely:

* {
   margin: 0;
   padding: 0;
   }

is much less cluttered!

Hello,

Both Paul and I answered "why" above!

[peach]

This is my bunch of reset rules that I use with nearl every design;

* {margin:0;padding:0;font-size:100%;}
img {border:none;}
#content p,#content ul {margin:0.8em 0;}
#content ul,#content ol {margin-left:20px;}
#content ul li {list-style-type:disc;}
ul.menu li.leaf,
ul.menu li.expanded,
ul.menu li.collapsed {
list-style-image:none;
}
ul.links {margin-left:0;padding-left:0;}
a {color:#444;}
a:hover {text-decoration:none;}
h1,h2,h3,h4,h5,h6 {line-height:1.4em;}
body,html {width:100%;}

The classnames are for content of a CMS.
these style rules are often followed by a bunch of font-size declarations, but they depend on the design so I wouldnt call those reset styles.

[cob]

If I were to use a reset css style sheet I would have to pick Eric Meyer's.
http://meyerweb.com/eric/thoughts/20...eset-reloaded/

that's the one I use.

[cooper.semantics]

This is my bunch of reset rules that I use with nearl every design;

* {margin:0;padding:0;font-size:100%;}
img {border:none;}
#content p,#content ul {margin:0.8em 0;}
#content ul,#content ol {margin-left:20px;}
#content ul li {list-style-type:disc;}
ul.menu li.leaf,
ul.menu li.expanded,
ul.menu li.collapsed {
list-style-image:none;
}
ul.links {margin-left:0;padding-left:0;}
a {color:#444;}
a:hover {text-decoration:none;}
h1,h2,h3,h4,h5,h6 {line-height:1.4em;}
body,html {width:100%;}

The classnames are for content of a CMS.
these style rules are often followed by a bunch of font-size declarations, but they depend on the design so I wouldnt call those reset styles.

Put these styles in your reset. I find that adding the list-style-position of inside cross browses pretty nicely.

#content ul { list-style: inside disc; }
#content ol { list-style: inside decimal; }

You can remove #content ul li {list-style-type:disc;} b/c it will be no longer necessary.

[cooper.semantics]

that's the one I use.

If you are going with Meyer's reset I would upgrade to his latest version.

[cooper.semantics]

Personally I agree with the people using the universal selector for things like margin and padding.

I don't see why some have a whacking great list of tags for this? Surely:

* {
   margin: 0;
   padding: 0;
   }

is much less cluttered!

Think about what you are doing. I am guilty myself of zeroing out all elements!
Say you have a paragraph and its now set to zero - You will have to define paragraphs for the rest of your site. Your probably thinking well I can define a paragraph in the reset also but, even so you could also define other tag elements. So that just proves that using a wild card to zero out all elements is useless. You will learn a lot of new things from this thread. I have!!!!

[markbrown4]

It's still a work in progress, but I'm pretty happy with mine! Although after looking over Eric's resets I may add a thing or two to it. But his are a little overkill for my taste as well. Also, primarily because of all of our long discussion on relative font sizes, I'll probably end up changing my 62.5% on the body (because of the associated nesting issues) to 81.25% and therefore the typography section will change a little bit also. I'll give it a trial run on my next project.

I tend to avoid any classes for singular styles like your 'floatleft' and 'marginbottom'.

If there's little or no forms in the page I stick with the humble
* { margin: 0; padding: 0 }
body { font-size: 100% }
as a starting point..

[Stormrider]

Think about what you are doing. I am guilty myself of zeroing out all elements!
Say you have a paragraph and its now set to zero - You will have to define paragraphs for the rest of your site. Your probably thinking well I can define a paragraph in the reset also but, even so you could also define other tag elements. So that just proves that using a wild card to zero out all elements is useless. You will learn a lot of new things from this thread. I have!!!!

Yes, but you can reset all properties of all elements with *, and you don't have to set them all back with a separate p, so using * is useful.

[Dan Schulz]

Well, since we're all showing off our own CSS resets, I might as well post mine, and explain the reasoning behind it...

/* CSS RESET RULES */
html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, cite, code,
col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img,
ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub,
sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
 
body {
	background: #FFF;
	color: #000;
	font: 85%/1.5 verdana, arial, helvetica, sans-serif;
}
 
code, pre {
	white-space: pre;
}
 
del {
	text-decoration: line-through;						/* it's deleted text - show it as such */
}
 
dfn {
	font-style: italic;
	font-weight: bold;
}
 
em {
	font-style: italic;
}
 
fieldset {
	border: 0;
	display: inline;
}
 
h1, h2, h3, h4, h5, h6 {
	font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif;
}
 
img {
	border: 0;
	vertical-align: bottom;
}
 
ins {
	text-decoration: none;
}
 
strong {
	font-weight: bold;
}
 
tt {
	display: block;
	margin: 0.5em 0;
	padding: 0.5em 1em;
}
 
.skip {
	position: absolute;
	left: -999em;
}

Let's start from the top, shall we?

html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, cite, code,
col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img,
ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub,
sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

Yes, I'm removing the margins and padding from a vast majority of the elements I use in a Web page. I never use a Transitional DOCTYPE (or the code that is valid when using one), so I don't "reset" deprecated (read: obsolete) elements. The vertical alignment in the reset isn't really necessary, but it's nice to keep everything on the same page. As Paul previously noted, form inputs are not included here, since they can cause major issues in Gecko based browsers (and others for that matter).

body {
	background: #FFF;
	color: #000;
	font: 85%/1.5 verdana, arial, helvetica, sans-serif;
}

Here's where I set the default background color, text color, font size, leading (line-height), and fonts. Unlike many people though, I don't over-ride this later on. If I need a dark background color, I'll just declare it here instead. So for those who are thinking of using this as a template, remember that the white and black background and text colors are just placeholders.

Since this stylesheet is meant to be used by traditional browsers on a desktop (or laptop) rather than print, I went with a family of sans-serif fonts that are available just about anywhere. Yes, I can use fonts like Lucida Grande or Tahoma, but the kerning of those fonts tends to make it rather difficult for peopel to read. Granted, Verdana isn't that great at larger sizes anyway, which brings me to my next point. I set the body's font size to be 85% of whatever the browser's declared font size is. For Gecko based browsers like Firefox, this will usually be 16px. While the user can change the font size, they'll have to do so from within the browser. Other browsers such as Internet Explorer and Opera actually respect the system metric, so if you set your font size in the operating system to 18px, the browsers will (likely) use 18px as the default font size. Safari just has to go do its own thing and will set the default at 14px - even on Windows (methinks Apple just has to be different, but then again, they were always a print-oriented company). The leading, or line-height was set to 1.5 (or one and a half times the font size (yes, I realize I'm being far too "general" here, but I'm trying to avoid the technical details since I don't know who will be reading this in the future).

Something you may not know about computers (though since this is SitePoint I'm sure many - if not most - of you do) is the ability to resize the text from within the OS by adjusting its DPI settings (dots per inch). This isn't the "font size" settings, but the actual RESOLUTION of the monitor. On Windows operating systems, "normal fonts" will be 96 .dpi while "large fonts" will be at 120 .dpi - Linux users will need to confirm or deny this, but I'm sure the equivilent for them is 75/100 respectively. As for Macs, well, see my previous comments about Apple (combined with my lack of recent experience with them - I last used one about a decade ago for print design work, and even then I only had "user rights").

Another thing - don't get fooled into thinking that 62.5% = 10px because it doesn't. (The post I linked to will tell you why.) The best you can do is to make sure that the fonts you use are readable on as wide a variety of machines and settings as possible; remember, someone will always have a larger font size declared or may be running "large fonts" (100 or 120 .dpi depending on OS) at 1600x1200; the latter group may not really appreciate those 50px tall (or larger) H2 headings.

code, pre {
	white-space: pre;
}
 
del {
	text-decoration: line-through;						/* it's deleted text - show it as such */
}
 
dfn {
	font-style: italic;
	font-weight: bold;
}
 
em {
	font-style: italic;
}

Those who are familiar with Eric Meyer's reset.css will recognize this - hey, f it ain't broke, don't fix it, right? Isn't it equally pointless to try and reinvent the wheel? At least we can get all the modern browsers on the same page though, and that's what matters.

fieldset {
	border: 0;
	display: inline;
}
 
h1, h2, h3, h4, h5, h6 {
	font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif;
}
 
img {
	border: 0;
	vertical-align: bottom;
}

Yes, I actually remove the borders from my fieldsets. I use a DIV just outside of them (which are given a class of "fieldset" so I know for certain what they are) for styling purposes. When I float the fieldset DIVs (like when I'm making a search box inline with a horizontal CSS menu) the "display: inline;" gets around an Internet Explorer bug (or twenty ), so it's nice to have, even if I won't be needing it. This especially comes in handy when coding WordPress Themes.

Unlike many people, I actually set the base font size of my headings to 1em (or 100% of whatever the main body text is set to - which in my stylesheets is 85% of whatever the user has it set to). I'll also set the font weight to bold (I prefer to let the browser decide what weight "bold" actually is to reduce the code needed). From there, I'll set the font sizes for individual size headings as-needed. Yes, it's more code, but it's a chance for me to "guide" how large certain headings should be.

As for the images, the two properties and values that are declared are done so with the intention of squashing bugs. I don't like them, and I'm sure you don't either. The first one ironically isn't for Internet Explorer, but Gecko-based browsers like Firefox. When an image is inside an anchor element (you know, a link) Firefox and other Gecko based browsers will tend to put a border around it. This removes it. The other one is designed to push the image to the bottom of the baseline, which "covers up" the ugly "bottom border" many people complain about in Internet Explorer. No hacks, no fuss, no problem!

ins {
	text-decoration: none;
}
 
strong {
	font-weight: bold;
}
 
tt {
	display: block;
	margin: 0.5em 0;
	padding: 0.5em 1em;
}

If you're going to accuse me of stealing from Eric Meyer's head again, I'll confess - as I said before, why bother reinventing the wheel? If it ain't broke, don't fix it! Not only that, but not all browsers render certain elements the same anyway, so having a "default" that works cross-browser really comes in handy (especially among the niche browsers).

.skip {
	position: absolute;
	left: -999em;
}

Yes, I use skip links. This removes them. I would like to improve upon it and use a system like what Molly Holzschlag has on her site, but I can't find the article where she discussed it and showed how to do it. If someone can find that article for me, I'd be most thankful.

Now, with that out of the way, there are a couple things I need to say. (Wow, a rhyme.) CSS resets are only as good as the people who are using them, and only if the people using them realize that there are certain values that need to be tweaked/changed/modified/whatever. Time and again, I see people who use a reset technique, such as Eric Meyer's Reset, YUI, or some other reset, who merely throw it in a reset.css file, import it into their main stylesheet, and then over-ride it with other styles - folks, this is a recipe for DISASTER. Instead, why not just put the reset at the top of your stylesheet, add/change/remove the styles, properties and values you need/don't need, and use it as a baseline for the site? Isn't that what a reset is supposed to do anyway? Not only that, but if you modify it and then stick it into the top of the stylesheet (rather than @import-ing it) you'll notice that the page load times actually decrease, meaning that it won't take as long for the browser to fetch the stylesheet in the first place. And anything we can do to enhance the user experience should be towards the top of our priority lists anyway since it's a win-win solution.

The other thing is that a CSS reset is only as good as the HTML code that goes along with it. My reset only touches upon the baseline stuff - things like document structure, layout and positioning really don't get used since they're presentation-specific things, and I don't like my resets to cause problems with other peoples' code - especially when I'm debugging it.

So to recap, here's what I (generally) do. I start by putting the reset at the top of the stylesheet. I actually put the code there, rather than calling it through an @import. I'll then code the layout parts of the stylesheet next in a source code order (header, menu/s, content, sidebar/s, footer). Here's an example of the HTML and CSS working together (I'm only including the HTML that comes between the <body> and </body> tags.)

/* CSS RESET RULES */
html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, cite, code,
col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img,
ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub,
sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
 
body {
	background: #FFF;
	color: #000;
	font: 85%/1.5 verdana, arial, helvetica, sans-serif;
}
 
code, pre {
	white-space: pre;
}
 
del {
	text-decoration: line-through;						/* it's deleted text - show it as such */
}
 
dfn {
	font-style: italic;
	font-weight: bold;
}
 
em {
	font-style: italic;
}
 
fieldset {
	border: 0;
	display: inline;
}
 
h1, h2, h3, h4, h5, h6 {
	font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif;
}
 
img {
	border: 0;
	vertical-align: bottom;
}
 
ins {
	text-decoration: none;
}
 
strong {
	font-weight: bold;
}
 
tt {
	display: block;
	margin: 0.5em 0;
	padding: 0.5em 1em;
}
 
.skip {
	position: absolute;
	left: -999em;
}
 
/* GENERAL LAYOUT RULES */
	#container {
		background: #EEE;
		color: inherit;
		margin: 0 auto;
		min-width: 750px;
		max-width: 1150px;
	}
		#header {
			background: #165498;
			color: #FFF;
			height: 80px;
		}
 
		#search-form div {
			background: #CCC;
			color: inherit;
			float: right;
			height: 1.75em;
			line-height: 1.75em;
			position: relative;
			z-index: 1;
		}
			#search-form legend span, #search-form label {
				position: absolute;
				left: -999em;
			}
 
			#search-form input {
				margin: 0;
				vertical-align: top;
			}
 
		#menu {
			background: #CCC;
			color: inherit;
			float: left;
			height: 1.75em;
			line-height: 1.75em;
			margin: -1.75em 0 0 0;
			width: 100%;
		}
			#menu li {
				display: inline;
				white-space: nowrap;
			}
				#menu li a {
					background: #ECF;
					color: #000;
					float: left;
					height: 1.75em;
					margin: 0 2px 0 0;
					padding: 0 0.5em;
					text-decoration: none;
				}
 
				#menu li a:hover {
					background: #0E0;
					color: inherit;
				}
 
		#content {
			float: left;
			width: 100%;
		}
			#content .wrapper {
				background: #FFF;
				color: #000;
				margin: 0 220px 0 0;
				overflow: hidden;	/* contains the floats within */
				padding: 1em;
			}
				#content .wrapper p {
					margin: 0.5em 0;
				}
 
		#sidebar {
			float: left;
			margin: 0 0 0 -220px;
			width: 220px;
		}
			#sidebar p {
				padding: 0 10px;
			}
 
		#footer {
			background: #FF8;
			clear: left;
			color: #000;
			height: 1%;	/* hasLayout fix */
		}
			#footer em {
				display: block;
				font-style: normal;
				padding: 0.5em 0 0.5em 1em;
			}

<div id="container">
	<div id="header">
		<img src="#" width="200" height="80" alt="Web Site TItle" title="">
	</div>
	<form action="#" id="search-form" method="get">
		<div class="fieldset">
			<fieldset>
				<legend><span>Search This Site</span></legend>
				<label for="search">Enter Your Search Term Here</label>
				<input id="search" name="search" size="25" type="text">
				<input class="submit" type="submit" value="Search">
			</fieldset>
		</div>
	</form>
	<ul id="menu">
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
	</ul>
	<div id="content">
		<div class="wrapper">
			<h1>Web Page Title</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
				Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
				cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
				ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
				facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
				fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
				bibendum, est.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
				Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
				cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
				ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
				facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
				fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
				bibendum, est.
			</p>
		</div>
	</div>
	<div id="sidebar">
		<p>(Sidebar Goes Here)</p>
	</div>
	<div id="footer">
		<em>&#38;#169; 2006-2008, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</em>
	</div>
</div>

If there's anything you folks think can be done to improve upon this, just reply here. Since we're talking about CSS resets, we might as well talk about what makes them work, why they work, why they don't work and what we can do to make the best ones possible, right?

[PicnicTutorials]

Nice post Dan! I'll sit down with this later on my phone - then I can really study it word for word. Verses when I'm on the computer I get the "twitchy-finger-mouse-disease"!

[Stomme poes]

Thanks Paul for your article-- now that I know what the problem was with form elements exactly, I can leave off even more in my padding resets. Or I can keep my simple reset and make :active styles for inputs if needed.

I never use a Transitional DOCTYPE (or the code that is valid when using one), so I don't "reset" deprecated (read: obsolete) elements.

Dude, what's with the tt in your reset? isn't either kbd or code more appropriate, depending on what you're using it for? I thought tt was obsolete and not recommended. Though I learned something new -- didn't know about the dfn tag. I can already think of a few places to use it : )

[AutisticCuckoo]

Dude, what's with the tt in your reset? isn't either kbd or code more appropriate, depending on what you're using it for? I thought tt was obsolete and not recommended.

It's still valid in HTML 4.01 Strict, XHTML 1.0 Strict and XHTML 1.1. It's highly presentational, though, and should only be used to adhere to a typographic convention that dictates a monospaced font. I might use it to mark up file names in an example, as in

<p>Save the file as <tt>index.html</tt> and open it in your browser.</p>

Though I learned something new -- didn't know about the dfn tag. I can already think of a few places to use it : )

Just make sure you understand what it's for. It doesn't mean 'definition'. It's for a long-standing typographic convention, especially in technical documents, to italicise the first occurrence – or defining instance – of a term with which the reader is not expected to be familiar.

<p>Web page presentation is controlled via a <dfn>style sheet</dfn>: a set of rules for how the content should be rendered.</p>