Reset Styles

html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol,ul {
	list-style: none;
}
q:before,q:after,
blockquote:before,blockquote:after {
	content: "";
}

Comments (75)

1. Some additions from I’ve found useful from undohtml.css:

   
a img,:link img,:visited img { border:none }

   :link,:visited { text-decoration:none }


2. One thing that I often include in my reset styles is a fix for the sub and sup elements’ leading issues. I find that this fix is pretty useful. Hoorah! Now you can use that basline grid.

3. I like the first one, Jesse (I’ll add it in a revision), but not the second. I’m wary of messing with link styling on general principles, so I tried not to remove their decoration. I took the same view of ‘strike’, ‘s’, and ‘u’, in fact.

   Thanks for reminding me of my omission of ‘vertical-align: baseline’, David. I’ll get that into a revised version as well.

4. Why aren’t you a fan, Eric, of using the universal selector? Right now I’m using the it for a global whitespace reset, as so:

   *
{
margin: 0;
padding: 0;
}

5. Darin: because that will apply to all elements, including inputs and other interactive form elements, which I was intentionally avoiding (as mentioned). If the :not() selector were universally supported, I’d use it in conjunction with a universal selector, but it isn’t.

6. Are you going to talk about your advocacy of “using a “reset” or “baseline” set of styles” at AEA Seattle? I’m curious to hear why, but I’ll be happy to wait if you’ll discuss it there.

7. Intriguing. I’d be interested in these issues:

   1. Any idea of the performance implications? (I have no idea about any CSS performance issues; this probably isn’t a problem at all.)

   2. Does the rest of the stylesheet end up containing a bunch of code replicating the default behaviour we’ve just turned off?

   I like this much better than the universal reset. This, I think, makes it clearer what the code does. Thus it’s more maintainable.

8. I would go with that but would also specifiy a value for the legend attribute so that IE doesn”t display that awful blue colour.

9. Intriguing. I’d be more interested in the reasoning behind this though – i.e., why are you omitting certain elements from the “universal reset”, and why would that be advantageous, given that different browsers will then render those elements differently?

   I’ve been using the universal selector and a few other ‘reset’ rules for years and am not aware of problems with it, which is why I’d love you to expand on this topic.

10. Nice to have this crib list of how to apply the almost-universal selector and leave the form inputs untouched. I took a stab at this recently, but came up a bit short.

    Paul: As to #1, I highly doubt it would be any kind of problem. As to #2, yes and no. Yes, it will replicate much of the default style’s functionality, but the fact is that different browsers have different default styling. Therefore, you are ensuring that some little bit of default styling in IE or Opera or Safari isn’t tripping you up compared with what you saw as you developed in Firefox. Much pain and frustration can be saved with this.

11. Thank you.

    Would the addition of the min-width property of the value of 0 to the above style sheet resolve any of the haslayout issues within IE?

12. Apart from the effect on elements (which we seem to end up restyling anyway) is there any really adverse effects on element using the universal reset?

    I still prefer using that method, but I do like the table code for collapsing borders that you’ve put up there.

13. should be

    Apart from the effects on Form elements…

14. Hi Eric, can you give a bit more insight into what you mean by “general weirdness” with regard to form elements etc?

    I had the same question in mind when one of the attendees asked you for the full list – Thanks for giving away the code!

    Cheers

15. Pingback :: Friday, April 13th, 2007 1:44am

    Filter for 13/4 2007 - Felt

    […] Eric Meyer: Reset Styles A variant of the YUI reset CSS. […]

16. Darin and others, to expand on what Eric said, it’s really the “interactive form elements” which is killer for the universal selector method. Focus and click any button and observe how it acts – how it _looks_. In gecko at least, that’s performed by rules in forms.css, which change the padding. You’d be overriding that, and getting a very flat and non-interactive button in return. Restyling that button ‘behaviour’ in a way that looks and works right in all major browsers is a real pain. Much better not to have to attempt it. (Trust me on this, as I found out through painful experience :) – and then had to keep updating my rules as gecko changed its styling and behaviour of buttons (this was back in the gecko 1.0-1.4 timeframe iirc – luckily they haven’t been touching that code for a while).)

