![[ Global CSS Reset ]](https://perishablepress.com/wp/wp-content/images/2008/misc-chunks/global-css-reset.png "Global Styles")
Using
CSS to style semantically meaningful
(X)HTML markup is an important key to modern web design practices. In a perfect world, every browser would interpret and apply all
CSS rules in exactly the same way. However, in the imperfect world in which we live, quite the opposite frequently happens to be the case: many
CSS styles are displayed differently in virtually every browser.
Update! Check out
CSSresetr for an easy way to test and download the best reset styles for your next design.
Many, if not all, major modern browsers (e.g., Firefox, Opera, Internet Explorer, Netscape, et al) implement their own generalized
CSS rules, which often conflict with designer-applied styles. Other browsers fail to implement properly various
CSS rules, making a mess of pages that happen to display perfectly in other browsers. Even worse, some browsers completely ignore specific aspects of
CSS altogether, entirely ignoring widely accepted
CSS attributes and properties.
Needless to say, the unpredictable manner in which browsers implement
CSS requires us to seek realistic browser equalization strategies. Without relying on JavaScript to synthetically embellish default browser functionality, we focus our browser neutralization efforts entirely on
CSS itself. By using an appropriately defined set of
CSS “reset” rules, it is possible to override default browser styles and effectively neutralize behavior, allowing us to build our
CSS on a uniform foundation.
Using a well-crafted set of global
CSS reset styles enables designers to make assumptions about the defualt behavior of browsers. These presentational assumptions greatly simplify the process of creating a “universally” consistent
CSS design using only one set of
CSS rules. Such process simplification results in great savings of time and money. Many of the industry’s top designers have been using
CSS reset styles for years, reaping the rewards and sharing the results.
In this article, I have rounded up a hand-selected collection of freely available global
CSS reset styles. I have used each of these resets on various occasions with great success, and have even managed to scrape together a customized hybrid that cannibalizes key aspects of various others. For each reset, I provide as much information as possible concerning the source of the reset, key effects, and other essential information. Also, as I do not know the orignal author for some of these resets, please drop a comment if you happen to know. And so, without further ado, I present a killer collection of global
CSS reset styles..
Minimalistic Reset — Version 1
As basic as it gets, this global reset employs a wildcard selector to reset the padding and margins on all elements to zero. In my experience snooping around the source code of other designers, this is the most commonly used
CSS reset. I see it
everywhere..
* {
padding: 0;
margin: 0;
}
Minimalistic Reset — Version 2
This reset is identical to the previous one, but also takes into account all default border treatments, which are effectively neutralized to zero as well..
* {
padding: 0;
margin: 0;
border: 0;
}
Minimalistic Reset — Version 3
This last version of the “minimalistic” reset is similar to the previous two, but also kills the default outline style..
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
Condensed Universal Reset
This is my current favorite
CSS reset. It 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;
}
Poor Man’s Reset
I have no idea what to call some of these
CSS reset rules. I named this one as I did because it seems to focus on a minimal collection of default browser styles. The
CSS resets padding and margins on only the html and body elements; ensures that all font-sizes are reset; and removes the border from image links. These are all important aspects of any
CSS design, and this reset takes care of all of them. If you happen to know the source of this ruleset, please drop us a comment. Otherwise, check it out..
html, body {
padding: 0;
margin: 0;
}
html {
font-size: 1em;
}
body {
font-size: 100%;
}
a img, :link img, :visited img {
border: 0;
}
Siolon’s Global Reset
Chris Poteet along with “various influences” created this remarkable technique for
resetting default browser styles. Chris recommends placing the reset at the top of your style sheet for optimal cascading results. This method omits reset styles involving inline and block display elements. Also, remember to explicitly set margin and padding styles after implementing the reset. Note the unique
margin-left 40px; declaration for lists and blockquotes, and the
margin 20px 0; for headings, forms, and other elements:
* {
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;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Shaun Inman’s Global Reset
Although I am not sure if Shaun actually wrote this particular
CSS ruleset (although it is likely he did), it happens to be the
CSS reset used to neutralize styles for his current,
Helvetica/monochrome site. Although I have taken the liberty of restructuring the presentation of this reset for the sake of clarity (I have made no functional changes), 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 CSS Reset
The folks at Yahoo! have also developed their own browser reset styles. As with other reset styles, the
Yahoo! Reset CSS eliminates inconsistently applied browser styling for many key
(X)HTML elements.
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;
}
Eric Meyer’s CSS Reset
As discussed in the
original article,
CSS guru Erik Meyer set forth to create a universal set of
reset styles. This is heavy-duty stuff, effectively neutralizing virtually every significant aspect of default, browser-applied
CSS rules. This reset ruleset is far-reaching, resetting many different
CSS properties. Keep this in mind during subsequent
CSS development. If you experience unexpected, unexplainable behavior happening with your styles, begin by investigating and eliminating suspected aspects of this code (or any newly added reset styles) as the possible culprit — you’ll thank yourself later.. ;) In the meantime, I have taken the liberty of reformatting the presentation of Eric’s code. Rest assured, the rules have merely been rearranged. Functionally, the code is identical.
Update: Eric’s site now features an official
Meyer CSS Reset page, serving as a permanent location for the most current version of the reset code.
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Condensed Meyer Reset
Although I am uncertain as to the original source of this particular
CSS reset, it appears as if it is a condensed, slightly modified version of the Meyer reset. Many of the same declarations are made, and many of the same styles receive neutralizing treatments. Many attributes are not mentioned, however, resulting in more streamlined, less invasive reset collection.
Note the duplicate declarations for the heading attributes (e.g.,
h1 –
h6), which seems to prevent font-weight and font-size normalization from affecting paragraphs, divisions, and the other non-heading attributes addressed in the first declaration.
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;
}
Tantek’s CSS Reset
Dubbed “
undohtml.css”, Tantek’s
CSS Reset is a solid choice for removing many of the most obtrusive default browser styles. This reset removes underlines from links and borders from linked images, eliminates padding and margins for the most common block-level elements, and sets the font size to
1em for headings, code, and paragraphs. As an added bonus, Tantek’s reset also “de-italicizes” the infamous
address element! Nice :)
Commented version as provided via Tantek’s site
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */
/* link underlines tend to make hypertext less readable,
because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }
/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }
/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
/* remove the inconsistent (among browsers) default ul,ol padding or margin */
/* the default spacing on headings does not match nor align with
normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/* nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }
/* de-italicize address */
address { font-style:normal }
/* more varnish stripping as necessary... */
Tantek reset, reformatted and explanatory comments removed
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */
:link, :visited {
text-decoration: none;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6, pre, code, p {
font-size: 1em;
}
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre,
form, body, html, p, blockquote, fieldset, input {
padding: 0;
margin: 0;
}
a img, :link img, :visited img {
border: none;
}
address {
font-style: normal;
}
The Tripoli Reset
The
Tripoli Reset by David Hellsing is part of a complete
CSS standard for
(X)HTML rendering. By neutralizing browser-default
CSS styles, Tripoli “
forms a stable, cross-browser rendering foundation for your web projects.” After resetting
CSS styles, Tripoli’s
generic.css rules may be used to “rebuild” the browser defaults for content typography. Some of the more prominent reset features include:
- white-space in all code tags
- disabling of the
<hr> element
- all text reset such that
1em equals 10px
- targeted disabling of deprecated elements:
<marquee>, <blink> and <nobr>
- inclusion of deprecated elements:
<listing>, <xmp> and <plaintext>
- disabling of the
<font> tag and other deprecated elements
- ..plus much more!
Commented version as provided at David’s site
/*
Tripoli is a generic CSS standard for HTML rendering.
Copyright (C) 2007 David Hellsing
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font: inherit; font-size: 1em; white-space: normal; }
dfn, i, cite, var, address, em { font-style: normal; }
th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td, center { text-align: left; vertical-align: top; }
body { line-height: 1; background: white; color: black; }
q { quotes: "" ""; }
ul, ol, dir, menu { list-style: none; }
sub, sup { vertical-align: baseline; }
a { color: inherit; }
hr { display: none; } /* we don't need a visual hr in layout */
font { color: inherit !important; font: inherit !important; color: inherit !important; } /* disables some nasty font attributes in standard browsers */
marquee { overflow: inherit !important; -moz-binding: none; }
blink { text-decoration: none; }
nobr { white-space: normal; }
/*
CHANGELOG
23/8-07
Added deprecated tags <listing>, <xmp> and <plaintext> in the code block
Resorted to normal white-space in all code tags
Disabled the deprecated <marquee>, <blink> and <nobr> tag in some browsers
*/
Tripoli Reset, reformatted and explanatory comments removed
/*
Tripoli is a generic CSS standard for HTML rendering.
Copyright (C) 2007 David Hellsing
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
* {
text-decoration: none;
font-size: 1em;
outline: none;
padding: 0;
margin: 0;
}
code, kbd, samp, pre, tt, var, textarea,
input, select, isindex, listing, xmp, plaintext {
white-space: normal;
font-size: 1em;
font: inherit;
}
dfn, i, cite, var, address, em {
font-style: normal;
}
th, b, strong, h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
a, img, a img, iframe, form, fieldset,
abbr, acronym, object, applet, table {
border: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td, center {
vertical-align: top;
text-align: left;
}
body {
background: white;
line-height: 1;
color: black;
}
q {
quotes: "" "";
}
ul, ol, dir, menu {
list-style: none;
}
sub, sup {
vertical-align: baseline;
}
a {
color: inherit;
}
hr {
display: none;
}
font {
color: inherit !important;
font: inherit !important;
color: inherit !important; /* editor's note: necessary? */
}
marquee {
overflow: inherit !important;
-moz-binding: none;
}
blink {
text-decoration: none;
}
nobr {
white-space: normal;
}
Thanks to eliosh for
bringing the Tripoli Reset to our attention!
Surely, this list will be updated with additional reset styles as they are discovered. Any suggestions?
October 23, 2007 @ 8:59 am
October 23, 2007 @ 10:09 am
I would like to underline that the first rule which uses the * wild card, make the browser apply the rule to all elements in the page, slowing down the loading. It’s something to keep in mind when building heavy websites.
October 23, 2007 @ 9:16 pm
Louis, thanks for the constructive criticism — your feedback provides ideas and helps to improve the site. I agree that more discussion about CSS reset styles is needed. I will keep this in mind and perhaps break down a few CSS resets in future posts. Also, interesting point about the wildcard selector — it would be interesting to determine the extent to which loading times are increased, if it is even measurable..
October 28, 2007 @ 11:24 am
I also knew YUI reset CSS.
Whit this post you gave me an accellent inspiration and I’ve condensed a mix of useful (to me) reset styles. From now I will use my new CSS-reset style.
October 28, 2007 @ 3:13 pm
I am glad you found the reset styles useful — it sounds like you have put them to good use ;)
— Cheers!
November 9, 2007 @ 3:04 am
Does this solve the problem of the silly invisible minimum height of 20px on tags in IE6?
November 11, 2007 @ 3:50 pm
November 11, 2007 @ 5:10 pm
No way to solve it in this case.
The bug depends on haw Microsoft intended the BOX model: a box, for IE 6, cannot have a height that is lower that the content font-size.
I mean, the 20px minimum height bug is because normal font-size in IE is 20px :)
So the minimum height of a box is the minimum height space required to write a line in. :)
November 12, 2007 @ 4:05 am
And I suppose there isn’t any CSS reset which will deal with this font-size? E.g. font size zero?
November 12, 2007 @ 4:13 am
font-size : 0;
line-height : 0;
will solve it, but i cannot suggest to put this in a reset-style module :)
February 26, 2008 @ 12:57 pm
February 26, 2008 @ 4:57 pm