Siolon

CSS Browser Reset

The reset I arrived at after reading everyone else’s, with notes on where to place it and the universal selector that keeps it from working in IE6.

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

Tagged

, , , ,

Comments (31)

  1. Jeff Starr Avatar
    Jeff Starr

    Thanks for the link, Chris! I finally got around to updating my collection with your CSS reset. Great work!

    Reply
  2. Chris Poteet Avatar
    Chris Poteet

    Thanks Jeff!

    Reply
  3. KRUZ-GRAPHIX » ブラウザの差異をなんとかしたいのです。

    […] Chris Poteet’s Reset […]

    Reply
  4. 5 Удобных CSS Reset Техник | Strelban’s Blog.

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

    Reply
  5. Técnicas para resetear CSS | CSSBlog ES

    […] Chris Poteet’s Reset […]

    Reply
  6. How to reset elements in CSS « CssFinest

    […] Technique suggested by Chris Poteet […]

    Reply
  7. Bermain CSS #1 | eattutsmagazine

    […] dl mempunyai margin 20px 0 , yang belum tentu semua suka oleh perubahan ini dapat dilihat disini […]

    Reply
  8. » ???????CSS Reset – WEB????- ?????????????

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

    Reply
  9. CMI Web Studio Blog » Reseting CSS Styles

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

    Reply
  10. CSS Reset – Anfängerkurs « stella.projects

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

    Reply
  11. iConnect » Técnicas para reset CSS

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

    Reply
  12. CSS Reset: Ways and Advantages | Inspiring Pixel

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

    Reply
  13. CSS Reset | Sarasota Web Design, 3d Animation, Video, Audio

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

    Reply
  14. An (Almost) Complete List of Global CSS Reset Styles | kmsm

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

    Reply
  15. 11 useful CSS snippets to save your time – Red Team Design

    […] Siolon Browser CSS Reset […]

    Reply
  16. ????CSS « DS LAB.

    […] CSS Browser Reset […]

    Reply
  17. CSS Reset – O que é e como usar? » Info Adris

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

    Reply
  18. ????? ??????. CSS reset | DenWeb

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

    Reply
  19. Técnicas para resetear CSS

    […] Chris Poteet’s Reset […]

    Reply
  20. renan martins pimentel

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

    Reply
  21. 10 técnicas para resetear CSS – 1 + 1 | Blog

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

    Reply
  22. Sacima?????? » Blog Archive » Useful CSS Snippets for Your Coding Arsenal

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

    Reply
  23. Useful CSS Snippets for Your Coding Arsenal |

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

    Reply
  24. Algumas técnicas para resetar o CSS | renan martins pimentel

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

    Reply
  25. Useful CSS Snippets for Your Coding Arsenal « Web Study Online

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

    Reply
  26. CSS Snippets for Your Coding | prosoxi.com

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

    Reply
  27. code snippet | Free Web Designer Tool

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

    Reply
  28. Useful CSS Snippets for Your Coding Arsenal

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

    Reply
  29. Resetear CSS – Para qué sirve y cómo lo utilizo « Front End Ninja

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

    Reply
  30. Técnicas de Reset CSS | Giluan Souza

    […] 4 – Chris Poteet’s Reset CSS Técnica de Reset sugerida por Chris Poteet’s […]

    Reply
  31. Useful CSS Snippets for Your Coding Arsenal

    […] Chris Poteet's CSS Browser Reset Resetting your CSS style allows you to stop cross browser differences. Chris Proteet's reset code […]

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *