Eric Meyer’s “Reset CSS” 2.0



One of the pioneers of the CSS Reset method, Eric Meyer, created a Reset stylesheet that is still in use on millions of websites today. Most people use it in its unedited form, despite Meyer’s recommendation against this:

The reset styles given here are intentionally very generic … 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. … In other words, this is a starting point, not a self-contained black box of no-touchiness.

As a starting-point for developers and designers to customise to their own needs, this script is dynamite – more information on customisations coming soon.

V2.0 of the stylesheet is provided below in full and minified formats, for you to copy and paste:

Full Version (1.1KB)

See below for minified version

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Minified Version (0.65kb)

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
11 thoughts on “Eric Meyer’s “Reset CSS” 2.0add yours
  1. Kelly said: #

    For the past 3-4 years, I’ve been meaning to ask this question…… I’m curious as to why font-size is set to 100% when that is the default?? Is there a reason for doing this?? I’ve also noticed a few other defaults are specified in the css reset.

    • Kelly said: #

      Note: when I say default, I mean it’s the default css property across all browsers.

    • I think the reason behind the font size at 100% is so that different browser interpretations of header sizes are negated

  2. how to add this reset css? do we just need to copy and paste in the .css file in the top .. or there are other way round.

    • Yes, just copy and paste the CSS reset code into the top of your CSS file or you can create a reset.css file and place it into that file separately. As simple as it can be.

  3. The reason for the font-size being 100% is apparent from the blockquote above:

    t should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline.

    100% simply provides a generic value for something that will be determined by the requirements of your project. If it calls for a font-size of 12px, then that value becomes 12px instead of 100%. It could just as easily have been 1em.

  4. To get a better affect for height element control I had to remove the “html” (very first element stated to reset before “body,”) and rewrite it to the bottom of the reset script, sitting all by it’s lonesome… html {height:100%; } and only then did I get tremendous results from height divs. Leaving “html” on the first line kept out ‘same-height’containers’ from matching height.

    I also removed h1, h2, h3…. and left them out from meyerweb reset so I had better control of their size.

  5. Liem Toshi said: #

    Joss, thanks so much! That’s need for this time!

Leave a reply
this will never be published
@