CSS Reset – a simpler option

Date: 23 April 2010
Author: Russ Weakley

A quick presentation on CSS Reset including a basic explanation, an outline of some of the advantages and disadvantages, as well as a simpler reset option.

The Simple CSS reset code

/* ----------------------------
simple reset
---------------------------- */

html, body, ul, ol, li, form, fieldset, legend
{
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

fieldset,img { border: 0; }

legend { color: #000; }

li { list-style: none; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td
{
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

input, textarea, select
{
	font-size: 110%;
	line-height: 1.1;
}

abbr, acronym
{
	border-bottom: .1em dotted;
	cursor: help;
}

Comments so far

  1. I don’t think that forgetting to re-style something is good enough a reason to avoid using a Reset like the one from Eric Meyer.

    All you need is to keep a checklist of “things yet to style” and you’re good to go!

  2. Russ says:

    @Thiago: As always, it comes down to personal decisions. :)

  3. Pierre says:

    Do you a have a download link for your reset file?

  4. Russ says:

    @ Pierre: good point. now added to code below slides.

  5. Pierre says:

    Thnaks Russ!

    You should put some credits into your header comment. :)

  6. Russ says:

    @Pierre: You mean something like: “I’d just like to thank my mum…” ;)

  7. Adam says:

    Good way, but some thinks i dont like:
    - li – list style none, why?
    - font weight normal for th, eh?
    - fieldset to none :)
    ..

  8. Russ says:

    @adam: all of these are personal opinion. I never used to turn off list style until resently when I released I was turning it off on EVERY list I styled throughout each layout. If this is the case, it is simpler and more efficient to set it once.

    I rarely ever use the fieldset borders – they are a pain and are rarely needed from a design perspective. I turn them off now using the simple reset for the same reason as above – if you find yourself turning them off in every instance, then you may as well do it once only.

    Font weight for th elements is a personal decision as well. Many of the tables I design have th’s flagged in some way (via background colours etc) but do not require a bold font-weight.

    As with any of the resets, you should do what YOU feel comfortable doing!

  9. Edson says:

    Great one! Everything I need for most of my projects are there. font-size: 110%; for the inputs was a great tip, tks a lot!

  10. Chris says:

    Good read. I found the code snippet horribly difficult to read from line 11 onwards, maybe add some returns?

    I’m not sure about just changing the margin-top of elements like h1, h2… etc – as you state all browsers have a default stylesheet, surely all these would have different margin-bottom values, and you don’t change them?

  11. Michael says:

    Very simple reset like you said and I agree 100% that using a reset is really a matter of personal choice.

    I tend to leave out all resets in regards to forms. I let the OS’s handle them via default, unless of course a particular design calls for fancy forms which then, use pretty much the same as you have posted.

    Thanks for sharing your resets! :)

  12. Mike says:

    I agree that a simple reset is all that is needed. I’ve used a simple one for a while now and haven’t had any problems. I do need to update it though.

  13. MarcRic says:

    There are a few more questions involved…

    http://marcricblog.blogspot.com/2009/11/oocss-page-layout-and-naming.html

    About the reset stuff, IMHO we need to call it a “default style sheet” rather then “reset style sheet”.

    I have adopted this one:
    http://www.w3.org/TR/CSS21/sample.html

    Regards

  14. I had never heard nor read about it… thx Russ !

  15. chestaz says:

    wow, very simple and useful :)

  16. Great presentation, that’s a really useful slide share to show people how to build things better.

    Totally agree with your first point about it coming down to personal opinion – if you understand the mechanics behind it, then that’s great.

    However at a professional team level (working with a large team) then I can imagine these personal opinions can become a problem and people having to code in a certain way depending either on the lead making a decision or the majority agreeing one way is more elegant than the other.

    For this reason I’d (personally) would stick to using a framework that lots of people have discussed and is used at a pro level such as the YUI reset – where you know a group of vastly intelligent fe developers have discussed and come to an agreement over which is the best.

    This way I can stick to building projects without having to adjust any of my CSS habits (regardless of how small they become), especially as new CSS elements come into play in the future and we perhaps have to ground more different elements such as the HTML5 lot.

    For personal projects sharing your understanding of CSS however – this is great.

  17. CSS reset, interesting… never knew it existed, but can understand why it does.

    Another good post and presentation I’ve commented today.

    Thank you

  18. Russ says:

    @Chrs: regarding changing the bottom of different heading levels, the answer is YES. I change them often. However, I use different margin-bottom in each case (sometimes 0, sometimes .5em, sometimes 1em etc) so I prefer to do this as needed rather than zero them and have to reset them again.

    The difference between the simple reset above and some of the other full resets is that they aim to zero all styles – make a level playing field across all browsers.

    However, my aim not to reset all styles. My aim is primarily to avoid repetition – ie make my CSS file more efficient. I specify these rules so that I get them out of the way quickly in one place.

  19. Russ says:

    @Kai Chan Vong: I totally agree with you regarding a team environment. I code for myself, so chose a method that works for me – and is constantly changing.

    However, if it was a team environment, especially one where you want to build efficient sustainable practices, then using a well known and supported CSS reset makes a lot of sense.

    I think your comment shows once again my reluctance to state anything in black and white. I always worry when I see people say THIS IS THE WAY IT MUST BE DONE!

    The reality is that people must make decisions based on their own or team circumstances. Decisions can even be affected by the CMS that is used (some people do not get a choice in this matter).

    Only you can decide what is ideal in your circumstances :)

  20. [...] CSS Reset – a simpler option | Max Design Always been meaning to write my own CSS reset – might be time to sort one out now. This one has a lighter touch than Eric Meyer's. (tags: css reset) Tuesday, 4th May 2010 delicious links [...]

  21. Jim Knight says:

    I think you make some good valid points here. I make the default reset for Struturo to be Eric Meyer’s but I’m going to play with your idea and perhaps make a change to the default reset on my product. Thanks!

  22. Gabriel de Kadt says:

    Nice.

    Bit of a d’oh moment when I saw your margin-top:0; for headings and paras. And I always forget abbr and accronym.

    But for sub and sup I’d recommend {font-size:0.7em; line-height:0;} over {text-align: whatever; }. Line-height solves the leading problem and looks better outside of IE. Font-size – well – sup and sub are supposed to be smaller – right?

    BTW – props to Laura Carlson and the Web Design Update http://www.d.umn.edu/goto/webdevlist/

  23. [...] CSS Reset – a simpler option | Max Design [...]

  24. [...] CSS Reset – a simpler option | Max Design En enklare, lättviktig css-reset. (taggar: css css-reset ) [...]

  25. Chang Huang says:

    Great stuff!

    If you have forms with textarea in you website, another reset that I find myself using over and over again is setting the font-family for textarea, because textarea does not inherit the font-family property, it’s always set to Courier when unstyled directly (correct me if I’m wrong here).

    For examples,

    body { font-family: Arial, Helvetica, sans-serif; }

    the above rule will not change the textarea font family to arial/helvetica.

    So what I do is add this to my reset:

    text-area { font-family:inherit; }

    You can try it here,
    http://cssdesk.com/a6yhC

  26. Chang Huang says:

    Sorry, there’s a typo in the last rule, it should be:

    textarea { font-family:inherit; }

  27. [...] semana pasada Russ Weakley publicó “CSS Reset – a simpler option”, señalando que casi nunca usamos todos los tags HTML que se incluyen en la hoja de reseteo de Eric [...]

  28. [...] week I spotted “CSS Reset – a simpler option” by Russ [...]

  29. [...] week I spotted “CSS Reset – a simpler option” by Russ [...]

  30. Thanks for the great information. I hope to be back soon. I have book marked it keep posting. Thanks again.

  31. Micha? Fikus says:

    I suggest adding:

    body { background: #fff; }

    beacause lot of people forget about it, they consider it as a default value – what is not true and what you can see if you will get dark theme of yours system/browser.

    And only when you will define color of a background there is a point in defining a color of other elements (like legend in your case).

  32. Russ says:

    @Micha: I normally set this after the reset code and it varies in color depending on the site. however, I agree completely with the principle – always including a background color.

  33. [...] CSS Reset, a simpler option A quick presentation on CSS Reset including a basic explanation, an outline of some of the advantages and disadvantages, as well as a simpler reset option. [...]

  34. [...] CSS Reset, a simpler option A quick presentation on CSS Reset including a basic explanation, an outline of some of the advantages and disadvantages, as well as a simpler reset option. [...]

  35. I’ve seen other articles about CSS reset before – but this is really well written and has much more detail – Thanks for sharing! *bookmarked*

  36. [...] CSS Reset, a simpler option A quick presentation on CSS Reset including a basic explanation, an outline of some of the advantages and disadvantages, as well as a simpler reset option. [...]