CSS Browser Reset

A trendy topic amongst CSS’ers is the CSS reset. The idea is that you inter­cept the default browser stylesheet (that is used first in the cas­cade), reset, and then apply generic styles includ­ing margin/padding. I read many arti­cles by many gurus, but I even­tu­ally came out with what I have below.

For dif­fer­ing imple­men­ta­tions check out this great “killer col­lec­tion” of resets, and note that this won’t work in IE6 due to the uni­ver­sal selec­tor but I’m ok with that.

/*

Reset Default Browser Styles
- Place first in the listing of external style sheets for cascading.
- Be sure to explicitly set margin/padding styles.
- Styles are not reset that have to do with display (block, inline) are not reset.

By: Chris Poteet & various influences

*/

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
dt {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

2 Comments

  1. Thanks for the link, Chris! I finally got around to updat­ing my col­lec­tion with your CSS reset. Great work!

    Jeff Starr on 06.11.08
  2. Thanks Jeff!

    Chris Poteet on 06.11.08

Got Something to Say?

(Required)
(Required)