Reset Reasoning

Published 17 years, 7 months past

The reset styles are undergoing yet another overhaul, but in the meantime, I thought I’d answer a question several people have asked: why?!?  Why do this at all?

The basic reason is that all browsers have presentation defaults, but no browsers have the same defaults.  (Okay, no two browser families—most Gecko-based browsers do have the same defaults.)  For example, some browsers indent unordered and ordered lists with left margins, whereas others use left padding.  In past years, we tackled these inconsistencies on a case-by-case basis; for example, making sure to always set both left padding and left margin on lists.

But there are all kinds of inconsistencies, some more subtle than others.  Headings have slightly different top and bottom margins, indentation distances are different, and so on.  Even something as basic as the default line height varies from one browser to another—which can have profound effects on element heights, vertical alignments, and overall feel.

This is not something we consider very often.  We think of our CSS as modifying the default look of a document—but with a “reset” style sheet, we can make that default look more consistent across browsers, and thus spend less time fighting with browser defaults.  Rather than say “the size of that heading is just right”, forgetting that not all browsers size headings the same way, I have to write the CSS that sets the heading to be the size I want (or the design requires, which comes to the same thing).

This is why so many people zero out their padding and margins on everything by way of the universal selector.  That’s a good start, but it does unfortunately mean that all elements will have their padding and margin zeroed, including form elements like textareas and text inputs.  In some browsers, these styles will be ignored.  In others, there will be no apparent effect.  Still others might have the look of their inputs altered.  Unfortunately, there’s just no way to know, and it’s an area where things are likely to change quite a bit over the next few years.

So that’s why I don’t want to use the universal selector, but instead explicitly list out elements to be reset.  In this way, I don’t have to worry about munging form elements.  (I really should write about the weirdnesses inherent in form elements, but that’s for another day.)

There’s another reason I want to reset a whole lot of styles on a whole lot of elements.  Not only do I want to strip off the padding and margins, but I also want all elements to have a consistent font size, weight, style, and family.  Yes, I want to remove the boldfacing from headings and strong elements; I want to un-italicize em and cite elements.

I want all this because I don’t want to take style effects for granted.  This serves two purposes.  First, it makes me think just that little bit harder about the semantics of my document.  With the reset in place, I don’t pick strong because the design calls for boldfacing.  Instead, I pick the right element—whether it’s strong or em or b or h3 or whatever—and then style it as needed.

The maddening barrier to this is, yes, Internet Explorer.  See, in order to set all elements to have the same font weight and style (both normal) and have all elements use the same font face without breaking inheritance, I need to declare the following: 

font-weight: inherit;
font-style:  inherit;
font-family: inherit;

But IE/Win doesn’t support inherit, which would seem to bring that whole effort to a screeching halt.  I can’t explicitly assign the values, like I did in a previous version of the style sheet, because that would block the effects of inheritance.  Say, for example, I wrote this instead: 

font-weight: normal;
font-style:  normal;
font-family: serif;

Okay, now I have this rule later on in the CSS: 

h1 {font: bold 2em Verdana, sans-serif;}

Then I have this markup: 

<h1>Considering a <em>Truly</em> Annoying Omission</h1>

The em in the middle of the h1 will be un-boldfaced, and in a serif face.  With the inherit values, it would be bold and in Verdana (or some sans-serif font).  I should have realized that from the outset, but sometimes my enthusiasm gets ahead of my reason.

So do I drop those inherit declarations?  In the end, no.  They won’t work in IE/Win, but since I develop primarily in Firefox and Safari, that’s not actually a problem.  Their effects, as seen in my development environment, will still serve the purpose of reminding me to build up the styles I actually want, and not use the browsers’ defaults as a crutch.  There is the possibility of my forgetting that (for example) IE/Win italicizes em when I don’t want it to, but that’s something I’ll catch during the browser testing phase.

Hopefully this helps clarify my motivations and thinking.  I’ll follow up with a new (and hopefully final) version of the reset styles in another post, along with commentary on what other things I changed.