17. Pingback :: Friday, April 13th, 2007 3:22am

    blog.jillesvangurp.com : links for 2007-04-13

    […] Eric’s Archived Thoughts: Reset Styles useful, will use this when doing css stuff (tags: css webdesign) Posted by Jilles on Friday, April 13, 2007, at 9:22, and filed under del.icio.us. Follow any responses to this post with its comments RSS feed. You can post a comment or trackback from your blog. […]

18. I”ve just made some bad experiences with that code because it breaks the inheritance of inline elements. This is for example if there’s a span in an italic-styled p you’ll end up with an non-italic span.

    I don’t know if that was intended. I’ve ended up to use the following rule at the beginning of my stylesheet:
    html {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
}

    I leave html out of the selector in your stylesheet and set the following rules: font-weight: inherit; font-style: inherit;. So I’ve got the font style/weight inheritance back, which is essential in my opinion.

19. I am wondering the point of all this? To make everything plain (browser default) text, and then you are then able to truly build the elements as you want them to be displayed across browsers? Years ago, I read doing padding:0 versus padding:0px or em, was kind of bad practice even though it makes things tighter together.

20. I’d add a white background and black text colour to the html and body elements as well. I explain why in my post Always Specify A Background Colour.

21. In my opinion the reset style in the article also removes wanted default styling.

    I currently use the good old *{margin:0;padding:0}. It removes most default styling and doesn’t do anything weird to form fields, since I don’t reset borders. For an particular element, I eventually overwrite default styling later.

22. What about levelling the playing field for the q tag browser behavious as well so that no browsers put quote marks around text in a q tag? As suggested at A List Apart?

    q:before, q:after { content: ""; }

    It does assume that IE:Win continues not to understand :before and :after but that’s a chance I’m willing to take.

23. Doh – just missed the fact you had it already. Whoops.

24. Pingback :: Friday, April 13th, 2007 9:51am

    boxmodell-fehler in xhtml? - XHTMLforum

    […]

25. Eric, that’s a good point. The way I set up the styles works well for the way I write CSS (and markup), but could cause inheritance problems in other situations. Flipping those to ‘inherit’ is a good call. I’m not as sure I’d separate out ‘html’ into its own rule, but I’ll study it in more detail.

    Chris: hmmm, maybe. I tend to leave that sort of thing entirely alone, figuring that the author will fill in their color and background values (just about nobody omits them). Still, it might be worth doing.

    Blaise, see Matt‘s comment for a good summary of my feelings on “wanted” default styles.

26. thacker: that’s a good question! It’s certainly something worth investigating.

    David: so far as I know, the form elements are the only major reason not to use the universal selector, at least given the styles I’ve written. If you start messing with ‘display’ properties, then you could make the ‘head’ element and its descendants appear with the universal selector—but odds are low anyone would do that.

27. Pingback :: Friday, April 13th, 2007 10:50am

    Emad on Web Technologies : StyleSheet for new websites

    […] found this post by Eric to be very helpful and I plan to use his suggestions when creating my next web application. This […]

28. Pingback :: Friday, April 13th, 2007 11:04am

    E on the World » StyleSheet for new websites

    […] found this post by Eric to be very helpful and I plan to use his suggestions when creating my next web application. This […]

29. E. Meyer–

    According to Satzansatz for the min-width property: “Even the value 0 sets haslayout=true”.

    The overflow element within IE7 is apparently triggering layout. Am wondering, also, if adding the overflow property with a value of visible has merit.

    Being able to flatten out all the major browsers including IE7 with one “Reset” style-sheet seems to make some sense, I believe.

    I have presented this question to Pete LaPage, Product Manager, Internet Explorer, Developer Division. If he doesn’t respond to me, I am sure he would respond to someone who has a little bit better name recognition than myself, provided that resolving the haslayout issues of IE7 along with the other issues addressed in the “Reset” has overall merit.

    Thank you very much.

