CSS Stylesheet Reset Template

Posted by Josh in Articles on 12 28th, 2008 | no responses

The overall goal of a CSS reset is to reduce the number of browser inconsistencies in things like default line heights, margins, heading font sizes, and so on. Reset styles quite often appear in CSS frameworks, and are essential to keep the abominable IE Monster at bay (at least temporarily).

The reset styles listed below are pretty generic, but this is done quite intentionally. I haven’t set a default background color or any default font color, for example. I wouldn’t really recommend using this “as is”, for your own projects. It should be tweaked, modified, extended, and otherwise adjusted to match your specific reset needs. Fill in your preferred colors for the page, links, and so forth.

Reset Template
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,b, u, i, center,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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Keep in mind that this list isn’t quite “all inclusive”, and as I mentioned previously, should be conformed to meet your specific needs at the time. Now I know that there is bound to be one of you out there who thinks that cutting and pasting thing is for the birds, and quite simply is just TOO MUCH WORK so I’ve also uploaded the stylesheet for you to download if you’d like (you lazy bum).

  CSS Reset Template (732 bytes, 1,014 hits)

You’ll notice I’ve added a download counter to that link… It’s not necessarily accurate, as it really only counts the “clicks” it gets. However, it still represents just how many of you people are just plain LAZY!!! LOL :)



No Responses to “CSS Stylesheet Reset Template”

  1. Jim says:
    December 28th, 2008 at 8:37 pm

    A great article to have as no reset can cause a lot of problems. And for the newbie coder that can cause a lot of headache.

    Reply
  2. Josh says:
    December 28th, 2008 at 9:19 pm

    yes, using a reset can dramatically decrease the amount of headaches you have while trying to make your site “cross browser compatible”.

    Reply
  3. Black Glossy Interface Style Menubar Tutorial - The Coding | Eight7Teen says:
    January 4th, 2009 at 4:24 pm

    [...] was basically just a super minimized document reset that contains only the resets needed to ensure that the menubar will display correctly. However, if [...]

    Reply

Leave a Reply