Browse: Home / , / CSS Browser Reset

CSS Browser Reset

By Chris Poteet on March 24, 2008

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;
}

Posted in , | Tagged , , , , | 13 Responses

13 responses to “CSS Browser Reset”

  1. Jeff Starr
    June 11, 2008 at 6:48 pm | | Reply

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

  2. Chris Poteet
    June 11, 2008 at 7:07 pm | | Reply

    Thanks Jeff!

  3. KRUZ-GRAPHIX » ブラウザの差異をなんとかしたいのです。
    November 25, 2008 at 3:17 pm |

    […] Chris Poteet’s Reset […]

  4. 5 Удобных CSS Reset Техник | Strelban's Blog.
    December 15, 2008 at 2:24 pm |

    […] 1. Reset CSS от Chris Poteet […]

  5. Técnicas para resetear CSS | CSSBlog ES
    March 1, 2009 at 6:20 pm |

    […] Chris Poteet’s Reset […]

  6. How to reset elements in CSS « CssFinest
    March 5, 2009 at 11:12 am |

    […] Tech­nique sug­gested by Chris Poteet […]

  7. Bermain CSS #1 | eattutsmagazine
    July 29, 2009 at 5:55 am |

    […] dl mem­pun­yai mar­gin 20px 0 , yang belum tentu semua suka oleh peruba­han ini dapat dil­i­hat disini […]

  8. » ???????CSS Reset - WEB????- ?????????????
    July 31, 2009 at 9:40 am |

    […] ???Chris Poteet’s CSS?? […]

  9. CMI Web Studio Blog » Reseting CSS Styles
    December 25, 2009 at 3:46 am |

    […] Poteet along with “var­i­ous influ­ences” cre­ated this remark­able tech­nique for reset­ting default browser styles. Chris rec­om­mends plac­ing the reset at the top of your style sheet for opti­mal cas­cad­ing results. […]

  10. CSS Reset – Anfängerkurs « stella.projects
    January 4, 2010 at 9:49 am |

    […] Ein weit­erer Reset ist Siolon’s CSS Browser Reset. […]

  11. iConnect » Técnicas para reset CSS
    January 17, 2010 at 10:37 pm |

    […] sug­erida por Chris Poteet’s para Reset […]

  12. CSS Reset: Ways and Advantages | Inspiring Pixel
    March 31, 2010 at 11:15 am |

    […] CSS Browser Reset by Chris Poteet […]

  13. CSS Reset | Sarasota Web Design, 3d Animation, Video, Audio
    May 10, 2010 at 10:32 am |

    […] CSS Browser Reset by Chris Poteet […]

Leave a Reply