CSS Tools: Reset CSS with box-sizing fix

What would website design in CSS do with Eric Meyer & Cory LaViska’s genius in CSS. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and etc. Though Eric meyer the original brains behind this advises that the CSS reset script he set up should be 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. That’s why he released this without any rights being attached to the public domain for re-use. A copy of the file can be found on Eric Meyer’s website on http://meyerweb.com/eric/tools/css/reset/ Below is the popular code listed. v2.0 | 20110126 License: none (public domain)

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

 

For simple CSS & HTML projects, where a framework is overkill, we advise you to use Eric Meyers’ CSS reset but also throw in the tried and tested box-sizing fix popularized by Paul Irish. Instead of searching for and combining these snippets every time I need them, here’s a paste-ready version for convenience that Cory LaViska has done


/* CSS reset with box-sizing fix */
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
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block
}

html {
box-sizing:border-box;
}

*,*:before,*:after {
box-sizing:inherit
}

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
}

Enjoy all you Code hunters!!!