What are CSS Resets?
March 11th, 2008 by NikhilA CSS Reset is/are CSS to set a number of element styles to a specific baseline that creates consistency across various browsers.
We all have been the through the nightmares of writing cross-browser CSS’s. So when we start writing our CSS , It is a practice to reset it first to remove/reset any cross browser inconsistencies. CSS Resets , are simple few lines of CSS that you begin your CSS with , giving you a clean base to start building your upon.
The CSS resets that I normally tend to use looks like this
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}ol, ul {
list-style:none;
}h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
Reset the browser font size
Also note the reset that has been applied to browser font size in the following line …
html {font-size: 76%;}
The above CSS resets the browser font size to 10 pixels, and this makes it possible to work with relative font sizes (which is every important from a WAI compliance prespective)
For e.g., in the following definition, font-size in a span is set to 10 pixels and that in the paragarph is set to 14 pixels…
span {font-size: 1em;}
p {font-size: 1.4em;}
Tags: CSS, CSS Resets, Tips & Tricks, Tutorials
Subscribe to ExpressingIT by Email | Follow Me on Twitter