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. Today, we will have a look at 6 popular CSS reset techniques.
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;
}
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.
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!
http://developer.yahoo.com/yui/reset
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;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
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.
Condensed Meyers 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;
}
fieldset, img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-weight: normal;
font-style: normal;
}
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;
}
A condensed version of the larger Meyer Reset.
Tantek’s Reset
/* undohtml.css */ /* (CC) 2004 Tantek Celik. Some Rights Reserved. */ /* http://creativecommons.org/licenses/by/2.0 */ /* This style sheet is licensed under a Creative CL. */ :link, :visited { text-decoration: none; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6, pre, code, p { font-size: 1em; } ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { padding: 0; margin: 0; } a img, :link img, :visited img { border: none; } address { font-style: normal; }Tags: Cross Browser, CSS, Reset CSS, Techniques
