IndoProTech.com

One of the important keys to modern web design practices is to use CSS to style semantically meaningful XHTML markup. In a perfect world, every browser would interpret and apply all CSS rules in exactly the same way. However, quite the opposite frequently happens to be the case is many CSS styles are displayed differently in virtually every browser.

Many major modern browsers (e.g. Firefox, Opera, Internet Explorer, Netscape, etc.) 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. 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 enable us to greatly simplify the process of creating a “universally” consistent CSS design using only one set of CSS rules.

In this article, I have rounded up a collection of freely available global CSS reset styles. I 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 don’t know the orignal author of some of these resets, please drop me a comment if you happen to know. And so, without further ado, here I presented to you an ultimate 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

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

Shaun Inman’s Global Reset

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. During subsequent CSS development, keep this in mind: 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 will thank yourself later.

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…

Here is the 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... */

Here is the Tantek reset, reformatted and with 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!

Here is the commented version of the Tripoli Reset 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 */
/* disables some nasty font attributes in standard browsers */
font { color: inherit !important; font: inherit !important; color: inherit !important; }
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

*/

Here is the Tripoli Reset, reformatted and with 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;
	}

Surely, this list will be updated with additional reset styles as they are discovered. Any suggestions?

You can follow any responses to this entry through the RSS 2.0 feed.

1 comment so far...

Trackback URI

1. 

   Comment by JS EXAMPLES on June 23, 2008 4:32 pm

   CSS TEXT examples , Properties , Attribute -
   http://css-lessons.ucoz.com/css-text-properties.htm