The History of CSS Resets

Dec 2 2010 by Michael Tuck | 48 Comments

The History of CSS Resets

When artists begin a new painting, they don’t immediately reach for the cadmium red and the phthalo blue. They first prime the canvas. Why? To ensure that the canvas is smooth and has a uniform white hue.

Many web designers prefer to use a CSS "reset" to "prime" the browser canvas and ensure that their design displays as uniformly as possible across the various browsers and systems their site visitors may use.

This is Part 1 of a three-part series of articles on the topic of CSS resets.

What Is CSS Reset?

When you use a CSS "reset," you’re actually overriding the basic stylesheet each individual browser uses to style a web page. If you present a website with no CSS whatsoever, the site will still be styled, to a very limited extent, by the browser’s default stylesheet.

The problem is that every browser’s stylesheet has subtle but fundamental differences. By using a CSS reset, you’re setting the styles of the fundamental CSS elements to a baseline value, thusly rendering the browsers’ varying style defaults moot.

Some of the most common elements that are styled differently among different browsers are hyperlinks (<a>), images (<img>), headings (<h1> through <h6>), and the margins and padding given to various elements.

What Is CSS Reset?

So which browser is right, Firefox or IE? It doesn’t matter. What does matter is that the spacing in between your paragraphs and other elements will look dissimilar if you don’t set a style for a paragraph’s margin and padding. — Jacob Gube, Founder of Six Revisions

It might be useful to peruse this chart showing the various browser defaults. Unfortunately, it doesn’t go back to IE6 (which causes so much havoc among stylesheets).

Who Uses Resets?

According to a 2008 poll by Chris Coyier of CSS-Tricks, a solid majority of web designers use one variation or another of a reset. (Coyier’s parameters were fairly broad, possibly accounting for the heavy support of resets in his poll results.)

The poll, which did not purport to be particularly scientific or comprehensive, gave the following results:

  • 27% use some version of Eric Meyer’s reset
  • 26% indicated they didn’t know what a reset was
  • 15% use a "hard reset," or some iteration of a reset using the universal selector
  • 14% use a reset as part of a larger CSS framework
  • 13% use their own custom reset
  • 4% "purposefully do not use one"

Coyier was not surprised with Meyer’s reset coming in first in the polling, calling it "popular, thoughtful, and effective." Somewhat whimsically perhaps, Meyer replied in the comments: "Huh. I actually didn’t expect that at all; I figured the framework resets would win by a country mile. Now the pressure’s totally on! Arrrrgh!"

Early Days of CSS Reset

As far as I can tell, the first mentions of anything we would later consider to be a "reset" came in late 2004, with two very different approaches.

undohtml.css

The first was legendary developer Tantek Çelik’s UndoHTML.css stylesheet, which "strips the browser varnish" from a number of elements.

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */


/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with 
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }

/* de-italicize address */
address { font-style:normal }

/* more varnish stripping as necessary... */

In an October 2010 email to me, Çelik confirmed he was most likely first out of the gate. "I’m pretty sure I invented/proposed/shared the concept of resetting CSS (though not by that name) in my blog post of 2004," Çelik said.

Çelik’s reset removes link underlines, borders from linked images, and sets the font size to 1em for headings, <code>, and paragraphs. In 2009, author and designer Jason Cranford Teague described Çelik’s reset as "part sublime and part madness," for reasons that elude me.

"hard reset"

The second was web designer and developer Andrew Krespanis’s "hard reset" to overcome browser defaults for margins and padding (in a snippet he called "the tiny addition I threw in at the last minute").

* {
    padding:0;
    margin:0;
}

When asked about the hard reset, Krespanis mused: "That single line of CSS kick-started my career in a big way, which in retrospect is amusing verging on absurd."

"Certainly no one suggested the reset idea to me, it was something I first suggested to CSS beginners on codingforums.com in early 2004 who defended their over-use of superfluous divs by the confusing rendering caused by default margins and padding on paragraphs, blockquotes, lists, fieldsets, etc." Krespanis said. "I also used it whenever providing examples to people, but wasn’t using it for sites until I started suggesting beginners do so. Eric Meyer was talking about a similar concept at the time, only his was more focused on quality sensible defaults to override those set by [browser] makers and he has continued to develop his over the years since."