30. Eric: Thanks for clearing that up.

    Showing the header information through CSS is interesting, though kinda fruitless. I wonder if we could spin that as a Web3.0 feature :-)

31. Thacker – haslayout does solve some rendering problems, but it causes new ones. Giving haslayout to all elements would cause text content to stop wrapping around a float. Plus, in some cases, we don’t want to have every float being contained by its parent. Funny things would happen in lists. And it would prevent any margin collapsing. Applying layout to all is not the cure; it cuts both ways. It’s the presence of the current haslayout implementation (and some old pages rely on that), not its absence, that makes it so difficult for IE to comply to some parts of the specification. We can use haslayout concious to kill bugs in some defined scenarios. But a reset style sheet that is blindly applied must refrain from triggering haslayout (in elements that don’t have haslayout by default).

32. Ingo–

    Thank you very much. And understood. I was afraid that would be the case. At least this time around, you didn’t have me searching around for that hasconcept property. That still has me laughing.

    Thanks, again.

33. Pingback :: Saturday, April 14th, 2007 1:19am

    links for 2007-04-14 « Richard@Home

    […] Eric’s Archived Thoughts: Reset Styles A useful CSS snippet that gives you a standard cross/browser starting place for your CSS. (tags: css) […]

34. Pingback :: Saturday, April 14th, 2007 1:40am

    Bulgarian Experience » Blog Archive » links for 2007-04-14

    […] Eric’s Archived Thoughts: Reset Styles Comments are worth reading too – raise some important points. (tags: css html reset) […]

35. Provocatively: Is that a trick style sheet? Why should anyone interested in elegant code style use such a style sheet, that even in multi-client projects results in way too many overridden properties? A lightweight and easy to remember version is surely a margin and padding reset via universal selector, eventually assisted by a border reset on images. The rest is so obvious that there’s no need to “make sure” (e.g., resetting bold font weight on headings), and on the other hand, keeping it simple is not only more elegant, but rather easier to handle (you quickly add a simple “reset” to your style sheets by using your brains, not ctrl + c).

36. No, Jens, it’s not a trick, though it does go slightly too far in setting some styles (two ‘normal’ values need to be shifted to ‘inherit’)—as noted in previous comments. The universal selector is also undesirable—again, as noted in previous comments.

    As for a “simpler” style sheet being easier to handle because you can type it in rather than copy-and-paste it from another file, that’s an interesting perspective on ease. Not one I share, though.

37. I understand the desire to level the playing field, but why does almost everyone want to reset everything to zero? To me it would make more sense to set everything to what you want. If you want paragraphs to have a 1em margin, set it to 1em right away instead of setting it to zero first as part of a more general rule and then writing a more specific rule to set it to 1em. I feel the urge to use the phrase “one stylesheet to rule them all”, but that’s so cliche… woops, too late!

38. Call me contrarian or something similar. But why would you ever need such a thing ? Even the original ‘reset’ thingie has always sounded like completely superfluous in my book.
    I mean, after resetting everything like that, you’ll still need to style the individual elements anyway. Using that huge piece of code only adds ballast to your stylesheet. One ends up with things like this:
    h1 {margin:0; padding:0; /* and more reset */}
h1 {margin: 1em 0; padding:0; /* more rules */}
    redundancy…

39. Philippe: you would want it, because you don’t want to remember that Mozilla does paragraph and heading whitespace with margins, while IE uses padding (or was that the other way ’round?) :P You just want to import this one global stylesheet, and from then on out set only the rule you need on the pages where you need it.
    It’s a convenience thing, and a way to lessen the chance of needing to spend time on cross-browser rendering differences – especially when other (less experienced) designers will be touching the code as well.

    That said, of course there’s many people who won’t feel it worth it to bother with such a thing. Personally I gave up on the approach a year or two ago, although I do still always start with a minimal version in a global stylesheet of just those rules that I *know* I won’t want to be overriding, something like:
    
