Pressure is nothing more than the shadow of great opportunity. - Michael Johnson

Less is more - my choice of Reset CSS

7 years, 3 months ago

Eric Meyer has written a couple of posts recently where he outlines his take on a Reset CSS file for zeroing out default browser styles in order to create a level playing field on which to develop. It builds on ideas presented in the YUI Reset CSS file which he feels doesn't go far enough in some areas. There's some interesting comments following both posts and useful links to alternative takes on the idea. For me, however, both go too far. I'd prefer to use one which only affects the elements I most often find myself needing to reset. With this in mind here's my thoughts on a cut down version:

  1. body {
  2. padding: 0;
  3. margin: 0;
  4. font: 13px Arial, Helvetica, Garuda, sans-serif;
  5. *font-size: small;
  6. *font: x-small;
  7. }
  8. h1, h2, h3, h4, h5, h6, ul, li, em, strong, pre, code {
  9. padding: 0;
  10. margin: 0;
  11. line-height: 1em;
  12. font-size: 100%;
  13. font-weight: normal;
  14. font-style: normal;
  15. }
  16. table {
  17. font-size: inherit;
  18. font: 100%;
  19. }
  20. ul {
  21. list-style: none;
  22. }
  23. img {
  24. border: 0;
  25. }
  26. p {
  27. margin: 1em 0;
  28. }

I've also included font resetting rules and a default font for Linux users which more closely matches Arial. I read an interesting article which discusses Linux font equivalents for common Windows and Mac fonts and I've had some interesting conversations with Stuart recently about supporting Linux based browsers. It does seem that most differences and the corresponding problems encountered on Firefox and Opera boil down to a mismatch in font sizes.

Download a compressed copy of my Reset CSS file.

To see an example of my Reset CSS file in use view this sample page.

Comments

  • Awesome. This is about all I ever really need (unless forms are involved)...

    Andy Ford - 16th April 2007 #

  • Yea that is about all anyone would every need unless forms are involved

    Wendy - 24th April 2007 #

  • You have some * in you Reset CSS that case some CSS "warnings".

    Is it OK to remove them? Any alternative solutions to have this reset CSS work without any errors?

    Thank you.

    John - 5th July 2007 #

  • John - the * is a CSS hack which targets those rules to IE 7 and below. IE needs to be served different rules which I don't want the other browsers to see. Whilst they don't validate they won't cause problems either. While one should always strive to write code which validates one often has to strike compromises in favour of functionality. In this case I think it's an acceptable compromise.

    However if you really want the CSS to validate you could move the *'d rules out into a separate file and target IE with conditional comments. In that situation the trade off you make is an extra HTTP request.

    Ed Eliot - 5th July 2007 #

  • Thank you for your prompt answer. I will leave it as is. :)

    John - 8th July 2007 #

  • "the * is a CSS hack which targets those rules to IE 7 and below"

    I drag those IE specific rules out and put them in an IE stylesheet. You can then use conditional comments to include them for IE: http://virtuelvis.com/archives/2004/02/css-ie-only

    Richard@Home - 16th October 2007 #

  • "While one should always strive to write code which validates one often has to strike compromises in favour of functionality."

    Absolute nonsense. The two are not mutually exclusive.

    And you've specified your base font size in pixels, which from an accessibility standpoint, is bunk.

    aj - 20th November 2008 #

  • Thank You Eric ;) its perfect

    aybar - 11th August 2009 #

  • Thx a lot, this works charm for ff and opera. I had a headache before to make display in opera and ff looked the same.

    cevarief - 16th February 2010 #

  • Your browser does not support iframes. is what I have had to resort to because there is no provision to RESET the CSS cascade in a STYLE="...CSS commands.."

    This is a serious problem.

    Jaques Surveyer - 5th April 2010 #

  • AJ maybe you should go research what "mutually exclusive" actually means. Your usage in that sentence made you look a little retarded, especially considering your holier-than-thou tone.

    Craig - 28th July 2010 #

  • @Richard@Home a base font size specified in pixels isn't "bunk" you ridiculous cunt. The obscure ways of specifying base font size from the past (in percent or em) were workarounds for IE5.5.

    You may have posted that comment 3 years ago but IE5.5 had long since died before that. I'm not normally one to dig up old topics but a retarded statement like yours needs a rebuttal and also people might actually look at your bold (but stupid) claim and mistake you for someone who knows what the fuck he is talking about.

    Craig - 1st November 2010 #

  • This fixed all my problems with IE! Thank you!

    tyler - 27th May 2011 #

  • THANKS! Worked perfectly!!

    Denny - 5th June 2011 #

  • Thanks for the Usefull CSS Code; i think Anchor styles is forgotten in this.

    وب سایت ها - 9th June 2011 #

  • Very helpful article, though it was written long time a go.

    Thanks for sharing!!

    Mustified - 2nd November 2011 #

  • Great article Ed, thanks very much for sharing the info :)

    Andy Mac - 7th March 2012 #

Help make this post better

Notes: Standard BBCode for links, bold, italic and code are supported. rel="nofollow" is added to all links. Your email address will never be displayed on the site.

Back to index