K. M. Kroski

Notes » Quick and Dirty CSS Reset

A CSS reset file is always good if you’re starting from scratch. I’ve tried quite a few reset stylesheets, but I’ve always found myself coming back to Eric Meyer’s CSS Reset. It’s a simple, yet effective option that easily allows you to customize it.

The CSS below is my own variation that incorporates the best rule of all time: box-sizing! It also has some formatting changes, but that’s a personal preference.

/***********************************************
 * CSS Reset
 * K. M. Kroski
 * 17 August 2014
 * http://kroski.net/notes/css_reset
 * Based on work by Eric Meyer
 * http://meyerweb.com/eric/tools/css/reset/
 ***********************************************/
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;
 -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
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; }

If you want something more “full-featured,” check out Normalize.css. It’s self-described as “A modern, HTML5-ready alternative to CSS resets” and it’s pretty bad-ass.

Learn More:
Eric Meyer’s CSS Reset
Paul Irish’s post on * { box-sizing }

Posted on August 17, 2014