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 intercept the default browser stylesheet (that is used first in the cascade), reset, and then apply generic styles including margin/padding. I read many articles by many gurus, but I eventually came out with what I have below.

For differing implementations check out this great “killer collection” of resets, and note that this won’t work in IE6 due to the universal selector 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 , , , , | 22 Responses

22 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 updating my collection 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 |

    […] Technique suggested by Chris Poteet […]

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

    […] dl mempunyai margin 20px 0 , yang belum tentu semua suka oleh perubahan ini dapat dilihat 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 “various influences” created this remarkable technique for resetting default browser styles. Chris recommends placing the reset at the top of your style sheet for optimal cascading results. […]

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

    […] Ein weiterer Reset ist Siolon’s CSS Browser Reset. […]

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

    […] sugerida 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 […]

  14. An (Almost) Complete List of Global CSS Reset Styles | kmsm
    September 9, 2010 at 12:20 am |

    […] Permalink: http://www.siolon.com/blog/browser-reset-css/ […]

  15. 11 useful CSS snippets to save your time – Red Team Design
    November 28, 2010 at 10:29 pm |

    […] Siolon Browser CSS Reset […]

  16. ????CSS « DS LAB.
    January 17, 2011 at 11:30 am |

    […] CSS Browser Reset […]

  17. CSS Reset – O que é e como usar? » Info Adris
    February 24, 2011 at 12:18 am |

    […] sugerida por Chris Poteet’s para Reset […]

  18. ????? ??????. CSS reset | DenWeb
    February 27, 2011 at 8:21 am |

    […] Reset ?? Chris Poteet. * { vertical-align: baseline; font-family: inherit; font-style: inherit; font-size: 100%; […]

  19. Técnicas para resetear CSS
    June 9, 2011 at 11:30 pm |

    […] Chris Poteet’s Reset […]

  20. renan martins pimentel
    November 1, 2011 at 5:55 pm |

    […] sugerida por Chris Poteet’s para Reset […]

  21. 10 técnicas para resetear CSS - 1 + 1 | Blog
    January 20, 2012 at 8:39 am |

    […] 3. Chris Poteet’s Reset CSS […]

  22. Sacima?????? » Blog Archive » Useful CSS Snippets for Your Coding Arsenal
    January 30, 2012 at 12:00 pm |

    […] 1. Chris Poteet’s CSS Browser Reset […]

Leave a Reply