An (Almost) Complete List of Global CSS Reset Styles

Filed September 8th, 2010 under CSS and Resources

W hat’s the value in returning to a CSS trend from 2 years ago? Well, most descriptions, guides, and round ups of CSS reset styles are outdated. Not to mention that the advent of HTML5 makes revisiting reset styles particularly worthwhile.

I’ll be covering 6 tried-and-true methods, 2 newer minified approaches, and finally a new HTML5 CSS reset style. Of course, I owe a great debt to Jeff Starr of Perishable Press for his 2007 post A Killer Collection of Global CSS Reset Styles. Several of the early methods stem from his post.

Ultra Minimalist CSS Reset

Description: It’s pretty obvious isn’t it? The only trouble with the Ultra Minimalist CSS Reset is that it can degrade performance on large sites, given that its use of the universal selector.

* {
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
	}

Condensed Universal CSS Reset

Description: Using the Ultra Minimalist CSS Reset as a base, we add typographic resets to several of the font tags as well as to the vertical-align tag. Like the Ultra Minimalist CSS Reset, however, it can degrade performance on large sites. So unless you’re dealing with a micro implementation, it’s best to stay away from universal selectors.

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	}

Siolon’s Global CSS Reset

Description: Building on the Condesenced Universal CSS Reset, Siolon’s solution extends the reset styles to include other typical tags such as h1 through h6, p, table, and li. He assigns base-level margin attributes to many of structural selectors, making his solution a solid base for further development. Technically speaking, these changes aren’t germane to a reset stylesheet, but their relatively innocuous and fairly standard. Again, the use of the universal selector can be problematic in large cases so be wary of applying this to big projects.

Permalink: http://www.siolon.com/blog/browser-reset-css/

/*

Reset Default Browser Styles
- Place first in the listing of external style sheets for cascading.
- Be sure to explicitly set margin/padding styles.
- Styles are not reset that have to do with display (block, inline) are not reset.

By: Chris Poteet & various influences

*/

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
dt {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

YUI 2: Reset

Description: For a long time, Yahoo’s YUI Reset has been a go-to reset file for web developers. It avoids the issues posed by the universal selector entirely, and gives a truly blank slate to build upon. The YUI 2 framework launched in February 2006 – and it encompasses both JavaScript and CSS libraries. Of course, Yahoo offers CDN hosting for the stylesheet so you can take advantage of caching goodness.

Yahoo also offers a Base CSS stylesheet (which applies a consistent style foundation for common HTML elements) and a Fonts CSS stylsheet (which offers offers cross-browser typographical normalization and control).

Permalink: http://developer.yahoo.com/yui/reset/

CDN hosted:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">

Full style sheet:

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

YUI 3: Reset

Description: In 2009, Yahoo launched YUI 3. The framework contains an updated version of the reset stylesheet. Its biggest feature addition is the ability to reset elements either globally or contextually. If you only want to reset a single div tag, you load the contextual version of CSS Reset, and include .yui3-cssreset as a classname.

Permalink: http://developer.yahoo.com/yui/3/cssreset/

CDN hosted:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-context-min.css">

Full style sheet (comments redacted):

html{
	color:#000;
	background:#FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, 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;
}
li {
	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;
	font-variant:normal;
}
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
input, textarea, select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
input, textarea, select {
	*font-size:100%;
}
legend {
	color:#000;
}

Eric Meyer’s Reset CSS

Description: Eric Meyer’s bit of code is one of he most used CSS reset style in the web developer community. Originally released in 2007, it’s become a go-to reference. It is, however, far reaching. Nearly every single HTML element is reset in this stylesheet – something to keep in mind during development. But if you’re looking for the ultimate reset, this is probably it.

Permalink: http://meyerweb.com/eric/tools/css/

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;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: 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;
}

Simple Reset

Description: Recently, attempts to minify the reset stylesheet have been made. Russ Weakley’s Simple Reset is one such attempt. It’s fairly robust and fast-loading, making it a nice middle ground between the minimalist styles and Eric Meyer’s.

Permalink: http://www.maxdesign.com.au/articles/css-reset/

html, body, ul, ol, li, form, fieldset, legend
{
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

fieldset,img { border: 0; }

legend { color: #000; }

li { list-style: none; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td
{
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

input, textarea, select
{
	font-size: 110%;
	line-height: 1.1;
}

abbr, acronym
{
	border-bottom: .1em dotted;
	cursor: help;
}

CSS Mini Reset

Description: Authored by Vladimir Carrer, CSS Mini Reset is another bare-bones, but robust approach to CSS reset stylesheets. Inspired by Eric Meyer and Russ Weakley, Carrer composed his minified reset by focusing on “the main CSS features like Divs , Tables and Forms who are also the most used CSS(HTML) elements.”

Permalink: http://www.vcarrer.com/2010/05/css-mini-reset.html

html, body, div, form, fieldset, legend, label
{
 margin: 0;
 padding: 0; 
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;
 vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

HTML5 Reset

Description: With HTML5 introducing a host of new elements, it’s no surprise that an HTML5-specific CSS reset stylesheet would exist. Released in late July of 2010 by Richard Clark, this thing is piping hot. Clark removed the deprecated elements commonly found in the older reset stylesheet, while adding in HTML5′s new elements. In August the reset stylesheet was wrapped into this lovely package: HTML5 Reset (appropriately written in HTML5). The project is active, so if you use this in a development environment, watch for updates.

Permalink: http://code.google.com/p/html5resetcss/

/* 
html5doctor.com Reset Stylesheet
v1.6
Last Updated: 2010-08-18
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

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

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted inherit;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
Joshua Kelly
Director of Human/Machine Synthesis

2 Responses

§ Michael Tuck wrote on October, 10th:

Excellent article. I’m writing something along these lines for SixRevisions, and your article has given me several excellent lines of inquiry. You’ll be linked. :)

Leave a Reply