html, body {
margin: 0;
padding: 0;
}
html {
font-size: 1em;
}
body {
font-size: 100%;
}
:link img, :visited img {
border: 0;
}

    Anyway, you yourself having no use for it doesn’t mean that other people don’t have good reasons for finding the cost of redundancy worth bearing. (Most will never even notice that there is a cost.)

40. The person that told you about the Yahoo reset was Jake from Carnegie Mellon. I took a picture of him talking to you. ;)

41. Eric, I ws wondering if you could expand on the reason for having the reset.css? Is it just so that everything is explicitly defined? Just curious.

42. Sander,

    … because you don”t want to remember that Mozilla does paragraph and heading whitespace with margins, while IE uses padding (or was that the other way “round?) :P

    Incorrect. All browsers I know use margins in that case.

    Of course I do a lots of ‘browser reset’, as part of systematic styling of elements. But never had the need to do such ‘hard reset’, I style the elements anyway. 10 years of doing layout – and crazy things – in CSS.
    So, a well argumented rationale for this hard reset would be more than welcome. Also because I see this coming up regularly on mailing-list, by people who usually don’t really know what they do with CSS.

    PS – Eric. Is your preview box below accurate? I tried adding the url to the cite attribute, but it changed the whole comment in a link.

43. Phillipe, correct that it’s (at this point in time, for the current generations of browsers) the same for paragraphs and headings. It’s of course lists where that difference exists. But that kinda makes the whole point – people don’t want to remember! Having a level playing field to start off with can be a great goodness. (And it’s a bit of future proofing, too. Who knows if some future browser wouldn’t use padding by default? (unlikely, but for the same of argument), and what if you didn’t remember to set that to 0? Having one low-level stylesheet that you researched once and can now ‘rely’ on to make ‘hard’ such basic assumptions might be a mighty fine thing to have.)

44. Pingback :: Tuesday, April 17th, 2007 3:04pm

    reset.css - DesignersTalk

    […] I recently read Eric Meyers’ most recent blog posts: Eric’s Archived Thoughts: Reset Styles Eric’s Archived Thoughts: Reworked Reset In the final one, he recommends a set of baseline styles […]

45. When working to deadlines and x browser compatibility the above levelers are just to valuable to miss out, even with a simple design/project taking a chance on *not* providing a base value in a global style can cost you a lot of embarrassment and head ache when you least expect or want it.

    Geoff

46. Of course you wouldn’t copy and paste it. You’d put it in TextExpander and when you start a new CSS file you’d type

    /reset

    and have it fill it all in for you :-)

47. Pingback :: Wednesday, April 25th, 2007 8:38pm

    Recommended Reading for 24th April through 25th April

    […] Eric’s Archived Thoughts: Reset Styles – Eric Meyer looks at how we can use a global reset CSS file to iron out the inconsistencies between web browsers. Check out the original article and the follow-up which refines the process. […]

48. Pingback :: Friday, April 27th, 2007 9:59pm

    Chasing a Dream » Blog Archive » CSS Issues Firefox vs. IE

    […] reading Eric Meyer’s post, Reworked Reset, and it’s predecessor, Reset Styles, and his follow-up explanation of some of his choices, Reset Reasoning, I thought I may have a clue […]

49. Pingback :: Thursday, May 3rd, 2007 7:12am

    »Reset Reloaded«: Browserstyles zurücksetzen – SELFHTML aktuell Weblog

    […] YUI Reset CSSYahoo!s Methode, Browserstyles zurückzusetzen, auf der Meyers Ansatz basiert ursprünglich basierte, siehe Reset Styles. […]