Really Undoing html.css

Çelik’s reset quickly drew the attention of CSS guru Eric Meyer, who used Çelik’s work as a jumping-off point for his first attempt at a global reset, as well as a follow-up almost immediately thereafter. In the same conversation I had, Çelik said, "About a week and a half later, Eric Meyer went into a lot more detail on his blog and expanded on my work."

The Differences

Perhaps because Krespanis’s method was so simple and so basic (only addressing margins and padding, as opposed to Çelik’s and Meyer’s far more thorough reset), it seemed to attract more attention off the bat. However, this is a simplistic observation. Judging from the comments in both Meyer’s and Krespanis’s blogs, a number of people were considering something along these lines at around the same time; it’s also worth noting that several commenters in Meyer’s blog discussed the margin/padding reset weeks before Krespanis posted about it (Krespanis himself noted the technique on Meyer’s blog before posting on his own).

As the man said, it steamboats when it’s steamboat time. The idea of some sort of CSS reset had become, at least for many designers, a necessary one.

In 2004, Krespanis wrote:

"A big part of dealing with cross-browser differences is accounting for the default property values of elements in each browser; namely padding and margin. I use the following declaration in every new site I design; it has saved me many hours of nitpicking.

* {padding:0; margin:0;}

It doesn’t seem like much at first, but wait till you look at your mildly styled form in 11 browsers to find the positioning identical in all of them; or your button-style lists are perfect the first time, every time.

The difference between Çelik’s and Meyer’s early efforts, and Krespanis’s "afterthought," is, of course, Krespanis’s use of the * (which in CSS, is the universal selector that matches all elements in a web page).

Moving Away from the Universal Selector "hard reset"

Like a drop of antimatter, that single * had widespread effects. As Krespanis went on to note, the use of the universal selector canceled the padding and margin of every element in the page, sometimes to the detriment of the individual design, and it often fouled up forms and lists.

Today, it’s recognized that using the universal selector has repercussions on web page performance because of the resource tax involved in selecting and assigning styles to all elements. Co-creator of the Firefox browser, David Hyatt, advises developers to make sure "a rule doesn’t end up in the universal category," as a best practice for writing efficient CSS.

Russ Weakley, CSS book author and co-chair of the Web Standards Group, outlines a downfall of the "hard reset" method: "Once you have removed all margin and padding, this method relies on you specifically styling the margins and padding of each HTML element that you intend to use."

It didn’t take long for people to start modifying the original "hard reset" to something more specific. Steve Rider, for example, posted what he called a "no assumptions" reset on Meyer’s blog, tweaked to his own preferences:

body {margin: 0px; padding: 8px;}
body, div, ul, li, td, h1, h2, h3, h4, h5, h6 {font-size: 100%; font-family: Arial, Helvetica, sans-serif;}
div, span, img, form, h1, h2, h3, h4, h5, h6 {margin: 0px; padding: 0px;
background-color: transparent;}

Web developer Seth Thomas Rasmussen tossed his hat in the ring, where he gives some padding and margins back to selected elements:

h1, h2, h3, h4, h5, h6, ul, ol, dl, table, form, etc. {margin: 0 0 1em 0}

And it didn’t take long for Krespanis to come up with his own modification:

* {padding:0; margin:0;}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }

Between the wide-ranging resets from Çelik and Krespanis, the more "targeted" resets, and the objections to the sometimes-overwhelming changes the resets made, the games were on. Before long, people were trying all kinds of different resets and posting about it.

Lost and Found: Faruk Ateş and initial.css

In July 2005, Web developer Faruk Ateş posted his initial.css on the now-defunct Kurafire.net. In subsequent discussions on Meyer’s and other design blogs, a few commenters recalled Ateş’s efforts. Through the magic of the Wayback Machine, his initial.css reset can be examined. Like others, Ateş revised his reset after discussion and commentary was received.

