Scott Granneman

panorama-089.jpg

CSS Reset

The Code Behind the Curtain ↩

As you know, browsers automatically format HTML in certain ways. For instance, all browsers insert a certain amount of space before & after a paragraph. But how much? And why that particular amount?

The answers to these questions can be found in two articles, both by Eric Meyer:

The Problem & How to Fix It ↩

As you've just seen, each Web browser set margins & padding & other styles in its own way. Obviously, many things are similar—every browser I know of renders <em> with italics, for instance—but many things in the HTML & CSS specs are, well, unspecified.

So how do you fix this?

Reset your CSS to make sure everything will be the same on all browsers.

Considerations ↩

So, should you reset your CSS or not? Let’s look at both sides.

Reasons You Should Not Reset CSS ↩

As with everything in life, there are caveats.

More Work. if you reset your CSS, you will now have to set every HTML element explicitly. For example, the spec for <strong> doesn’t say that text contained within it should appear bold when a browser renders it, but 99.99% of web browsers display text inside <strong> that way. But if you reset your CSS, you’ll now have to explicitly state that text inside strong must be bold, like this:

strong {
    font-weight: bold;
}

The same thing applies to all the other HTML elements you reset. The more HTML elements you reset, the more work you’re going to have to do in your CSS.

You Don’t Care. This is actually a valid argument.

That said, there are good arguments in favor of resetting your CSS.

Reasons to Reset CSS ↩

So why reset CSS? Here are a few reasons you should consider it.

Consistency.

Control.

Solutions ↩

Method 1: The Original ↩

* {
    margin: 0;
    padding: 0;
}

Method 2: Yahoo ↩

Part of the Yahoo User Interface Library. YUI2: Reset CSS

blockquote, body, dd, div, dl, dt, fieldset, form, 
h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, 
td, textarea, th, ul {
    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;
}
abbr, acronym {
    border: 0;
}
q: before, q: after {
    content: '';
}

An easier way is to simply link to Yahoo's CSS:

<!-- CSS Reset -->
<link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

(Of course, check YUI2: Reset CSS often to see if the URL has changed.)

Method 3: Eric Meyer ↩

Eric Meyer's CSS Tools: Reset CSS

/*  http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

An easier way is to simply link to Eric's CSS:

<!-- CSS Reset -->
<link rel="stylesheet" type="text/css" 
href="http://meyerweb.com/eric/tools/css/reset/reset.css">

Really, though, you should download reset.css & use it on your server, so that you’re not beating on Eric’s machine & costing him money for bandwidth usage.


WebSanity Top Secret