50. Pingback :: Thursday, May 3rd, 2007 7:12am

    »Reset Reloaded«: Browserstyles zurücksetzen: DECAF°blog

    […] YUI Reset CSSYahoo!s Methode, Browserstyles zurückzusetzen, auf der Meyers Ansatz basiert ursprünglich basierte, siehe Reset Styles. […]

51. Trackback :: Thursday, May 10th, 2007 2:42pm

    Kaffeeringe.de

    Und die Erde war wüst und leer……

    Alle gängigen Browser verfügen über Standard-Stylesheets. Damit ist zum Beispiel festgelegt, wie groß eine h1-Überschrift dargestellt werden soll, wenn nichts anderes angegeben ist. Was in den frühen Tagen des Internets eine sinnvolle Sache war, …

52. Pingback :: Tuesday, May 15th, 2007 9:05am

    Best of April 2007 | Smashing Magazine

    […] Global Reset: Reloaded Eric Meyer shares his version of an universal reset.css you can use to set default values properly in modern browsers. […]

53. Pingback :: Tuesday, May 15th, 2007 10:48am

    Web-Design Blog » Blog Archive » Best of April 2007

    […] Global Reset: Reloaded Eric Meyer shares his version of an universal reset.css you can use to set default values properly in modern browsers. […]

54. Pingback :: Tuesday, May 22nd, 2007 8:01am

    CSS tips and tricks, Part 2 : The Blog Herald

    […] do is load his reset.css file int your page’s CSS file and you’re done. Head on over to Eric’s site and copy his code into your own file called […]

55. Pingback :: Tuesday, May 29th, 2007 4:50pm

    Tekjuice.com » Blog Archive » Best of April 2007

    […] Global Reset: Reloaded Eric Meyer shares his version of an universal reset.css you can use to set default values properly in modern browsers. […]

