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}
Thank you.
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.
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
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.
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.