The Importance of Using Reset CSS Stylesheets - January 29th, 2008
It’s well known that every browser has different default settings in the visual representation of HTML elements. For this reason it is very useful to implement a reset CSS file that removes and neutralizes the inconsistent default browser styling settings.
A good CSS reset stylesheet should clear all default margins, padding, font styling, table properties, list styles, and so on. Creating in this way a neutral foundation accross all A-grade browsers and providing a good base upon which you can explicitly declare your own CSS properties.
For example if you need to set up different styled versions of an <h1> tag accross a site you may find yourself resetting browser default rules over and over again becoming much harder to maintain.
How to use
Firstly import the stylesheet in your HTML file by placing the following code in the <head> section and before any other stylesheets.
I use @import instead of link because older browsers such as Netscape 4, IE 3 and 4, Konqueror 2, and Amaya 5.1 don’t recognise it.
<style type="text/css" media="all">
@import url("PATH-TO-YOUR-CSS-FOLDER/reset.css");
</style>
Secondly create your reset.css file. Here’s one that I use below, feel free to customize it to suits your own needs:
* {
text-decoration:none;
font-size:1em;
outline:none;
margin:0;
padding:0;
}
code,kbd,samp,pre,tt,var,textarea,input,select,isindex {
font:inherit;
font-size:1em;
}
dfn,i,cite,var,address,em {
font-style:normal;
}
th,b,strong,h1,h2,h3,h4,h5,h6 {
font-weight:400;
}
a,img,a img,iframe,form,fieldset,abbr,acronym,object,applet {
border:none;
}
table {
border-collapse:collapse;
border-spacing:0;
border:0;
}
caption,th,td,center {
font-weight:400;
text-align:left;
vertical-align:top;
}
body {
line-height:1;
background:#FFF;
color:#000;
}
q {
quotes:"" "";
}
ul,ol,dl,li,dt,dd dir,menu {
list-style:none;
}
sub,sup {
vertical-align:baseline;
}
a {
color:inherit;
}
hr {
display:none;
}
font {
font:inherit !important;
color:inherit !important;
}
There’s also a compact version of the same file.
The catch…
The only problem about resetting all HTML elements is that you need to re-declare all styling properties, resulting in bigger CSS files. Nevertheless CSS reset allows you precise control over your designs and ensures crossbrowser conformity.
Tino
SEO Programmer
