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:
- Really Undoing html.css ~ Eric Meyer explains how & why your Web browsers display HTML markup the way they do.
- Fractionally Restoring html.css ~ After removing the built-in styles used by your web browser, Eric Meyer tells you how to restore the ones you need.
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.
