• PREME
• Sep 15,2008
• In: Whatsnew

CSS Reset Techniques

If your are experienced with CSS or have coded a website before, you have probably heard of CSS resets CSS resets are chunks of CSS code designed to make life easier on the coder/designer when coding the website. CSS resets are an extremely useful tool in making your site cross browser comptaible. here are some popular CSS reset techniques:

1. Generic Reset

* {
padding: 0;
margin: 0;
border: 0;
}

The above is the most commonly seen reset, which simply resets the margins, padding, and takes away any default borders (usually on images). A variation of this generic reset can be seen below:

* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}

2. Chris Poteet’s Reset

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Be sure to carefully note some of the specific margins on the above reset and set them to your taste.

3. Yahoo’s CSS Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:”;
}
abbr,acronym { border: 0;
}

And you thought Yahoo didnt do anything productive. I am actually a big fan of this reset and have used it in the past with nice results. I especially like the use of the :before and :after pseudo elements, if only IE would support them!

4. Eric Meyers Reset

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}

:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}

table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* remove possible quote marks (”) from <q> &
<blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

Eric Meyers CSS reset is my favorite reset of them all, it accounts for nearly all elements and there is even a page dedicated to the most current versions of this reset. That’s all next time i’ll be back to publish trick about another CSS techniques to use on your web, C’U