Ateş said he had been using his reset for a year or so in his client designs, with little or no ill effect. I believe that his was the first truly "global reset" to become publicly available, though he said in a 2010 email to me that he wasn’t at all sure that was the case. In that same exchange, Ateş wrote: "It was also deliberately kept pretty small, because I didn’t like the idea of a huge ton of CSS to reset everything in the browser, when most every site I was building at the time didn’t actually use 50-60% of the less-common elements that were being reset. … [W]here Eric did the more usable-under-any-circumstances version, exhaustive and very complete (for its time), mine was more of the ‘hey, just these handful of styles have made my life as web developer easier’ and I shared them because, well, why wouldn’t I?"

/* =INITIAL 
   v2.1, by Faruk Ates - www.kurafire.net
   Addendum by Robert Nyman - www.robertnyman.com */

/* Neutralize styling: 
   Elements we want to clean out entirely: */
html, body, form, fieldset {
        margin: 0;
        padding: 0;
        font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}

/* Neutralize styling: 
   Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
        margin: 1em 0;
        padding: 0;
}

/* Apply left margin:
   Only to the few elements that need it: */
li, dd, blockquote {
        margin-left: 1em;
}

/* Miscellaneous conveniences: */
form label {
        cursor: pointer;
}
fieldset {
        border: none;
}
input, select, textarea {
        font-size: 100%;
}

His reset included:

  • Setting the html, body, form, fieldset elements to have zero margins and padding, and their fonts to 100%/120% and a Verdana-based sans-serif font stack
  • Setting the h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address elements to have a 1em vertical margin, no horizontal margin, and no padding
  • Giving a 1em left margin to the li, dd, blockquote elements
  • Setting the form label cursor to pointer
  • Setting the fieldset border to none
  • Setting the input, select, textarea font sizes to 100%

As others noted before, and Meyer noted afterward, Ateş eschewed the universal selector because of its detrimental effect on forms (though it was in his first iteration).

For whatever reason, Ateş’s reset received a good bit less attention than some of the others, though it’s clear that many elements in the YUI and Meyer resets that followed appeared first in Ateş’s coding.

In October 2010, Ateş wrote that he never rewrote his reset after the single revision: "Any additions I would have made to it would’ve made it quickly grow in size, at which point people could’ve and should’ve just used Eric’s more comprehensive one. Eventually I stopped using my own initial.css and nowadays I usually copy from YUI or, more recently, the HTML5 Boilerplate, which contains parts from both YUI and Eric Meyer’s latest reset." In 2007, Web designer Christian Montoya provided an updated version of Ateş’s reset that he relies on for his own work.

The Yahoo! User Interface CSS Reset

The Yahoo! User Interface (YUI) reset first came on the scene in February 2006, written by Nate Koechley, the YUI senior frontend engineer, along with his colleague Matt Sweeney.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym {
  border:0;
}

The effects of this reset on any stylesheet were dramatic. While the html element was left untouched, almost every often-used HTML element had its margins and padding zeroed out. Images lost their borders. Lists lost their bullets and numbering. And every single heading was reset to the same size.

The reset was, of course, one part of a much larger framework, called the Yahoo! User Interface Library (YUI), which is a framework for developing web-based user interfaces.

The first YUI CSS Reset was, I believe, the first truly "global" CSS reset that received widespread public notice. Microsoft Developer Network blogger, Dave Ward said, "YUI’s reset is the first that could truly be considered a CSS reset by current standards."

The idea, as Koechley said in multiple presentations and blog posts, was to provide a "clean and sturdy foundation" for an identically formatted "clean slate" that individual stylesheets can build upon for a nearly-identical look no matter what browser or machine is being used to display the site. The YUI CSS Reset "removes everything" stated by the browser’s default CSS presentation.

In a September 2006 presentation given at Yahoo’s "Hack Day" event, Koechley told the audience: "Sound foundation ensures sane development." The reset "overcome[s] browser.css" and "level[s] the playing field."

In a bit of whimsy, Koechley wrote that the YUI CSS Reset "[h]elps ensure all style is declared intentionally. You choose how you want to <em>phasize something. Allows us to choose elements based on their semantic meaning instead of their ‘default’ presentation. You choose how you want to render <li>sts."

