2 August 2008 - Posted in CSS
6 Popular 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. Today, we will have a look at 6 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;
}
/* 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.
5. 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.
6. 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 Commons License. */
: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;
}Happy Coding!
Jeff Starr said...
Nice round up of CSS reset styles! I particularly like the way you formatted the various declaration blocks — nice and clean. Of course, there are many more CSS resets available. I hate to drop links like that, but I am confident you will find the article to your liking!
Cheers,
Jeff
August 3rd, 2008 at 2:34 pm
Drew Douglass said...
Hi Jeff,
Im glad you enjoyed it, and thanks for the link, that article was a fantastic resources of a lot of resets!
Best Regards,
Drew
August 4th, 2008 at 11:28 pm
DS said...
Eric Meyer’s CSS reset (compressed) is now hosted on Amazon’s highly available/speedy CloudFront service:
http://d35lae85h6tg07.cloudfront.net/reset.css
November 20th, 2008 at 4:57 pm