Reworked Reset

Published 10 years, 10 months ago

Here’s the latest 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! */
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: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}

The changes are:

  1. The leading comment — rather than fill in some default document colors, which I hesitate to do given how often they’ll be changed, I just threw in a comment reminding the author that setting them is a good idea.  I’d expect that anyone who uses their own set of baseline styles will fill in their own favorite color set.

  2. font-weight: inherit; — this used to be normal, but it was pointed out that this would upset normal inheritance.  For example, if you set a div to be boldfaced, none of its descendant elements would inherit that boldness (because they’d be explicitly assigned normal).  Using inherit avoids this problem while still “zeroing out” boldface styling.

  3. font-style: inherit — same reasoning.

  4. vertical-align: baseline — this brings everything onto the baseline, including superscripts and subscripts.  This forces authors to determine the exact vertical offset they want for such elements, as well as any others they might care to vertically shift, as well as how they’ll accomplish said shift(s).

  5. a img, :link img, :visited img — this will make sure images in anchors and links don’t have a border by default.  Using a img covers images in named anchors, while the rest of the selector handles images inside either visited or unvisited links.  You might consider a img to be sufficient, and for now you’d be right.  But in the future, any element may be a link, not just a elements, so this gives us a bit of future-proofing.

I also put some spaces into the selectors to make them easier for me to read.  If you use these styles, you might consider stripping out the unnecessary whitespace to compact the rules as much as possible.

It was suggested that min-width: 0; be added to the first rule in order to invoke hasLayout, but Ingo Chao explained why that was a bad idea.  It was also suggested that text decorations should be removed from links, but I’d rather not.  I try never to mess with link decorations, and also figure that anyone who feels otherwise can add their own text-decoration declarations.