Comments (107)

  1. This one should help having inheritance in IE:
    font-style: expression(this.parentNode.currentStyle ? this.parentNode.currentStyle.fontStyle: ‘normal’);

    Notice camelized currentStyle properties – fontStyle, fontWeight and fontFamily.

  2. Thanks for explaining your reasoning Eric. I’m looking forward to the forthcoming ‘form elements’ post.

  3. Thanks, Eric! Very good read, can’t wait for the follow-ups.

  4. Priit: Ooooo… very interesting. It doesn’t validate, of course, but a lot of people won’t mind that. It’s definitely worth discussing. Thank you!

  5. Since you previously mentioned that Yahoo has already done this with their Reset CSS, it’s also worth mentioning that they consider font manipulation to be separate from the reset functionality. There is a separate Font CSS for cross-browser typographical normalization and control.

  6. My approach is not a hack, it is based on well known, well documented and stable IE enchancement. Besides, CSS parsers are told to ignore anything they don’t understand and never guess, so I see no point whatsoever in CSS validating, except for debugging purposes only. And so it is, only Iceweasel fills his console with pointless CSS “errors”, making developing cross-browser CSS and JS at the same time a big headache.

  7. I never said it was a hack, Priit. I just said it wouldn’t validate, which is a point of concern for many readers.

    I’m curious: is this how font family inheritance would be handled?

    font-family: expression(this.parentNode.currentStyle ? this.parentNode.currentStyle.fontFamily: '');

    I’m not sure what to fill in at the end, there. Any guidance would be appreciated!

  8. On IE6 of mine under W2K under Parallels – HTML tag’s fontFamily is Times New Roman. That on a page without any styles at all. By the way, fontWeigt is 400 and fontStyle is normal.

  9. I can’t believe they didn’t add support for inherit in IE 7. I know they had a lot else on, but guys, wow.

    Sigh. I think CSS will get really fun again in about 3 or 4 years when the next version of IE is established, and we can start actually using CSS 2.

  10. Eric,

    This whole series so far on the reset styles has been invaluable! Thanks for a very thought provoking thread here.

    And please consider this a +1 for the article on “… the weirdness inherent in form elements…”

  11. Eric, there’s just one thing I having trouble wrapping my head around. The common practice with reset styles is to zero things out, but then further down in the CSS file people end up styling their elements. For example, you end up with this:

    p { margin: 0; padding: 0; }
    …
    p { margin: 1em; }

    To me it would make more sense to stick the 1em margin on there right away:

    p { margin: 1em; padding: 0; }

    Is there some reason I’m missing to zero things first and then style them later?

  12. Eric, after a good night sleep.
    One must ask what do you really achieve with that resetting. You achive good, reasonable, default and REAL values to some properties. Zero is not just a blurry default, it is a hard cold real number. And I can use that number in some real layout. The ONLY exception here is font-family. There is NO hard cold real value I can rely, instead I absolutely MUST set that every time – I must choose something for a real layout. So, a deafult font should be set to something someone NEVER uses in real layout. Deafult font-family shall remind developer that he/she has forgotten to define the font-family for that tag. You should set font-family default to monospace.

    html { font-family: monospace}, as last definition ( and monospace for IE in that expression() )

  13. I’ve just been working on getting cross browser consistency, tackling the very same problems in this post.

    My current solution to avoid ruining input elements is to list all elements except input as zeroed padding and margins, but I’ll add this after as well:

    input {margin:0;}
    textarea {overflow-y:auto;}
    html {overflow-y:scroll;}

    Removing margins on inputs but not padding
    Overflow x/y CSS3 property supported by ie and mozilla and takes away the default scroll on ie textareas, and applied to html element makes mozilla behave with a constant window scrollbar allowance like ie has by default – in my opinion the better solution to make a smoother user experience accross a site.

    also I’m experimenting with a

    * {line-height:1;}

    declaration at the top of the style-sheet to try and equalize things.

  14. Thanks Eric! That makes a lot of sense. Your previous posts felt like entering the middle of a conversation.

  15. The Pirita CSS JavaScript generates errors in IE [tested in only IE7 and IE6]:

    The code used:

    font-style:expression(this.parentNode.currentStyle ? this.parentNode.currentStyle.fontStyle: "normal");
    font-weight:expression(this.parentNode.currentStyle ? this.parentNode.currentStyle.fontWeight: "normal");
    font-family:expression(this.parentNode.currentStyle ? this.parentNode.currentStyle.fontFamily: "monospace");}

    Referenced within a conditional commented IE style sheet; an XHTML DTD with an application MIME of xhtml+xml, ASP.NET file.

    Why, I have no idea.

  16. Hi Eric,

    As an amateur, the “inherit” thing has confused me forever. Your example with the “em” inside the header that doesn’t inherit the bold may finally have made it understandable for me. (So, an element that inherits some characteristics inherits it when it’s within another set of tags in the html, not from the initial declaration within the css!) Thanks.

    What do you think about declaring a separate Internet Exploder Only CSS in the html file. How would it work with your method? I’m thinking it would still be good to have all the hacks for “has layout” confiined to one Exploder 6 CSS.

  17. Hi Eric and everyone else, I was just wondering…for which elements is the universal selector (*) reset undesirable? If it”s only form elements that are negatively affected, is it possible to do something like

    form * {margin:auto; padding:auto;}

    OR

    select, option, etc, etc {margin:auto; padding:auto;}

    I just really like the simplicity of * {margin:0; padding:0;} so I”d rather keep it if I can instead of using the huge alternative reset method.

  18. I think it’s great that this reset is being addressed, and I now am learning *has* been addressed by others too. Makes for a smoother ride.

    I bet I am missing something here w.r.t the font-weight: inherit; issue above, but my knee-jerk reaction was to go to my new shiny baseline.css and add the following large rule:

    html em, body em, div em, span em, applet em, object em, iframe em, h1 em, h2 em, h3 em, h4 em, h5 em, h6 em, p em, blockquote em, pre em,
    a em, abbr em, acronym em, address em, big em, cite em, code em, del em, dfn em, em em, font em, img em, ins em, kbd em, q em, s em, samp em,
    small em, strike em, strong em, sub em, sup em, tt em, var em, dd em, dl em, dt em, li em, ol em, ul em, fieldset em, form em, label em, legend em, table em, caption em, tbody em, tfoot em, thead em, tr em, th em, td em {
    font-style: italic;
    }

    This meant if I included the em tag anywhere, e.g. an h1, it *would* have it’s effect. This relates to an earlier comment:
    http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/#comment-133701

  19. ‘auto’ doesn’t mean ‘browser default’; unfortunately there isn’t anything in CSS that means ‘return to default’. So no, you’re stuck with styling each element individually if you want to leave form elements alone.

  20. Interesting reading, to be honest I’ve let browsers go to defaults in the main body of text while tightly styling functional elements.

    Forms I’ve found to be disapointing as regards styling with css in general and would definately be intereting to find out why this is rather than just coping with it.

    Is there a technical guide anywhere to the main browsers default preferences?

    i.e. Header 1 – Firefox – margins: W X Y Z, padding W X Y Z

  21. Scott, it’s easier for most people to create a block of styles that zero everything out and then build from that foundation. That said, there’s nothing wrong with people grabbing the reset styles, modifying them to their own personal defaults, and using that as an ongoing foundation.

    Pete, the * {line-height: 1;} can lead to problems; see the comments on earlier posts in the thread for the reasons why.

    Jeff, that might work if auto meant “block inheritance” or “use browser default”, but it doesn’t. Besides, padding doesn’t accept auto as a value. It default to 0 in CSS, but browsers can (and do) have other values defined for certain elements. Table cells, for example, are fairly widely set to have a padding of 2 pixels.

    Alan, that would definitely work, but it’s also adding a lot of complexity to the baseline—not for the browser, but for the author who has to understand what’s going on. Since a lot of people are already pushing back against the big grouped selector I did write, I think I’m going to avoid bigger ones like that. No reason you can’t use it in your own reset styles, though!

    Steve—there isn’t a detailed guide of which I’m aware. Anyone can look in html.css and so forth to see what Firefox does, and I believe one can dig up Opera’s default style sheet as well, but IE/Win doesn’t have a style sheet as such. Its default behavior is internally encoded, and so far as I’m aware, nobody has ever pulled out all its defaults and figured out an equivalent style sheet to describe its behavior.

  22. Steve: I collected some browsers’ default css on accessify forum

    I mailed Chris Wilson to ask for the default IE styles, but got no response. Wonder if Molly would oblige?

  23. there you go, IE6.0.2800.1106, W2K, using Mike Hall’s excellent DomViewer

    accelerator = false
    backgroundAttachment = scroll
    backgroundColor = transparent
    backgroundImage = none
    backgroundPositionX = 0%
    backgroundPositionY = 0%
    backgroundRepeat = repeat
    behavior =
    blockDirection = ltr
    borderBottomColor = #000000
    borderBottomStyle = inset
    borderBottomWidth = medium
    borderCollapse = separate
    borderColor = #000000
    borderLeftColor = #000000
    borderLeftStyle = inset
    borderLeftWidth = medium
    borderRightColor = #000000
    borderRightStyle = inset
    borderRightWidth = medium
    borderStyle = inset
    borderTopColor = #000000
    borderTopStyle = inset
    borderTopWidth = medium
    borderWidth = medium
    bottom = auto
    clear = none
    clipBottom = auto
    clipLeft = auto
    clipRight = auto
    clipTop = auto
    color = #000000
    cursor = auto
    direction = ltr
    display = inline
    filter =
    fontFamily = Times New Roman
    fontSize = 12pt
    fontStyle = normal
    fontWeight = 400
    hasLayout = true
    height = auto
    imeMode =
    layoutFlow = horizontal
    layoutGridChar = none
    layoutGridLine = none
    layoutGridMode = both
    layoutGridType = loose
    left = auto
    letterSpacing = normal
    lineBreak = normal
    lineHeight = normal
    listStyleImage = none
    listStylePosition = outside
    listStyleType = disc
    margin = auto
    marginBottom = auto
    marginLeft = auto
    marginRight = auto
    marginTop = auto
    minHeight = auto
    overflow = scroll
    overflowX = auto
    overflowY = scroll
    padding = 0px
    paddingBottom = 0px
    paddingLeft = 0px
    paddingRight = 0px
    paddingTop = 0px
    pageBreakAfter = auto
    pageBreakBefore = auto
    position = static
    right = auto
    rubyAlign = auto
    rubyOverhang = auto
    rubyPosition = above
    scrollbar3dLightColor = #d4d0c8
    scrollbarArrowColor = #000000
    scrollbarBaseColor = #000000
    scrollbarDarkShadowColor = #404040
    scrollbarFaceColor = #d4d0c8
    scrollbarHighlightColor = #ffffff
    scrollbarShadowColor = #808080
    scrollbarTrackColor =
    styleFloat = none
    tableLayout = auto
    textAlign = left
    textAlignLast = auto
    textAutospace = none
    textDecoration = none
    textIndent = 0pt
    textJustify = auto
    textJustifyTrim =
    textKashida = 0pt
    textKashidaSpace = 0pt
    textOverflow = clip
    textTransform = none
    textUnderlinePosition = auto
    top = auto
    unicodeBidi = normal
    verticalAlign = auto
    visibility = inherit
    whiteSpace = normal
    width = auto
    wordBreak = normal
    wordSpacing = normal
    wordWrap =
    writingMode = lr-tb
    zIndex = 0
    zoom = normal

  24. Interetsing, Priit—but on what element did you view the DOM, and what about all the other elements? (And please don’t post a pull DOM dump for every element in a document in a comment; put up a page and link to it instead. Thanks!)

  25. Feel free to explore: http://bkp.ee/dom.html

    Concerning IE, document.childNodes, node 1 is HTML

  26. Pingback ::

    Filter for 19/4 2007 - Felt

    […] Eric Meyer: Reset Reasoning What’s all the fuss whit this Reset stuff? […]

  27. Can someone elucidate on this DOM stuff? I looked at Priit’s page – but do I have to look using IE to get the proper list? Was I seeing Firefox’s settings? Being on a Mac I don’t have IE. Is the assumption that an unstlyed page, viewed in IE and explored using the DOM will list all the defaults?

  28. When I open a blank page in IE6, the default values for html and body are:

    fontFamily = Times New Roman
    fontSize = 12pt
    fontStyle = normal

    These values were found using the IE Developer Toolbar.

  29. Pingback ::

    Hi, my name is Al » Resetting Browsers

    […] banter so it may appear gibberish. Anyway, I’ve just read through Eric Meyer’s post on Reset Reasoning. At work I have been playing with this idea for a while now, but I have run into various problems. […]

  30. Eric said, “This is why so many people zero out their padding and margins on everything by way of the universal selector. That”s a good start, but it does unfortunately mean that all elements will have their padding and margin zeroed, including form elements like textareas and text inputs.”

    Eric, please forgive my CSS ignorance, but I would have thoughtt it makes more sense to zero *everything* and then add them where needed (e.g. textareas and text inputs)?

  31. Pete b, nice touch with html overflow-y rule, but overflow-y is still not valid CSS property. If you care, the same effect could be achieved with:
    html { height : 100%; margin-bottom: .01em; }

  32. Pingback ::

    Ryan Hamilton » Blog Archive » Reset

    […] sheet. There’s been a bit of discussion about them lately around the web, such as over at meyerweb. This is something I’ve been wanting to do for a while now, and I’ve finally kicked […]

  33. Pingback ::

    On Using Reset Styles : Design by CSS

    […] styles. So what are reset styles and why do we need to use them? For that read Eric’s post, Reset Reasoning. In this post, Reset Reloaded, Eric lists exactly what his reset styles are so you can use […]

  34. Pingback ::

    Links of Interest · All the Billion Other Moments

    […] of Interest Reset ReasoningEric Myer’s explanation of why you would want to reset styles across […]

  35. Pingback ::

    Huh? » Blog Archive » Eric’s Archived Thoughts: Reset Reasoning

    […] Eric’s Archived Thoughts: Reset Reasoning also: […]

  36. Pingback ::

    CSS Reset | Building better than beta.

    […] Eric Meyer […]

  37. Pingback ::

    Reset de estilos — RafaelMarin.net

    […] Reset reasoning – Eric Meyer […]

  38. Pingback ::

    historicpress.com » Blog Archive » Hello world!

    […] 37 Responses» […]

  39. Pingback ::

    Space Ninja » Blog Archive » An Event Apart Seattle 2007

    […] Eric started the first day with “Secrets of the CSS Jedi,” which was all about thinking outside the box with CSS. He illustrated that the default behavior of all HTML elements is defined by the browser, and each browser defines things slightly differently – especially font handling – which is why he advocates the use of a reset stylesheet. […]

  40. Pingback ::

    出家如初，成佛有余 » blueprint–css framework研究

    […] Reset Reasoning：http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/ […]

  41. Priit, am I missing something, or does this not work in IE 6?

    Marko, overflow-y is valid CSS 3, you were likely validating as CSS 2.

  42. Hi Eric! I’am wrong o you don’t use the reset on your web? why?

  43. Pingback ::

    Intenta » Blog Archive » CSS inicial de Eric Meyer

    […] Por defecto, todos los elementos HTML tienen unos atributos CSS predeterminados. Estos estilos, generalmente son los ocasionantes de algunos de los problemas más comunes a la hora de verse bien en todos los navegadores. Una opción es resetear los estilos. Eric Meyer nos aporta su hoja de estilos inicial así como algunas razones que le han llevado a utilizarla. La razón principal es que todos los navegadores tienen presentaciones preestablecidas y todas ellas diferentes. […] Por ejemplo, algunos navegadores sangran las listas con un margen izquierdo, mientras otros usan el padding… […] Pero hay todo tipo de inconsistencias, unas más sutiles que otras. Los títulos tienen márgenes superiores e inferiores ligeramente diferentes, las distancias de sangría son diferentes, y así sucesivamente. Aún algo tan básico como la altura de las líneas varía de un navegador a otro—lo cual puede tener efectos en la altura de los elementos, las alineaciones verticales y en general todo el aspecto. Seguir leyendo »» […]

  44. Pingback ::

    CSS-Prolog = Sinnvoll ?! - Seite 8 - XHTMLforum

    […] sind ausgenommen — Eric’s Archived Thoughts: Reset Reasoning. Es lohnt sich, Eric Meyers Artikel ganz zu lesen und auch den Links darin zu folgen. Auch in […]

  45. Pingback ::

    It’s Samuel » Blog Archive » CSS Reset, A Quick Introduction

    […] Meyer writes about this subject in greater detail, and his ‘Reset Reloaded‘ has served me as a CSS […]

  46. Pingback ::

    blueprint--css framework研究 | 孙飞龙博客

    […] Reset Reasoning：http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/ […]

  47. Pingback ::

    Adding A Reset Stylesheet Can Help Make Your Blog Look Best In More Browsers | Make Money Online | Blogging tips, tricks, and news - Mark Givens dot Com

    […] Erik Meyer […]

  48. Pingback ::

    mStudiosTALK | CSS Tools: Reset CSS

    […] line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you’re interested. Reset styles quite often appear in CSS frameworks, and the […]

  49. Pingback ::

    CSS: The Universal Selector | Alpha Blog Designs

    […] I still think it’s the simplest, best option. However, Eric Meyer has a great article on why he does not use the universal selector to reset everything, and a follow up article which explains what he does instead, so I might have to rethink my […]

  50. Pingback ::

    CSS Naked Day 2008 | jason friesen {dot} ca

    […] site should still function and make sense, even without any visual design whatsoever (well, mostly). Why? Because with the increasing freedom available in how people access the internet, your […]

  51. Pingback ::

    Fogli di stile con maggiore compatibilità e consistenza tramite il reset del css » Programmazione Web - il Blog open degli sviluppatori del web!

    […] http://meyerweb.com/eric/tools/css/reset/ http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/ (No Ratings Yet)  Loading …     Leggi Tutto    […]

  52. Pingback ::

    New Moves in CSS

    […] coined the term in 2007 but the concept has been around longer. Based on the reasoning that “all browsers have presentation defaults, but no browsers have the same defaults,” the CSS Reset creates a common baseline between browsers, reducing inconsistencies so that the […]

  53. Pingback ::

    Global CSS Reset Styles (Ultimate Collection) | IndoProTech.com

    […] discussed in the original article, CSS guru Erik Meyer set forth to create a universal set of reset styles. This is heavy-duty stuff, […]

  54. Pingback ::

    Gilles Maes » Blog Archive » The ten commandments of HTML & CSS

    […] shall reset the right way. Eric Meyer was probably one of the first to encourage people to use something else than * {margin:0;padding:0;} for browser resetting and, […]

  55. Having :focus seems to create problems. I’m not sure if I’m the only one facing issue and yet looking for the reasons for styling :focus

  56. Pingback ::

    onebywon » Consistency across all browsers

    […] across different browsers. Eric Meyer has written some excellent articles on the subject. His reasoning for a CSS reset is a good place to start reading. The Yahoo User Interface Library offers a quick easy solution for […]

  57. Google Code has some tweaks not found in Eric’s model (v1.1), then there’s the mobile intro (v1.2), and the javascript attacks on visibility (v1.3), and intro to remote access to style blocks using ruby, php (v1.4) — all credos to Eric and the current W3C smoke screen. Reset works and here’s my current workshop.

    /* CSS RESET (commented) */
    /* v1.0 20080212 — Eric Meyer */
    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, b, u, i, center,
    dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;
    border:0;outline:0;font-size:100%;
    vertical-align:baseline;background:transparent;}
    body{line-height:1;}
    ol, ul{list-style:none;}
    blockquote, q{quotes:none;}
    blockquote:before, blockquote:after, q:before, q:after{content:”;content:none;}
    /* remember to define focus styles! */
    :focus{outline:0;}
    /* remember to highlight inserts somehow! */
    ins{text-decoration:none;}
    del{text-decoration:line-through;}
    /* tables still need ‘cellspacing=”0″‘ in the markup */
    table{border-collapse:collapse;border-spacing:0;}
    /* CSS RESET (uncommented) */
    /* v1.4 20081001 — Mark Stewart, Riverleaf */
    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, rb, rbc, rp, rt, rtc, pre, b, u, i,
    center, dl, dt, dd, ol, ul, li, span, var, param, ruby,
    fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
    margin:0;padding:0;border:0;outline:0;
    font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;
    vertical-align:baseline;background:transparent;}
    ol, ul{list-style:none;}
    table{border-collapse:collapse;border-spacing:0;}
    ins{text-decoration:none;}
    del{text-decoration:line-through;}
    input, textarea{margin:0;}
    blockquote, q{quotes:none;quotes:”” “”;}
    blockquote:before, blockquote:after, q:before, q:after{content:”;content:none;}
    caption, th, td{text-align:left;font-weight:400;}
    :focus{outline:0;}
    ins{text-decoration:none;}
    del{text-decoration:line-through;}
    table{border-collapse:collapse;border-spacing:0;}
    a{outline:none;}
    a img{border:none;}
    html body{line-height:1;background:transparent;opacity:none;outline-width:0}
    * html {display:inherit;}
    html body:after{content:”.”;display:block;height:0;clear:both;visibility:inherit;}
    * html{height:auto;azimuth:inherit;}
    html body{height:inherit;}

  58. Hi Eric,
    This is my version: base.css.
    You have a link. :-)

  59. how about adding

    img {
    border: 0;
    }

    to the reset.css?

    i use this on every project to stop the nasty default border when an image is inside an tag.

  60. Pingback ::

    css reset | 西风坊

    […] css reset ？简单讲就是把基本的浏览器默认css给重新覆盖掉。因为各大浏览器的样式表实在是差别太大了，（有兴趣的同学可以在firefox地址栏中敲“resource://gre/res/html.css”查看firefox的默认样式表）所以我们像个办法在开始写css之前把一些常见的样式差异都处理掉。(更好的解释请看 reset reasoning 这篇文章)比如我们很常见的body{padding:0,margin:0}就是一个简单的样式重置。 […]

  61. Pingback ::

    blueprint css framework at cssframework

    […] Reset Reasoning：http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/ […]

  62. This also needs adding to remove inconsistent padding weirdness in Firefox —

    button::-moz-focus-inner { border: none }

  63. Pingback ::

    Using a CSS Reset File | Jon Karna's Blog

    […] class so that I can use it outside of the designated content area for the cms. I really enjoyed the collaboration that went into Eric Meyer’s file also. html, body, div, span, applet, object, iframe, h1, h2, […]

  64. Pingback ::

    960 Grid System | Tarek Shalaby

    […] file. If you haven’t been resetting your CSS when developing websites, that you should read this article to know why you should. But basically, resetting avoids a lot of browser incompatibility […]

  65. Pingback ::

    reset.css muammas

    […] pek inanmamam. Eger Yahoo ve Eric Myer tarafindan tavsiye ediliyor olmasi. Nedenine gelince [Link] […]

  66. Pingback ::

    Bermain CSS #1 | eattutsmagazine

    […] Populer , Eric Meyer adalah seorang CSS GURU ( master ) yang membuat CSS Reset dengan berberapa alasan salah satunya adalah tidak semua browser memiliki sifat yang sama . Dapat dilihat disini […]

  67. Pingback ::

    Reset de CSS @ Marcelo Pedra

    […] y tamaños de fuente de encabezados… El razonamiento general detrás de esto puede leerse en este post de Meyerweb. Los estilos de reset suelen aparecer en frameworks de […]

  68. Pingback ::

    Powerful and Userful CSS Tools to saving your time – Part III

    […] line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you’re interested. Reset styles quite often appear in CSS frameworks, and the original […]

  69. Pingback ::

    The Lean Mean CSS Trimming Machine — Website Design UK

    […] I still think it’s the simplest, best option. However, Eric Meyer has a great article on why he does not use the universal selector to reset everything, and a follow up article which explains what he does instead, so I might have to rethink my […]

  70. Pingback ::

    CSS Techniques I Wish I Knew When I Started Designing Websites - Noupe

    […] Eric Meyer’s Resets and the reasoning behind them […]

  71. Pingback ::

    CMI Web Studio Blog » Reseting CSS Styles

    […] discussed in the original article, CSS guru Erik Meyer set forth to create a universal set of reset styles. This is heavy-duty stuff, […]

  72. Pingback ::

    Sam Doyle » CSS Reset – Reduce Browser Inconsistancies

    […] To see the reasoning behind the need for a css reset, read here. […]

  73. Pingback ::

    10 Tips for Building Cross-browser Websites « HUE Designer

    […] file). Eric Meyer has put together a bunch of CSS rules to do just that. He also lists his reasons for using CSS resets. Once you’ve included these rules at the start of your style sheet, you can be reasonably […]

  74. Pingback ::

    Reset Stylesheets

    […] up a new website design to turn it into a template, one of the first things I do is to implement a reset stylesheet. The ideal reset stylesheet will essentially turn off all of the proprietary default CSS properties […]

  75. Pingback ::

    CSS Issues Firefox vs. IE | Dan Chase Web Consulting

    […] 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 as to my troubles with the new template design. I should have known […]

  76. You reset stylesheet is still the best around. I still prefer yours to the one used by YUI.
    It would be nice if osme day you finde the time to add some more comments in the reset sheet to explain the reasons for the choices you made.
    For instance: why blockquote quotes :none?, why vertical-align: baseline?, why outline: 0? why background: transparent and not #ffffff?

    Thanks!

  77. Pingback ::

    Reset CSS – Optimize for iPhone - | JazonPress

    […] other than Explorer. (You can see them in the “reloaded” post.) I know, I know, I already defended that practice: [The inherit] effects, as seen in my development environment, will still serve the purpose of […]

  78. Hi Eric,

    I have been doing some research on CSS, and discovered ‘CSS Frameworks, Blueprint CSS + Reset’. I noticed CSS framework has:
    * typography.css for basic typographic rules,
    * grid.css for grid-based layouts or
    * layout.css for general layouts,
    * form.css for basic form styling,
    * general.css for further general rules

    Does your CSS reset cover all these aspects?

    Thanks in advance
    CHEERS :)

  79. Eric,

    I’d like to propose that the :focus entry is revised…

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    Removing the outline is all well and good but the big problem is that developers rarely provide an alternative, and for people like me who rely on keyboard navigation this essentially renders many sites useless. Every time I find such as site it makes me think “Eric Meyer reset used!”.

    Also I would question as to whether removing the outline is a genuine “reset” or just designer vanity?

    Would appreciate your thoughts.

  80. Rob, having designer vanity would require that I be a designer.

    The comment in the CSS was meant as a reminder to anyone who used the reset for themselves. I mean, it explicitly says to remember to define focus styles! As in, change this value to have visible outlines. I completely failed to anticipate two things:

    1. That so many would use the reset.
    2. That so few would read it and pay attention to the notes within.

    That said, the coming revision of the reset will either drop that rule or modify it to something like 3px dashed red to drive home the point I was trying to make. More likely it’ll be dropped.

  81. Eric – thanks for the reply. It’s great to know you’re “on the case” with it.

    Happy Xmas!

  82. Pingback ::

    The Pros And Cons Of CSS Resets | Van SEO Design

    […] problem is there isn’t a standard for what those defaults should be. While browsers with the same rendering engine will use the same defaults, two different rendering […]

  83. Pingback ::

    Turbo Plone theming with XDV/Diazo | Follia Digitale

    […] your theme has a reset.css but you want Plone's public.css styles for content editing, it might help to use […]

  84. Pingback ::

    How To: Cross-Browser CSS

    […] approach to cross-browser styling. Call me a late bloomer but Eric actually blogged about this idea way back in 2007 (some 4 years ago) before I read it in […]

  85. Pingback ::

    Coding A Portfolio Site | Design In Flux

    […] I attach a reset file (if you do not know what a reset file is, please check out this great link). I have been using Eric Meyer’s reset file for a long time, […]

  86. Pingback ::

    About the CSS Reset File (reset.css) | Mathverse Blog

    […] Another good reason for resetting styles has to do with regulating browser inconsistencies. Eric Meyer wrote an article on this. […]

  87. Pingback ::

    Background image looks different - DesignersTalk

    […] solution though. The different browsers have different default CSS settings, read an article here: Eric's Archived Thoughts: Reset Reasoning Get the reset code here: CSS Tools: Reset […]

  88. This is the CSS reset I use in most of my projects:

    http://www.htmltweaks.com/Reset_Browser-Specific_CSS_Styles

    Works quite well for me, but I might have to add a couple styles from your Reset CSS Post, like line-height, font-styles and the HTML5 display-role reset for older browsers.

  89. Pingback ::

    HTML5 Digital Classroom » Life as an MIS student and tech enthusiast

    […] Eric Meyer – Reset Reasoning […]

  90. Pingback ::

    Daily Status – July 7 – The Early Worm | Everyday Achievements

    […] leading me to read about clearfix techniques, CSS attribute selectors, and the concept of CSS reset. Yikes. Down the rabbit […]

  91. Pingback ::

    Some Thoughts on CSS | iQuest Blog

    […] controversial subject is resetting CSS. The goal of a reset style sheet is to reduce browser inconsistencies in things like default line […]

  92. Hi, shouldn’t be the summary tag also added to the html5 display: block rule ? as defined here it should …

  93. Pingback ::

    Why reset CSS? | Here's - nnish! Nishanth Anil

    […] Note: Remove the <pre> tag from the above code while pasting. See Original Source here. And here’s an elaborate reason for CSS reset from Meyerweb. […]

  94. Pingback ::

    How to Customize Twitter Bootstrap’s Design in a Rails app - SitePoint

    […] reset.less – contains the reset styles to create a clean, cross-browser foundation to use, based on Eric Meyer’s work from 2007. […]

  95. I suggest an addition :

    textarea {
    resize: none;
    }

    :)

  96. Pingback ::

    CSS-wide Keywords and All selectors « geedew

    […] a time we struggled to `reset` browser styles. `Resetting` has become the first thing many applications do. Resetting also evolved into normalizing and then […]

  97. Pingback ::

    Optimizing CSS for your WordPress theme | MixedPress

    […] heights, margins and font sizes of headings, and so on. A more detailed explanation can be found here. For far too long, we have been using Eric Meyer’s stylesheet, the issue with this particular […]

  98. I suggest to remove hgroup from the Eric Meyer’s CSS Reset tool. http://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html

  99. Pingback ::

    Mind the Gap: How Technical Frameworks Create Alignment

    […] fresh with your own styles. So already you’re using a small, but powerful CSS framework.  Eric Meyer’s Reset can be traced back to 2007. Eight years ago… do you even know how long that is in internet […]

  100. Pingback ::

    1.0 reset (style.css – Twenty Fifteen) | Kenanigans

    […] links to a 2007 blog post that spelled out his rationale for his theory behind his Reset CSS, so I’ve linked it here for your own […]

  101. I am wondering about the order of

    font-size: 100%;
    font: inherit;

    What is purpose of setting the font to a certain size first and overwrite it with the inherit. Doesn’t make it impossible to begin with a certain font size. For example, I wanted to start with 10px and the only way to do it was to switch the places of the above mentioned rows. Excuse me if I am missing something essential, I am just a newbie in the web development :)

  102. Pingback ::

    Deconstructing CSS 3: Making of the CSS 3 solar system animation | Independent Software

    […] This is called a CSS reset and it gives you a clean slate to work with. Or, as Eric Meyer who coined the term CSS Reset puts it, “The goal of a reset stylesheet is to reduce browser inconsistencies in things like […]

  103. Ten years later, and it may be time for a small update to this tried-and-test CSS reset?

    https://github.com/shannonmoeller/reset-css/issues/12

  104. Pingback ::

    Un coup d'œil sur les resets CSS en 2018 | Integrateur Html senior, développeur Front-end et développeur WordPress et Woocommerce freelance en Bretagne.

    […] Meyer a écrit un article sur le raisonnement derrière les resets de CSS en 2007, ce qui, je pense, est toujours […]

  105. Why not setting the “main” tag to display block as well?

  106. Martin: Because when I last updated it in 2011, there was no main tag to blockify! I have an update sitting on my SSD that I should probably publish, though I sometimes think it might not be relevant—it feels to me like resets have mostly been eclipsed by reboots like normalize.css, as I’d always hoped would happen, generally speaking.

  107. blockquote:before, blockquote:after,
    q:before, q:after {
    content: ”;
    content: none;
    }

    I don’t know why two content properties exisit at the same time

Add Your Thoughts

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>

if you’re satisfied with it.

Comment Preview