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

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: , , , , , ,

  • Share
  • Stumbleupon Cre8ive Commando

    1. Edgar on July 27, 2010

      Hello – Love your sites and the tuts… thanks for all this info!

    2. Hans Olson on August 7, 2011

      Just found this information. I’m having problems with my website looking the same on IE and Firefox, ect. If I add this CSS Reset to the top of my external stylesheet, will it solve these problems?
      Thanks,
      H Olson

    Trackbacks

    1. […] This post was mentioned on Twitter by Brendan Murty, Adham Dannaway. Adham Dannaway said: Reset your style sheet with a CSS Reset to avoid cross browser inconsistencies: http://bit.ly/cOMbVe […]

    2. […] the original post: Reset your style sheet with a CSS Reset | Cre8ive Commando This entry was posted on Tuesday, June 1st, 2010 at 12:42 pm and is filed under Uncategorized. […]


    0

    Have your say!