CSS Reset

css-reset

The best way to gain complete control over CSS styles in a project is by resetting or zeroing-out all default browser styles. This removes any variance which different browsers apply, and allows for a consistent cross-browser base on which you can begin building.

There are a few theories on the best way to do this. I prefer to zero-out everything and add only what I need back-in, and my tool of choice is Eric Meyer’s reset code.

I have customized Eric’s script in the example below to suite my needs but you can find the original version here.

Basic CSS Reset

a, abbr, acronym, address, applet, article, aside, audio, b, big,
blockquote, body, canvas, caption, center, cite, code, dd, del,
details, dfn, div, dl, dt, em, embed, fieldset, figcaption,
figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu,
nav, object, ol, output, p, pre, q, ruby, s, samp, section, small,
span, strike, strong, sub, summary, sup, table, tbody, td, tfoot,
th, thead, time, tr, tt, u, ul, var, video
{   
    background:transparent;
    border: 0;
    box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    font: inherit;
        -webkit-font-smoothing: antialiased;
    margin: 0;
    outline:0;
    padding: 0;
    text-rendering: optimizeLegibility;
        -webkit-text-size-adjust: none;
    vertical-align: baseline;
}
 
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup,
main, menu, nav, section
{
    display: block;
}
html
{
    font-size: 100%; /* Set the initial font to the browser default to support user scaling. */
}
body
{
    line-height: 1; /* No unit defined (this is done on purpose). */
}
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;
}