Scott Granneman

panorama-045.jpg

CSS Reset

On this page…

    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