CSS Resets

The following is an extensive set of CSS Reset Snippets that I have collected from literally ALL over the web. These are great for if you are building a site or theme from scratch and you want to “level the playing field” across all browsers for the core (X)HTML elements that are most commonly used in site building.

Some are much more extensive than others and they all have links back to their sources for deeper explanations. I really just wanted to present them all here as I have collected them over time and feel they are very important to any developers toolbox and snippet library.

Minimal v1

By far the most commonly used CSS Reset of the bunch.

/* Basic Reset - wildcard selector to reset the 
padding/margins on all elements to zero */
* {
	padding: 0;
	margin: 0;
}

Minimal v2

Same as Minimal V1 with the exception that it also zeros out the border property.

/* Basic Reset - wildcard selector to reset the padding/margins 
on all elements to zero and includes a border reset */
* {
	padding: 0;
	margin: 0;
	border: 0;
}

Minimal v3

Same as the other two Minimal versions but it also zeros out the outilne property.

/* Basic Reset - wildcard selector to reset the padding/margins
on all elements to zero and includes a border reset and kills the 
default outline style */
* {
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

CSS Condensed Universal Reset:

Handles all of the essentials.

/* handles all the essentials, and ensures relatively universal default browser-style uniformity */
* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}

Meyer Full Reset

This reset comes straight from the CSS Guru himself, Eric Meyer.

/* v1.0 | 20080212 - http://meyerweb.com/eric/tools/css/reset/index.html */
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;
}
:focus { /* remember to define focus styles! */
	outline: 0;
}
ins { /* remember to highlight inserts somehow! */
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table { /* tables still need 'cellspacing="0"' in the markup */
	border-collapse: collapse;
	border-spacing: 0;
}

Meyer Condensed Reset

A condensed version of Eric Meyer’s original CSS Reset

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, 
form, fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;
}
fieldset, img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-weight: normal;
	font-style: normal;
}
caption, th {
	text-align: left;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%;
}
q:before, q:after {
	content: '';
}
abbr, acronym {
	border: 0;
}

Shaun Inman Global Reset

Used by Inman on Perishable Press

/* CSS reset used to neutralize styles for his current, Helvetica/monochrome site
This is some pretty tight CSS, implementing a choice set of rules to reset
many critical default browser CSS styles. */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, 
h5, h6, pre, form, fieldset, input, p, blockquote, 
table, th, td, embed, object {
	padding: 0;
	margin: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset, img, abbr {
	border: 0;
}
address, caption, cite, code, dfn, em, h1, h2, 
h3, h4, h5, h6, strong, th, var {
	font-weight: normal;
	font-style: normal;
}
ul {
	list-style: none;
}
caption, th {
	text-align: left;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 1.0em;
}
q:before, q:after {
	content: '';
}
a, ins {
	text-decoration: none;
}

Yahoo Reset

Reset developed by the people over at Yahoo.

/* http://developer.yahoo.com/yui/reset/ */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset, img {
	border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-weight: normal;
	font-style: normal;
}
ol, ul {
	list-style: none;
}
caption, th {
	text-align: left;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%;
}
q:before, q:after {
	content:'';
}
abbr, acronym {
	border: 0;
}

Or, use this incredible tool *{ CSS:resetr }. It provides a super easy way to test and download the best reset styles for your next design.

Join The Conversation

All comments are moderated.

* Denotes required field.

*