While coding our projects, almost everybody comes to a point, where we want to locate and kill (or at least injure) developers of different browsers for non-uniform default HTML formating or CSS implementation. I can only guess, why these guys cannot agree on one standard solution (all hail W3C). Regardless of this, we all have to do our jobs and live with it. So how can we make our work less frustrating or even get things done faster? Answer is CSS Reset.
CSS Reset is a set of rules, which are meant to set formatting of HTML elements to one and same state troughout all browsers. We all know, that reaching this rare point of equilibrium can be insanely hard. Let CSS Reset do it for us.
There are three simple ways to use CSS Reset in you project:
<link rel="stylesheet" type="text/css" href="reset.css" />
@import url(reset.css);
Personally, I use the first and the second option.
There are many different types of CSS Reset and you can find them on the internet very easily. Where else anyway? The important part is to understand which one should you use and despite the fact that I have my favorite CSS Reset I wouldn't say, that it is the best one. On the other hand, I can honestly say, that it helps me a lot and it perfectly fits my needs.
Most of CSS Resets are trying to do the very same thing. The only difference is in the way of achieving their goal, if achieved at all. I can think of three ways to determinate which CSS Reset should you pick:
Here is a brief overview of three popular CSS Resets:
1.) Minimlistic Reset:
The first CSS Reset I used was very simple:
* {padding:0px; margin:0px;}
You can clearly see, that it doesn't nearly cover all issues you can and will come across. However, this solutions is very popular. I just came to a point where it was not sufficient for my projects nor my style of writing code.
Note: In my opinion you should not settle with this one...
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;
}
/* 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;
}
This is my favourite CSS Reset I mentioned above. I use it on most of my projects and it works well.
Note: Eric does not use any universal selectors, which is why I like his reset. You know exactly what it does and doesn't do.
/*
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;
}
Tripoli is probably most advanced CSS Reset I've ever seen, althoug I've never had a chance to test it.
Yes it does. You will notice that you work faster, you are encountering less cross-browser issues and that coding is easier.
Important: When I started to use reset stylesheets, I usually blamed CSS Reset for any CSS related issue. It might happen to you as well. Don't hesitate to disable it while debugging. Once you've done it, you can continue blaming stylesheet, but this time only yours :). CSS Reset is rarely the cause of your problems.
No, but it's getting close.
Don't be afraid of CSS Reset. Learn it, understand it, play with it, customize it or make your own. Who knows? You might end up as a new Eric Meyer.