Reset CSS

This reset CSS normalizes elements across most modern browsers. It is a good starting point, along with valid (X)HTML, for eliminating those pesky cross-browser style issues. This file has been evolving over the past several years as I modified and optimized it during my work as a web developer.

/* BEGIN HTML RESET */
html {font-size:100.01%; height:100%; margin-bottom:1px;} /* 16px font */
body {font:75%/1.25 Arial, Helvetica, sans-serif;} /* 12px font, 15px line-height */
:focus {outline:0;}

/* BLOCK ELEMENTS */
address, blockquote, body, div, h1, h2, h3, h4, h5, h6, hr, p, pre {
	display:block; margin:0; padding:0; border:0; outline:0;}
p {margin:1em 0;}
address {font-style:italic;}
blockquote {margin:1em 3em;}
h1, h2, h3, h4, h5, h6 {font-weight:bold;}
h1 {font-size:167%; margin:0.75em 0;} /* 20px font */
h2 {font-size:150%; margin:1em 0;} /* 18px font */
h3 {font-size:133%; margin:1.125em 0;} /* 16px font */
h4 {font-size:117%; margin:1.285em 0;} /* 14px font */
h5 {font-size:100%; margin:1.5em 0;} /* 12px font */
h6 {font-size:92%; margin:1.63em 0;} /* 11px font */
pre {font-family:'Courrier New', Courrier, monospace; 
	white-space:pre; margin:1em 0; font-size:117%;}
hr {height:2px; border:solid 1px; margin:0.5em auto;}

/* INLINE ELEMENTS */
a, abbr, acronym, bdo, cite, code, del, dfn, dir, em, embed, iframe, 
img, ins, kbd, object, q, samp, small, span, strong, sub, sup, var {
	display:inline; margin:0; padding:0; border:0; outline:0;}
abbr, acronym {border-bottom:1px dotted; cursor:help;}
strong {font-weight:bold;}
cite, em, var, dfn {font-style:italic;}
code, kbd, samp {font-family:'Courrier New', Courrier, monospace; font-size:117%;}
ins {text-decoration:underline;}
del {text-decoration:line-through;}
sub {vertical-align:text-bottom; font-size:83%; line-height:normal;}
sup {vertical-align:text-top; font-size:83%; line-height:normal;}

/* TABLE ELEMENTS */
caption, col, colgroup, table, tbody, td, th, thead, tfoot, tr {
	margin:0; padding:0; border:0; outline:0;}
table {border-spacing:0; border-collapse:collapse; text-indent:0; margin:1em 0;}
caption {text-align:center;}
tbody, thead, tfoot {vertical-align:middle;}
th, td {border:1px solid; padding:.5em;}
th {text-align:center; font-weight:bold;}

/* LIST ELEMENTS */
dd, dl, dt, li, ol, ul {margin:0; padding:0; border:0; outline:0;}
dl, ol, ul {margin:1em 0 1em 2em;}
li, dd {margin-left:1em;}
ul {list-style:disc outside;}
ol {list-style:decimal outside;}
ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol, dl dl {
	margin-top:0; margin-bottom:0;}
ol ol, ul ol {list-style:lower-alpha;}
ol ul, ul ul {list-style:circle;}
ol ol ol, ol ul ol, ul ol ol, ul ul ol {list-style:lower-roman;}
ol ol ul, ol ul ul, ul ol ul, ul ul ul {list-style:square;}

/* FORM ELEMENTS */
button, fieldset, form, input, label, legend, optgroup, option, select, textarea {
	margin:0; padding:0; outline:0;}
form, label, legend, fieldset {border:0;}
fieldset {margin:1em 0;}

/* END HTML RESET */

A few notes: The <body> tag has defined a default font-family as “Arial, Helvetica, sans-serif,” and a default font-size of “75%” which is generally 12px across browsers. These can be changed to suit your needs.

There are no color declarations in this file. These may need to be normalized, as Internet Explorer, for example, uses a light gray for table borders, while FireFox uses black. I feel these types of declarations should be left to the designer.

You may also notice there is no * {margin:0;padding:0} declaration. This technique seems a bit heavy handed and can’t be good for rendering performance


One Comment on “Reset CSS”

  1. Dersi Dersleri Says:

    CSS “Cascading Style Sheets” Lessons
    css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm

Leave a Comment