A CSS reset is a set of CSS rules you use as a starting point in order to preemptively quell bugs that may arise due to the Browser Wars. A CSS reset does this by applying consistent values to elements that browsers typically render differently by default (such as margin, padding and font-inheritance). Below is a reset you can use, originally written by Eric Meyer.
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,
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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: top;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
The only thing I’ve really changed here is that I’ve set a default vertical-align to “top” rather than baseline. I’ve found it requires less work and provides more expected behavior – but hey, what do I know? Mod this however you see fit. Incidentally, if you are a fan of the YUI way to do things, then you can grab their CSS reset.