In an October 2007 slideshow, Koechley reminded users that the reset is "a good reminder that HTML should be chosen based on content alone." He restated that in a 2010 interview and went on to note that most people still don’t know that the browsers provide a strong layer of presentational functionality. If nothing else, he said, resets serve to bring all browsers down to a "neutralized, normalized … lowest common denominator" state that designers can then build from. Resets, he said, force people to rethink the semantics of HTML elements.

Koechley no longer works for the YUI team, and is instead a freelance web developer. He isn’t sure what, if any, changes will be made in the YUI reset to accommodate HTML5 and CSS3.

Eric Meyer used the YUI reset as a base for his own expansive reset, garnering even more attention than the YUI code.

Eric Meyer’s CSS Reset

Why do this at all? The basic reason is that all browsers have presentation defaults, but no browsers have the same defaults. … 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. — Eric Meyer, Author of leading CSS books

To paraphrase the 1983 commercial, when Eric Meyer talks, people in the design and development community listen. He started with a September 2004 post that, as noted above, itself built on work by Tantek Çelik.

Both Meyer and Çelik focused on "undoing" the html.css file that controlled the way Gecko-based browsers like Firefox and SeaMonkey displayed websites on the individual computer. Meyer’s follow-up on the first post focused on (fractionally) rebuilding the html.css file to make sites relatively usable again.

Both Çelik and Meyer envisioned their work as immediately practical and applicable to web design. Çelik told me that his reset "just made sense as a foundation to simplify coding CSS and make it more predictable" — and it didn’t take them, nor anyone else, apparently, very long to begin to comprehend how they could gain new control over the display across almost all browsers. The power, the power!

Meyer had other fish to fry in the ensuing years, including the birth of a daughter, the care and feeding of a radio show featuring big band and jazz music, and a truly intimidating 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 avoided the idea of using a universal selector to reset the CSS. "Instead," he wrote, "I said the styles should list all the actual elements to be reset and exactly how they should be reset."

Meyer based his "blanket reset" on Yahoo’s YUI reset, making some significant tweaks along the way. Meyer’s reset.css code included the following:

Eric Meyer’s CSS Reset (2007)

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: "";
}

Two things to note with regards to the 2007 version:

  • The biggest selector, which includes more HTML elements such as <applet>, also sets other CSS properties such as line-height and text-align
  • Some elements, such as <hr>, <input>, and <select> were left out of the CSS reset

Meyer intentionally avoided the universal selector to preserve resetting "inputs and other interactive form elements." He continued: "If the :not() selector were universally supported, I’d use it in conjunction with a universal selector, but it isn’t."

Eric Meyer’s reset took the concept of resetting margin and padding and took it to a whole new level, stripping styles from a number of elements, forcing you to think about what you wanted and add them back in. List items would no longer have bullets, headings would no longer be bolded, and most elements would be stripped of their margin and padding, along with some other changes. — Jonathan Snook, Author, Front-End Developer

The effects of both the YUI reset and the Meyer reset were staggering. Almost everything included in the browser’s default stylesheet was reset to zero, including many elements designers rarely touched. Interestingly, the first comments on Meyer’s reset suggested more additions to the reset, particularly to removing link borders and setting the vertical-align property to baseline. For example, Jens O. Meiert, a web designer/developer who works at Google commented: "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?"

Others complained about the redundancy of resetting elements to zero and then re-resetting them later in the stylesheet, adding unwanted weight to the stylesheet. Of course, others defended the reset, resulting in a lively (yet polite and mutually respectful) debate.

The fracture lines in the development/design community over the idea of the "global reset" were already beginning to appear. (More about that is forthcoming.)

Meyer made some significant changes to his original reset; two days later, he added a comment about background colors, changing the font-weight and font-style properties to inherit, resetting the vertical-align attribute to baseline, and zeroing out the borders on linked images.

Eric Meyer’s CSS Reset (2007, revision 1)

