Web design and the CSS Reset
CSS Reset or Reset CSS are one of the best ways to ensure you have a consistent web layout and design across all browsers. In this post we discuss the different ways and the advantages or disadvantages of using them.
What is CSS Reset and Why use it?
CSS Reset has been around for quite some time now (thanks to Eric Meyer)and the means to achieve the same are numerous.
Smashing Magazine says
Global Reset is needed to ensure the more or less identical cross-browser presentation of your web-sites. By default different browsers use different values for margin, padding or line-height. Global Reset makes sure all (or probably most) browsers render sites identically.
Let me try to explain why the it is important. Let us assume that a browser decides to change the way the visited links are displayed in violet to black. Now imagine you had been using a non resetting CSS. Once the page is viewed in the new browser, what used to violet links will now be black. The problem is not with the fact whether the link should be violet or black, but with the fact that it will not be what you would have wanted them to be. To add to it, the same element could be different in different browsers leading to confused users.
Six Revisions gives a perfect example of what the above situation leads to with this image.
That is just the beginning of things, imagine each margin and padding being aligned differently in the sea of browsers. That sweet image you had positioned so well to merge with the text might just start looking like a lion roaming in Antarctica.
Jonathan Christopher points out some of the advantages that he feels save his day here.
The Other School of thought! (Disadvantages of using CSS Reset)
There is another school of thought among the web designers (when did we agree on one thing ever!) that refutes the use of CSS Reset as bloated and often unnecessary code. Jonathan Snook shouted it out loud in the most humble way back in 2008 by claiming that the ’slight differences’ were acceptable to him and his designs and that he has never felt the need for a reset stylesheet to save time just because each design is poles apart from the last one.
Jens Meiert says it very craftily as
A novice should not use them, an expert would not use them.
Overwriting CSS, load time and hindering usability are the other things pointed by the champions of this thought.
Clearly being a fan of CSS Reset, I will not indulge in sweet talk about how intelligent their reasons are but yes, they are people who know a lot more than me and probably have their reasons for preferring not to use CSS Resets.
So, do I use it or not?
Eric the man says it all so smoothly, that I would not dare to add a word of my thoughts to malign it.
Reset styles clearly work for a lot of people, whether as-is or in a modified form. As I say on the reset page, those styles aren’t supposed to be left alone by anyone. They’re a starting point. If a thousand people took them and created a thousand different personalized style sheets, that would be right on the money. But there’s also nothing wrong with taking them and writing your own overrides. If that works for you, then awesome.
For others, reset styles are more of an impediment. That’s only to be expected; we all work in different ways. The key here, and the reason I made the approving comment above, is that you evaluate various tools by thinking about how they relate to the ways you do what you do—and then choose what tools to use, and how, and when. That’s the mark of someone who thinks seriously about their craft and strives to do it better……
……Because this isn’t a field of straightforward answers and universal solutions. We are often faced with problems that have multiple solutions, none of them perfect. To understand what makes each solution imperfect and to know which of them is the best choice in the situation—that’s knowing your craft. That’s being a craftsman/craftswoman. It’s a never-ending process that is all the more critical precisely because it is never-ending.
So it’s no surprise that we, as a community, keep building and sharing solutions to problems we encounter. Discussions about the merits of those solutions in various situations are also no surprise. Indeed, they’re exactly the opposite: the surest and, to me, most hopeful sign that web design/development continues to mature as a profession, a discipline, and a craft. It’s evidence that we continue to challenge ourselves and each other to advance our skills, to keep learning better and better how better to do what we love so much.
I wouldn’t have it any other way.
Ways to achieve CSS Reset
Disclaimer: Many CSS codes in this articles have been meticulously formatted by Perishable Press for their article on CSS Reset. Jeff Starr from Perishable Press was kind so as to point a missing reference to his site and we are extremely sorry for the honest mistake.
The ways to achieve CSS Reset are many and thankfully each has its own advantages and disadvantages (or rather shortcomings). However this particular entry at CSS Tricks surprised the hell out of me. Seriously 26%!!
Let us now look at the ways to achieve the CSS Reset from some of the best minds on the web (minds probably more useful than yours or mine).
Minimalist Reset
Andrew Krespanis started off the trend with this minimal global reset back in 2004. The universal selector ‘*’ acts as a wildcard and thus all elements fall under this. As a result all padding and margins are removed.
* {
margin: 0;
padding: 0;
}
It is imperative to note that the universal selector is not so universal.
Also the code is very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling. Unfortunately, this is one of the most widely used CSS Reset methods due to its short and crisp nature.
Other variants of this technique include the following:
* {
padding: 0;
margin: 0;
border: 0;
}OR
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}Eric Meyer CSS Reset
This is probably the best thought and useful CSS Reset or CSS Baseline methods that I know of (I know very little). 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 differentCSS 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.
/* 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;
}
You can find more about the code at the official Reset Page here.
The Meyer Reset has been streamlined by web designers so that it is less invasive as following:
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;
}Yahoo UI CSS Reset
YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions.
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
Tripoli CSS Reset
By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.”A set of default-CSS-files is supposed to give you a profound foundation for cross-browser compatible CSS-based designs. All default-values – including dozens of elements – tables, lists, typography, but also headers (h1 – h6), abbreviations, citations, quotes and forms are selected to enable an optimal legibility and well-structured text presentation.
/*
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;
}Tantek 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!
/* 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;
}HTML5 Reset
A modification of Meyer’s Reset for HTML 5.
/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}Other Reset CSS approaches
While the most famous ones have been covered in the article, here are a few others that you might be interested in:
- CSS Global Styles Reset by Kyle Neath
- CSS Global Reset by Christian Montoya
- Master Stylesheet by Crucial Web Hosting
- CSS Browser Reset by Chris Poteet
- Reset CSS by Ed Eliot
Further Resources on CSS Reset
- Six Revisions gives some handy tips to use while using CSS Resets.
- CSS- Reset hosts some of the popular Resets for your use.
- See who is using what Reset with this Twitter poll (#smreset) conducted by Smashing Magazine.