So we’ll see how well this one stands up to use in the wild.  Let me know!

  • Published
  • Categorized under CSS
  • 99 responses so far

  1. Great followup article. I previously used the global * { margin: 0; padding: 0; } method. Both your articles have opened my eyes to a much smarter solution that I will be implementing in my next design.

  2. Thank you very much.

  3. Thanks!

  4. What is it for?

  5. I’m curious why you have:

    a img, :link img, :visited img {
    border: 0;
    }

    When you’re already setting img to have border: 0; in the very first selector? Or am I missing something really obvious?

  6. Hey Eric, looks great! I was wondering, since a lot of us already know about Faruk’s Initial.css method, how does this one stack up against it and which would be the preferable method in zeroing out sites.

  7. Thanks a lot!

  8. I use this to trigger hasLayout if you are interested:

    http://www.tanfa.co.uk/css/examples/haslayout/tripswitch-demo.asp

  9. Brad: specificity. Some browsers have this sort of thing in their style sheet:

    a img {border: 2px solid;}

    In Gecko-based browsers like Firefox, it’s:

    *|*:-moz-any-link img, img[usemap], object[usemap] {
      border: 2px solid;
    }
    

    That would win out over plain old img on specificity grounds. With the selector I wrote, the specificity will be as high as the first of those selectors, and thus win out (since author styles come after browser styles).

    Of course, the Gecko style sheet means that in those browsers, images and object with a usemap attribute will still get borders, since they are being selected at a higher specificity than what’s in my reset rule. I’m sort of on the fence as to whether I should account for those, or let them go on the grounds that they’re very rare cases.

  10. Dean–

    Thank you very much. That will help. Am always tripping over haslayout and getting triggered into “Jack Palance” mode.

  11. Eric:

    You could write html body img { border: 0 } to overcome the specifity of browser stylesheets, no?

    Also, any reason you”re using q:before { content: "" } and q:after { content: "" } instead of the direct approach, q { quotes: "" "" }?

  12. Fine. Seems to work good for me with one exception. The line height should also be inherited. Otherwise one needs to define the line height for each element and it is impossible to just do something like “#teaser{line-height:160%}” because the p- and li-elements and so on have their own definition.

  13. Thanks, Eric!

  14. Hey Eric,

    there is some really good stuff here. Do you see this as a fork of Reset.css from YUI or something that could be fed back in?

    There is a Bugzilla for YUI on Sourceforge if you wanted to make notes of where the Reset.css has issues. http://sourceforge.net/tracker/?group_id=165715&atid=836476

  15. Interesting, thank you! :)

  16. Aristotle: if they’re just using a img, then yes, but Gecko isn’t. I’m pretty sure the -moz- pseudo-classes contribute 0,0,1,0 specificity, so *|*:-moz-any-link img is 0,0,1,1 — which requires something like :link img to compete. Also, I should add a quotes rule, so thanks!

    Sebastian: line-height: 1 should have exactly the same effect as inheriting, and does when I test it. (So would line-height: 1em, actually.) Do you have a test case where it isn’t?

    Tom: I see it as a parallel effort, but they’re certainly welcome to fold anything I’ve done here into their CSS. I think that, to the extent that CSS needs a license (which I don’t for a second think it does), it can be under the WTFPL.

  17. Have come across the same issue as Sebastian relative to the line-height value of 1 as opposed to a value of inherit.

    If a value of 1 or 1em as the same effect as inheriting, wouldn’t a value of inherit be more direct?

    This is not a suggestion. It is a question. Ergo, the question mark.

    Thank you very much.

  18. Addendum:

    Would the specification of the inherit value for line-height not override any browser default values?

    Thanks.

  19. I have the same issue as thacker & Sebastian regarding the line-height.

    When I try this:

    <body>
    <div id=“header”>
    <h1>Headline1</h1>
    </div>
    </body>

    body {
    font:16px/1.5 Sans-serif;
    }

    h1 {
    margin-bottom:24px; font-family:Serif; font-size:200%;
    }

    The headline has a line-height of 1 with the reset css file as is. But if line-height is changed to inherit in the reset file, the line-height is perfectly fine.

  20. Eric,
    1. a img {border:none} works perfectly fine on Gecko 1.7+ and Gecko 1.9a, and has actually been doing so for ages.
    2. line-height:1 is, as has been commented, not a good idea. That breaks the inheritance of the line-height property.

  21. […] secondo eric meier […]

  22. Using inherit on font-weight and font-style doesn’t actually zero out styling in IE 6. I’m not sure about IE 5.x or 7 but I’m guessing they behave the same way. One could selectively serve normal to IE and inherit to everything else but I don’t think that’s the way to go as we’d no longer be leveling the playing field.

  23. Ah, now I see. For people who actually do use unitless line-heights (which, in my experience, had been basically nobody), the line-height: 1 causes problems. I keep forgetting to look forward there instead of back. Okay, so there’ll be at least one more post, or at least a modification of this one.

  24. The line-height problem seems to impact unit specified line heights as well. It is not allowing inheritance from parents, e.g. when the body element has had line-height of any specified unit value set.

    Are all these inherit values not leveling browser defaults as indicated by Ed Eliot, ie. font weight and font style within IE6?

    Thank you.

  25. […] Reset CSS styles Eric Meyer presents a baseline set of CSS (based on a Yahoo set) that resets default styles. I have often considered coming up with something like this and am super excited to give this one a whirl. […]

  26. Good work, Eric. Thanks.

  27. This is not meant to be overly critical of E. Meyer’s intent or method to reset browsers.

    After reviewing Philipp where he/she mentions “redundancy”, Ed Eliot’s Blog where he states:

    For me, however, both [the YUI and the Meyer Reset file] go too far. I’d prefer to use one which only affects the elements I most often find myself needing to reset.

    and other miscellaneous issues including line-height, image borders, font styling and possible overuse of the inherit value that may not reset IE browsers, that I am in agreement with Ed Eliot’s quoted observation.

    The use of a reset style sheet is one that needs adjusted, individually, for the individual’s coding style. A magic bullet style sheet for all uses and individuals to flatten out built-in browser styles may not be practical.

    That said, the Meyer Reset provides the groundwork that can be modified for individual use. For that, Eric, thank you.

  28. Ah, now I see. For people who actually do use unitless line-heights (which, in my experience, had been basically nobody), the line-height: 1 causes problems. I keep forgetting to look forward there instead of back. Okay, so there”ll be at least one more post, or at least a modification of this one.

    I use unit-less line-heights…

  29. And I forgot to say, it was interesting how my site kind of went bonkers with this reset CSS. It was mostly some no longer-inherited line-height’s. Nice work. I’ll definitely be using this on future projects.

  30. […] Reworked Reset – Eric Meyer (tags: css work webdesign) […]

  31. […] Eric Meyer: Reworked Reset An updated version of his alternative to YUIs reset CSS. As usual, some of the more interesting stuff is in the comments. […]

  32. I don’t use tables for layout, but with this reset I find that my data tables do not display borders if I use the <table width=“200” border=“1” cellspacing=“2” cellpadding=“6”> markup within the table selector. Do I have to style all my tables individually to get the borders to show?

  33. I personally wouldn’t use the quote part, although I did used to. Jez Lemon pointed out that non-IE browsers are correct to the spec to include quotation marks, you could run into language issues from encouraging authors to use inline quote marks. Not to mention effectively punishing other browsers for doing it to-spec.

    Although not applicable to every case, for a general style sheet I’d rather leave the quotes part out of the CSS and use Jez Lemon’s approach.

  34. […] reset code to bring some of the individual browser quirks to a standard imposed by the developer. Eric Meyer has published his over the weekend which covers just about every contengency. I prefer to only […]

  35. Excellent post Eric, thanks.

    I must be missing something as regards:
    font-weight: inherit;
    and
    font-style: inherit;.

    I have an h1 that includes an em. As it stands, the em (or had I had one, strong) is overridden by these rules.

    I can fix this with additional rules, eg:

    h1 em {
    font-style: italic;
    }

    However, adding this seems ‘wrong’.

    Is the need to include:
    font-weight: inherit;
    and
    font-style: inherit;
    greater than this wrongness or should these two be dropped perhaps?

    I admit I don’t often markup h1 with em or strong, but it still seems wrong somehow.

  36. […] Eric’s Archived Thoughts: Reworked Reset I’d like to test this out on a few sites and see how it stacks up to the Yahoo! reset.css I currently base my work on. (tags: todo css design webdev) […]

  37. […] Eric Meyer has been working on his own version of a css “reset” stylesheet. 2007, aea, aneventapart, boston, conference, DOM, event, speakers This entry was written by […]

  38. […] Eric’s Archived Thoughts: Reworked Reset “baseline” style sheet (tags: css tips) […]

  39. Hi Eric, I was wondering why you where resetting the list’s?

  40. I’ve used tantek’s undohtml.css for some time — it is mentioned in the very first comment to the original post.
    Could someone explain why one approach is better than the other.
    Thanks

  41. I don”t use tables for layout, but with this reset I find that my data tables do not display borders if I use the <table width=“200” border=“1” cellspacing=“2” cellpadding=“6”> markup within the table selector. Do I have to style all my tables individually to get the borders to show?

    You could (and probably should) set the border and cellpadding of a table with CSS. Setting the cellspacing with CSS is not yet possible in IE.

  42. Zurück auf Los….

    …m Stylesheet immer den gleichen Effekt haben. Bzw. man ist abgesichert gegenüber vergessenen Formatierungen.

    ……

  43. […] Eric’s Archived Thoughts: Reworked Reset (tags: css tools resource) Leave a Reply […]

  44. I like (prefer, actually) unitless line-height. But it’s not the only problem here. After trying the reset I ran into this:

    <div class="t"><div>Text</div&gt</div&gt

    .t { text-align: right; }

    Inheritance problem. Text is, of course, rendered left aligned.

    I fixed this by putting a “html, body” rule directly below the long one where I set font-size, line-height, text-align to 100%, 1, and, left respectively. Those can then be set to inherit for everything else. Make sense?

  45. […] Eric’s Reworked Reset Here”s the latest version of my “baseline” style sheet (tags: CSS) […]

  46. A real interesting article, great work! :)

  47. Great topic Eric,

    Thanks again for feeding back to the community some of your hard work and research. I’ve always used a similar idea of baseline styles, but never put it into a dedicated css file.

    I’ll have a play around with your reset stuff and see if i can break my sites, but i doubt i will.

  48. […] Rat "Setz mal den Prolog" h�tte sich ja dann auch �berholt. W�re Eric Meyers "CSS-Reset" die bessere […]

  49. […] CSS’de söz sahibi bir isim Eric Meyer’den başlangıç css dosyası. Kullanışlı bir doküman. Link […]

  50. […] This is where I am. Sample: selkirk.ca/testpages/test-wireframe/. I started with Yahoo Grids, with their decent CSS Reset code (although I’m looking hard at Meyer’s css reset method. […]

  51. […] Eric’s Archived Thoughts: Reworked ResetEric Meyer’s reset styles for starting CSS files. It might be a while before I incorporate this into my base style sheets, but it’s a great starting point for zeroing out default browser styles.(Tags: css, reference, web-standards, web-design) […]

  52. Great job on this, thanks much. However, I’m confused by one thing, what does the very last rule for the blockquotes do, and why?

  53. […] Link to Eric’s Archived Thoughts: Reworked Reset […]

  54. Hi, cool preset-reset, thanks for that!

    What I prefer is to set a:focus { border: 0; }, to wipe those dashed borders, after clicking a link and open in in a new tab/ window.

    So, this would be my only addition right now.

  55. Sorry, to correct my comment, it’s a:focus{ outline:none; }

  56. […] Polar Clock Why you should not use a flag as a symbol of language Experimental Gameplay Project Eric’s Archived Thoughts: Reworked Reset Grafici con Javascript Free CSS Graph Resources Generators Font Garden css, font, grafici, Il […]

  57. […] Here is his post, found in it’s original form here. […]

  58. Good stuff, I’m using it with greater ease than just the global reset. It’s opened my eyes to further tweaking, which I can do on an individual basis.

  59. Good job, Eric!

    I’d like to point out that input[type=text], select and textarea should also have the background rule set. Otherwise it will inherit default OS theme behavior. Luckily, most of the computer users have set application backgrounds to white, but you never know.

    Additionally, be cautious with input[type=hidden]. If one sets margin and/or padding rule to all inputs, but hidden fields are not reset, she might be wondering where all those gaps came from.

    BTW, one more vote for unitless line-heights.

    Daniel, by reseting borders for :focus pseudo-class you’re making it hard to navigate with a keyboard. If you really have do it this way, please don’t forget to highlight the link in focus with some other method.

  60. […] Meyer has kindly published some reset CSS styles, with the aim of overriding the browsers in-built default […]

  61. […] Baseline CSS! […]

  62. […] both margin and padding for all elements at the top of their stylesheets. Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s […]

  63. […] have posted source code for their baseline stylesheet at one point or the other: Christian Montoya, Eric Meyer, Ping, Mike Rundle…any others come to […]

  64. […] 原文:Reset Styles […]

  65. […] 原文:Reset Styles […]

  66. […] Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant […]

  67. […] Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant […]

  68. […] Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant […]

  69. […] without squandering browser resources or disabling HTML attributes. You may also be interested in Eric Meyer’s solution, although it seems to me to deal with many tags that are unlikely to have padding or margin presets […]

  70. […] O pueden checar el archivo en la pagina del autor aqui rightclick, en los comentarios tambien mencionan este otro de meyerweb  […]

  71. Arghh!!!

    Opera seems to be choking on the big reset rule at the top. I assume it’s because of all the element declarations. *sigh*

    I’m going to try and narrow this down some more.

  72. ah ha! it seems that using html as a selector in opera with the big reset will confuse it (not all the time though – sometimes a page refresh triggers it, sometimes it fixes it. go figure)

    So now my reset rules are exactly above but with ‘html’ removed from the first rule selection list.

    That’s been annoying me for weeks – so glad it’s fixed now. didnt seem to disrupt any other browsers either. Why on earth they would bother styling the html element I do not know :-/

  73. […] Eric’s Archived Thoughts: Reworked Reset Reset para que los CSS no tengan incompatibilidades entre navegadorores (tags: css webdev webdesign) Archivado en: Links Diarios   |   Etiquetas: No Tags. […]

  74. […] known that this has some issues with it when dealing with forms and am starting to come round to Eric Meyer’s way of using a baseline css file in order to reset the specific elements that you want to set as apposed to just assuming that all […]

  75. […] è il reset di Eric Meyer, pari […]

  76. […] Eric’s Archived Thoughts: Reworked Reset (tags: css reset web development webdesign howto design layout) […]

  77. […] directa de 3 fuentes: Yahoo UI Reset CSS, Eric Meyer’s Reworked Reset y mi experiencia personal para ir adaptándola a mis […]

  78. Unfortunately, in Firefox, vertical-align baseeline on the tr element causes table cells with rowspans to have the first adjacent row line up at the bottom of the cell rather than have the multiple cells line up adjacent to the one rowspanning cell.

    Even more worrisome is that Firefox does not render an overriding style, such as vertical align middle, even if the style is in element’s STYLE ATTRIBUTE!!

    Firebug shows it as overridden, but Firefox does not render it correctly.

  79. ah ha! it seems that using html as a selector in opera with the big reset will confuse it (not all the time though – sometimes a page refresh triggers it, sometimes it fixes it. go figure)

    So now my reset rules are exactly above but with “html” removed from the first rule selection list.

    That”s been annoying me for weeks – so glad it”s fixed now. didnt seem to disrupt any other browsers either. Why on earth they would bother styling the html element I do not know :-/

  80. Hi Eric,

    I read somewhere that using the universal operator to reset CSS takes a lot of browser processing time since it travels through the entire DOM when a page gets styled (i.e. reset).

    I’d like to hear your opinion on that – was that ever a concern in your investigations?

    Cheers!

  81. […] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 […]

  82. […] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 […]

  83. […] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 […]

  84. […] наша нуждаетса в глобальном сбросе, я предлагаю CSS Reset от Эрика Майера, сохранив reset.css создадим grid.css в […]

  85. Maybe a simple question, but if I use a browser reset style, should I add a new selector ‘body’, to override the reset for the selector body? Or should I alter the lines in the Reset-CSS?

    How can I deal with this?

  86. […] is Eric Meyer’s rendition of reset.css. Try it out, and let us know how it […]

  87. […] Eric Mayer mette a disposizione degli sviluppatori web un CSS Master come pure il team di sviluppatori di Yahoo all’interno delle librerie UI. […]

  88. Nice reset, but, what about the different display value between browsers, its a good idea defining for any element in the stylesheet the display value?

  89. […] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 […]

  90. […] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 […]

  91. […] Eric Meyer’s reset styles. […]

  92. […] 1)Use a base stylesheet – why spend hours tweaking styles when all that needs to be done is catching all those pesky initial values. Don’t have a base stylesheet? Your can find a nifty one by Eric Meyer here. […]

  93. […] a link to Eric’s post on his own website, which he created after someone at the conference asked if he had an example of […]

  94. Hi Eric,

    your CSS code is quite well optimized for compactness. Unfortunately that has a drawback: -it is not clear which tags really need a given style rule (because inheritance is not applied by default, for instance, or because different browsers have different default style sheets).

    Would it be possible to show the CSS code in an unentangled way? That is, for each one of the following type of rules, give the corresponding set of tags that really need those rules:

    i) margin: 0; padding: 0;
    ii) border: 0;
    iii) font-weight: inherit; font-style: inherit; font-family: inherit;
    iv) font-size: 100%;
    v) line-height: 1;
    vi) text-align: left;
    vii) vertical-align: baseline;

    The point is that I would like to set directly the final rule values whithout needing to reset and then setting them again.

  95. ah ha! it seems that using html as a selector in opera with the big reset will confuse it (not all the time though – sometimes a page refresh triggers it, sometimes it fixes it. go figure)

    So now my reset rules are exactly above but with “html” removed from the first rule selection list.

    That”s been annoying me for weeks – so glad it”s fixed now. didnt seem to disrupt any other browsers either. Why on earth they would bother styling the html element I do not know :(:(

  96. […] how can you take anything for granted after you see the bottom padding here… Maybe those browser reset stylesheets are not such a bad idea after all… At least it looks the same in FF and […]

  97. […] it should look like this. Now we’ll add some style to the whole thing.CSSIf you like you can use Eric Meyer’s CSS reset, but in our case this should be enough. * { margin: 0; padding: 0; } body { font-family: helvetica, […]

  98. […] Eric Meyer’s – Reworked Reset […]

Leave a Comment

Management 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>


Comment Preview

If you're satisfied with what you've written, then go ahead...