Reset your style sheet with a CSS Reset

The idea behind a CSS reset is to set certain element styles to a baseline to avoid cross browser inconsistencies. By default, different browsers do not display your website exactly the same. Things like headings, line-heights and margins look different in different browsers when default styles are applied. If we reset these default styles to a set value we tighten up our CSS causing it to look the same across different browsers.

Here is an example of the first implementation of a CSS Reset way back in the day. This reset basically stripped margins and padding from all elements on the page which became a problem as certain elements like form elements needed their margins and padding. So it’s probably a good idea to stay away from this global reset but it did pave the way for some great CSS Resets.

/* Global Reset */
* { margin:0; padding:0; }

The Meyer CSS Reset

These days, one of the most popular CSS Resets is the Meyer Reset created by Eric Meyer. The Meyer Reset acts as a starting point for the CSS styles of a website and can be tweaked depending on your website requirements. As you can see in the Meyer Reset CSS below, many elements are stripped of their default padding and margins. List items are even stripped of their styles to force you to give them an appropriate style.

If you are looking for a CSS Reset to tighten up your CSS you can use the Meyer Reset below. Simply copy and paste the CSS into the top of your style sheet and you’re ready to go! There are also many other CSS Resets out there which you can review and compare.

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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

Here is the compressed version of the Meyer Reset:

Here is the Meyer Reset in one line for those of you who like to keep your reset tucked away nicely at the top of your CSS file.

/* http://meyerweb.com/eric/tools/css/reset/ *//* v1.0 | 20080212 */ 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{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

Tags: cross browser consistency, css reset, Eric Meyer, Meyer CSS Reset, meyer reset, reset stylesheet, reset your styles