/* 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: "";
}

And two weeks after that, he tweaked the code yet again. This time adding minor chances such as the background: transparent property declaration to the first rule and removing the outline on the :focus pseudo-class.

Eric Meyer’s CSS Reset (2007, revision 2)

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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

After some more cogitation and discussion, he released another version of his reset. He changed the way quotes are suppressed in the blockquote and q elements, and removed the inherit values for font-weight and font-style.

Eric Meyer’s CSS Reset (2008)

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;
}

/* 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;
}

And finally, he released an ever-so-slightly modified version of the reset as what seems to be the final iteration, warning users: "I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on. In other words, this is a starting point, not a self-contained black box of no-touchiness."

Eric Meyer’s CSS Reset (most current)

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;
}

/* 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;
}

And it wasn’t long before designers found problems in the "final" version of the reset. So nothing is ever really final.

The evolution of Meyer’s thinking, as it was affected by his own reflection and the input from many others is fascinating. Meyer has frequently reminded designers that they shouldn’t just slap his reset stylesheet into their work willy-nilly.

In the 2008 An Event Apart conference in Chicago, Meyer, according to participant Trevor Davis, told designers not to "just drop in his reset stylesheet if there is a more effective way to accomplish the same thing." He said, "Instead, turn the reset into a baseline. Modify the reset stylesheet to suit your project, don’t use his reset stylesheet without modifying anything. Don’t reset then re-style, reboot instead."

In a 2010 interview, Meyer told me: "I had not anticipated it being, you know, popular. I hadn’t really anticipated tons of people using it. I had sort of anticipated, ‘Hey, here’s a way of thinking about this, you know, here’s what people who really have a lot of experience with this might take as a starting point and play with it, and like, we’re all sort of professionals here and we get what this is about.’ And it kind of went everywhere and got used by tons of people who maybe haven’t thought about the Web for a decade or more as some of us have. … You have to be careful about what you throw out there in the world because you never know what’s going to catch on."

Conclusion

This in-depth inspection of the history of CSS resets should set the stage for what we will talk about next in this three-part series of articles. In part 2, we will discuss the various CSS reset options available to you for incorporation into your projects. In part 3, we will discuss the on-going debate on whether or not web designers should use CSS resets.

This is Part 1 of a three-part series of articles on the topic of CSS resets.

Related Content

About the Author

Michael Tuck is an educator, writer, and freelance web designer. He serves as an advisor to the Web Design forum on SitePoint. When he isn’t teaching or designing sites, he is doing research for the History Commons. You can contact him through his website, Black Max Web Design.

48 Comments

Omer Greenwald

December 2nd, 2010

Veru useful article, Michael. I need to improve the reseting in some site (especially the * margin:0, padding:0 rule). It’s good to know of a site that gathers all the reseting tricks together. thanks

George

December 2nd, 2010

If you’re a front end developer worth your weight, you use a custom reset tailored to each specific project. Anything else is simply laziness and/or waste.

It’s a travesty that 15% still use the “hard reset”, the ultimate form of laziness when it comes to CSS resets.

Vladimir Carrer

December 2nd, 2010

I want to point out that you don’t always need complete reset. Sometimes you just need to reset the “critical” parts, here is one solution for that CSS Mini Reset http://www.vcarrer.com/2010/05/css-mini-reset.html. Yes, the question always remains – to reset or not to reset.

Simon Willans

December 2nd, 2010

I somewhat agree George. There’s so much in the Meyer reset that I won’t use in certain projects.

I have a customised Meyer reset. And for each project, what I don’t intend to use, I’ll remove from the reset.

Bart Lewis

December 2nd, 2010

A fascinating read. Thanks for doing all the research to put this together Michael! I’m sure it was no small feat.

Looking forward to the follow up articles.

curtismchale

December 2nd, 2010

The Hard Reset really shouldn’t be used. Sure it gets everything but the * selector is the slowest way to do it. We should never be using the * selector unless it’s entirely unavoidable and in a reset it is entirely avoidable.

Heath Huffman

December 2nd, 2010

All of Doodlekit’s new layouts will be using Meyer’s latest reset.

Jim Munro

December 2nd, 2010

Wow, nice in depth coverage of this and not just another “roundup”. I appreciate the historical perspective.

Seems like the best advice is basically to reset what you need and avoid CSS bloat, but that hasn’t stopped me from dropping in a reset.css here and there. :)

I look forward to the next installment.

Matthew Pettersen

December 2nd, 2010

Very interesting Michael. This is the first of CSS reset i have ever heard about, That includes College, Tech, and HS Classes where teachers are, to this day, limiting there students… Looking forward to Part 2 and 3, as I need to know more! haha.

Michael Tuck

December 2nd, 2010

Vladimir, I included your “mini reset” in the later part of this article. :)

Simon, that’s exactly how Eric recommends his reset be used.

Brian Lang

December 2nd, 2010

Don’t forget the HTML5Boilerplate.com verison which builds on all of these and more.
http://html5boilerplate.com/

Paul Irish

December 2nd, 2010

Incredible, fantastic chronicle of the story of resets.

The only thing I’d add is the recent addition of HTML5 normalization to reset code.
The most notable of which is the HTML5 Doctor reset: http://html5doctor.com/html-5-reset-stylesheet/

It’s the one we use in the HTML5 Boilerplate.. It display:block’s the new structural elements and has a notable accessibility improvement over Reset Reloaded.

Jacob Gube

December 2nd, 2010

I just wanted to say, for clarification, that this is a 3-part series. This sets the foundation for discussing the “modern” options for CSS resets. For example, the YUI reset discussed is the original YUI, and YUI 3 is out. It wouldn’t make sense to include HTML5 Boilerplate in this first part, which deals with the history of CSS resets, because it’s a “modern” solution.

You all are ruining the surprise in Part 2! :)

I put “modern” in scare quotes because I believe Eric Meyer’s Reset CSS’s most current iteration is a modern solution, provided that you follow his advice that you modify it and tailor it to your needs, and that you do not restyle an element after resetting it to a baseline (which is redundant). At the very least, it gives you a template for remembering to style all the different HTML elements, which is important if you are deploying something that is going to be used by many people and in many situations (such as, say, a WordPress theme). If you have no use for certain elements, don’t include it in your stylesheet (that’s my personal opinion, not Mr. Meyer’s).

Volker Schaefer

December 2nd, 2010

Wow, I never knew that there are so many different css Resets in history and now.

I think there is something to learn for me.

Best regards

Volker

Jacob Gube

December 2nd, 2010

And I just wanted to add that I found the evolution of Eric Meyer’s CSS Reset very fascinating. Just the dynamic of the iterations and then how it was helped by some commenters.

Edison A. Leon

December 2nd, 2010

Awesome, can’t wait for the next one!

Jason

December 2nd, 2010

I agree with George. I’ve also thrown together a simple HTML5 reset that I use in projects. It’s not as complete as the others but it does the job well.

http://snipplr.com/view/39056/html5-css-reset-compressed/

Michael Tuck

December 2nd, 2010

Paul, Brian, as Jacob says, more is on the way, including some (fairly) new info. Paul, thank you for the kind words, it was a fun article to do (and why didn’t I drop you a line for an interview???). I agree that following the iterations of Eric’s reset is fascinating. Jason, your reset is quite tricksy, I look forward to dissecting it to see what’s what. Matthew, if your teachers aren’t at least bringing up the subject of resets, you should do it yourself. You can even use this article to whack ‘em around a bit. :)

Patrick Boyle

December 2nd, 2010

I believe richinstyle.com pre-dated Eric’s reset, with their ‘alwayswork’ stylesheet which contained an early reset in its ‘okbrowsers’ import. I can remember using it in 2000.

Galen Gidman

December 2nd, 2010

Thanks so much Michael – I had no idea that there was so much to the know about the history of resets. I’ve just been using them and taking them for granted. It’s pretty fascinating though.

Andrew

December 2nd, 2010

Very interesting article.

One thought, I tend to work on multi-language, multi-script projects, and resets files come in handy, possibly for a non obvious reason.

The default presentation browsers apply to html elements is very much based on western european typesetting and typographic traditions, and isn’t suitable for all languages and writing scripts.

So it is useful to zero out those aspect as well. In these cases most existing reset schemes need to be extended.

ldexterldesign

December 3rd, 2010

I’ve been working intensely on my reset for the past year. It incorporates a typographic framework too. It’s beautiful: http://www.ldexterldesign.co.uk/wp-content/themes/ldexterldesign/styles/reset.css :P

I still think I could tear the ear of anyone about handling list items though.

Rocky

December 3rd, 2010

Nice article, I never knew about different css Resets and generally i reset my header tag, p and anchor tags..

Corey

December 3rd, 2010

“Some elements, such as , , and were left out of the CSS reset”

I’m curious if you know the answer to something I’ve been wondering:

If Meyer’s reset included “many elements designers rarely touched”, then why are these elements left unmodified?

It took me a while to figure out why my margin wasn’t zeroed while using his reset as a base on my personal site. I am a huge noob, so excuse me if the answer is obvious.

Corey

December 3rd, 2010

Oh whoops, it looks like html is ignored. That should read:

“Some elements, such as hr, input, and select were left out of the CSS reset”

And:

“It took me a while to figure out why my input margin wasn’t zeroed…”

Jacob Gube

December 3rd, 2010

@Corey: Yeah, there should really be info that tells users special, unescaped HTML markup gets removed by WordPress. You can still post HTML if they are escaped.

That’s a good question and not a “noob” question. Some things, you just don’t want to have 0 margin/padding. Selects and options really look bad without margin/padding. In that instance, giving them margin/padding does more harm than good. An edge-case, as well, are lists. You want a little bit of padding on the left so that when they are at the left side of the browser’s viewport, you won’t be wondering where your list item bullets are.

Here’s info on zero’ing out select and option. Here is info on margin/padding and lists.

Beata

December 3rd, 2010

Very informative article. I usually use EM’s reset, but now I feel like I should experiment more :)

I look forward to the next articles.
Thank You!

Theo

December 3rd, 2010

Great read Michael! It was very interesting to follow the detailed history of css resets.Looking forward to the next post.

Michael Tuck

December 3rd, 2010

My favorite tweet on the article, from @brucel : “of course, any true reset would set everything to display:inline, as that’s the default, according to spec. Wld be silly tho” LOL, Bruce is so right on both points.

Jacob Gube

December 4th, 2010

@Michael Tuck: Interesting comment but I don’t think it was ever the intention of these CSS resets to reset to W3C specifications (because, afaik, there isn’t one), but merely to set baseline values to all elements so that browsers don’t do the thinking and styling for us.

But it does raise, to me, an important point that’s outside of CSS reset. I tried to see if there was a standards body, like the W3C, that specifies the default styles of HTML elements, and maybe my Googling is bad (so correct me if I’m wrong), but I couldn’t find one. W3C CSS2 specs has a sample stylesheet that they “encourage” developers to use.

It would be nice to have a specification on default styles of elements. And this would be less for developers, but more for browser makers. We have a specification for HTML, XHTML, CSS, but it seems almost unmarried with each other. Unlike, say, HTML5 and JavaScript, where the specs intermingle with each other, with stuff like the canvas API, local storage, etc., there seems to be a disjunct between style and markup. And I think that was the philosophy; presentation and structure should be separate from each other, so I understand the “why” of why that is so.

But one unfortunate side-effect of this extreme separation is that browsers will have their own default.css. This is how we end up with a yellow border on input:focus in Chrome, and a blue one on Safari, even though they use the same layout engine. This is why some browsers use square bullets and others disc as default, or why other browsers use the padding property and others use the margin property to style paragraph top/bottom spaces.

If we had a W3C standard for default element styles (and maybe we do and no one follows it), we wouldn’t need to reset our styles because default behavior is predictable.

Jacob Gube

December 4th, 2010

And I’d just like to add to my previous comment: I want to correct my last statement and say, “more” predictable. There can be standards, but browsers do what browsers do, and they can follow them or not. What is a promising trend, though, is that browsers ARE listening to W3C specs; you can see that most easily in IE 9.

Michael Tuck

December 4th, 2010

Jacob, I saw your tweet to Eric Meyer asking that same question. @brucel was being facetious, but it did raise that point. If there is a W3C standard, none of us, including Eric from what I gathered from the Twitter exchange, seem aware of it.

Eric Rowell

December 5th, 2010

Awesome article Michael! “Priming the canvas” is the perfect analogy to CSS resets.

James Gray

December 5th, 2010

Wow i was searching all over for something like this. Can’t wait for the next additions. Thanks for the great article :)

Jacob Gube

December 5th, 2010

@Michael Tuck: Yeah, in context, I did know he wasn’t being serious, but within 140 characters, he does bring up a point (accidentally or not). It would be nice to say that, standards-wise, all uls will have style="list-style:disc; margin:5px 0 5px 5px;", for example, instead of letting browsers decide how our unstyled unordered lists should be displayed. That way, we, as developers can reset them if we want to, but if we forget to, we can still sleep at night knowing that most browsers will render our unstyled elements the same way and within the same baseline styles, instead of the status quo, where we have to resort to reset because different browsers style elements in the way they think is best.

But I also know it’s easy to say, hard to do. Standards are terribly difficult to kick start. And I know a major reason why this isn’t being done; because I’m sure I wasn’t the first to think about the benefits of a standard specification for default.css. The big problem with large standards bodies is that decision-making is slow. Imagine having to decide by committee that input:focus should have a dashed gray outline instead of a blue outline. Imagine that scenario for every element, and every pseudo-element/pseudo-class in CSS.

Having default styles for HTML elements as a standard also improves page performance through CSS optimization. Less CSS. If you use a separate stylesheet for your reset.css, then that could be one less HTTP request per unprimed browser visit (or less work on your server if you concatenate your stylesheets into one file server-side). Less incentive to use the universal selector (*), which is inefficient performance-wise, and then just styling the elements you want to be different from the default.

Michael Tuck

December 5th, 2010

Just read this on Chris Coyier’s css-tricks:

“By the way, I was reading Introducing HTML5, and learned an interesting point. In HTML5, there really is no distinction between an ‘inline’ element and an ‘block’ element. All elements are inline until specified otherwise by a browser or user stylesheet.”

http://css-tricks.com/vignetting-woes/

Didn’t know that.

Michael Tuck

December 5th, 2010

Should have added this in the last comment… Eric, thanks for the kind words. I think in metaphor and analogies, and try to present information that same way. I was pretty happy with the “canvas priming” bit. :)

Ed Salter

December 6th, 2010

Thanks for the article, a good mix of history and practical advice. Cheers!

Andrew Krespanis

December 8th, 2010

Wow, incredible detail and research Michael!

Aftab Alam

December 11th, 2010

Many thanks for such an informative article…didn’t knew that CSS reset has such a fascinating history.

Glenn

December 13th, 2010

Learnt a load more reading your article. I’m often guilty of using Meyer’s reset as is without removing redundant portions.

Keith Davis

December 18th, 2010

Hi Michael
Eric Meyer makes mistakes! LOL

I’ve come across the idea before but not heard it referred to as CSS resets.

Look forward the the two future articles and even hope for a final CSS reset to use on projects.

I don’t see using a universal reset on all projects as being lazy…. I simply see it as not re -inventing the wheel each time.

dgibson

December 22nd, 2010

Very nice write up and thanks for the link to my article about the problem with reset.css and IE and table striping. I posted a followup with a solution here:

http://www.dgibson.net/blog/article.cfm/articleid=11/CSS-Overcoming-background-transparent-In-IE

Stephen Withington

January 3rd, 2011

i’m sure you’ll be bombarded with links to Eric’s most recent post spurred on by this very article: http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/

Michael Tuck

January 4th, 2011

Stephen, thanks for the heads-up. I’m pleased Eric mentioned me in his blog post, and I’m damn pleased to have been involved, even in a minor way, in giving him the impetus to take a fresh look at his reset. Now if he just wasn’t such a fan of monster trucks… :)

Jon Jackson

January 5th, 2011

Nice article. It’s a shame no browsers have the same defaults – but I suppose that’s what keeps us in the industry on our toes!!

jazdy

September 12th, 2011

Yay google is my world beater helped me to find this outstanding website ! .

Jens O. Meiert

March 12th, 2013

I just ran into this article and thought to point out that Andrew Krespani did probably not “invent” the hard reset. I don’t want to claim ownership but http://lists.w3.org/Archives/Public/public-evangelist/2004Sep/0003.html proves that this type of reset was in use and documented earlier in 2004.

Leave a Comment

Subscribe to the comments on this article.