56. Another problem with inducing hasLayout is that floated or position:absolute containers may no longer shrink-to-fit if any non-position:absolute block level elements contained within them is hasLayout = true. (http://www.satzansatz.de/cssd/onhavinglayout.html)

57. Pingback :: Thursday, August 9th, 2007 3:57am

    Four simple steps to alleviate IE6 frustration » Broken Links

    […] use a reset stylesheet to level the field. Then, find out which IE6 bugs exist, and what you can do to work around them. […]

58. Pingback :: Sunday, August 19th, 2007 4:41am

    Frage zum Umgang mit dem "html" - Tag - XHTMLforum

    […] von Meyer. F�r dich ist "Universell plus Restaurierung" nicht einfacher als "Differenziert ala Eric Meyer". Das glaube ich dir aufs Wort, aber du bist auch ein "sehr erfahrener […]

59. Pingback :: Monday, August 27th, 2007 11:12am

    Tym Arts » Blog Archive » Getting the bigger picture at An Event Apart

    […] Check out his reset styles so you have full control!  He does say to create your own reset styles to fit your work style. […]

60. Trackback :: Tuesday, October 16th, 2007 7:00am

    Knowtu

    WordPress Theming…

    Small Potato (should I not be using capitalisation?) created a very useful resource on how to create a WordPress theme.
    I found it most useful in understanding how WordPress is hooked together. Having recently joined the blogging fraternity I needed t…

61. Pingback :: Monday, December 10th, 2007 12:17am

    3 Inspirational Web Design Quotes from Industry Leaders

    […] them you get a clean slate and can give you peace of mind when styling your site. Check out Eric Meyers page on the CSS reset for more details and good practice. “We have the power to make people enjoy life”. – […]

62. Pingback :: Tuesday, February 12th, 2008 11:21am

    The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 3 - XHTML

    […] Reset is to create a clean slate to start your CSS coding from. Here is a link to the Reset I use: Reset Styles at MeyerWeb. After naming your stylesheet go ahead and place the reset […]

63. Pingback :: Thursday, February 21st, 2008 4:00am

    Shizamed » 3 Inspirational Web Design Quotes from Industry Leaders

    […] them you get a clean slate and can give you peace of mind when styling your site. Check out Eric Meyers page on the CSS reset for more details and good practice. “We have the power to make people enjoy life”. – […]

64. I have a related question –

    width!

    If you want to override width back to default ie reset widths how can it be done?

    for example..

    input[type=”radio”] {
    width: normal;
    }

    … will not seem to work!

    any ideas?

65. Pingback :: Tuesday, May 13th, 2008 1:06pm

    simpledream web studio: standards-based web design and development » Archives » Summit Hut Realign 2008

    […] principles of grid-based layouts and the excellent Blueprint CSS framework as a starting point for resetting and standardizing the layout, text treatment, and interaction […]

66. Pingback :: Thursday, July 31st, 2008 9:13am

    An accessible “Starkers” Wordpress theme — Web design, experience design and art direction for the web — Al Stevens

    […] When I came to putting together this blog I was really happy to find the Starkers WordPress Theme. What the Starkers theme does is strip out all css, and implement a universal reset like this one. […]

67. Pingback :: Thursday, February 19th, 2009 8:01am

    WMC » Blog Archive » CSS Reset

    […] la versione originale di Reset.css e Reset Reloaded, Eric Meyer ha appena messo a punto e presentato la nuova versione in Resetting […]

68. Pingback :: Friday, March 20th, 2009 8:30am

    Mar-20-2009 web templates links | w3feeds

    […] Eric’s Archived Thoughts: Reset Styles […]

69. Pingback :: Saturday, May 22nd, 2010 1:17am

    One Way to Level the Layout Playing Field

    […] I’m excited to see that he posted a version of it (though reading the comments, it sounds like there will be a few revisions coming) on his blog today.  I’d highly recommend checking it out.  He based it on the one from the guys at Yahoo! UI, added a few things and tweaked a few others.  It’s certainly one way to help eliminate those frustrating hair pulling “why isn’t this working” kinds of questions! […]

70. Pingback :: Thursday, October 7th, 2010 8:50am

    An accessible "Starkers" Wordpress theme | Al Stevens - thoughts and ramblings on User Experience, Design and the World Wide Web

    […] which to style up the website. It starts by stripping out all css, and implements a universal reset like this one.This is fabulous since it never is easy modifying other peoples css. More importantly it cleans up […]

71. @Dan Gibas

    Referring to docs http://www.w3schools.com/css/pr_dim_width.asp
    the default value is
    width:auto;

72. Pingback :: Friday, December 10th, 2010 11:38am

    Reworked Reset

    […] version of my “baseline” style sheet, with some changes based on feedback from readers on the original post. /* Don't forget to set a foreground and background color on the 'html' or 'body' element! */ […]

73. Pingback :: Tuesday, January 4th, 2011 7:03am

    The History of CSS Resets

    […] schedule of design projects and conferences. However, he returned to the subject of CSS resets in April 2007. He brought up the topic at the 2007 An Event Apart conference in Boston, where he specifically […]

74. Pingback :: Monday, June 3rd, 2013 4:43am

    The Pastry Box Project | 3 June 2013, baked by Oli Studholme

    […] to address user agent style differences in 2004, with the YUI CSS Reset appearing in 2006, and the Meyer Reset in […]

75. Pingback :: Tuesday, January 26th, 2016 9:23am

    JavaScript and CSS test page – Tamar SEO and Social Blog

    […] XHTML 1.1, contains (commented out) links to Mootools & jQuery JavaScript libraries as well as Eric Meyer’s and YUI’s CSS reset stylesheets so that you can easily include these if you […]

Add Your Thoughts

• Trackback URL
• Comments RSS feed'

Name

E-mail (required but not displayed)

URI (optional)

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

---

Your Comment (Markdown supported)

if you’re satisfied with it.

Comment Preview

Δ