Implementing a Reset CSS Stylesheet
As a website designer and developer I always make sure that the websites I work on are compliant with the latest web standards. This is why I code using XHTML and use CSS as a means of delivering the page layout. The use of CSS as a layout tool offers many benefits but can also provide a web designer with many headaches especially for those people beginning to learn CSS.
The reason for this is that different web browsers render CSS in different ways so that a website that has been designed to perfection in Firefox can display some unwanted behaviour when viewed in Internet Explorer 7, and can then completely fall apart in Internet Explorer 6. This is why I started to use a reset CSS stylesheet to remove and neutralise the style settings of different HTML elements which can potentially cause problems through the cascading characteristics that CSS has.
This reset stylesheet sets the properties of margins, padding, fonts, table and list styling to a zero setting thus presenting a blank canvas with which the website designer can start from.
How to implement a reset CSS stylesheet
Firstly, you’ll need to import your reset stylesheet into your webpage using the following code. This is added in the head section of your websites code structure.
<style type="text/css" media="all">
@import url("css/reset.css");
</style>
Please note that I use the @import method here as opposed to the usual link method of linking to an external stylesheet. This is because older browsers such as Internet Explorer 3 & 4 or Netscape 4 don’t recognise this method.
Next, you’ll need to create the reset stylesheet itself using the following code. Save this into an external stylesheet and save it to the location that you are storing your stylesheets.
* {
text-decoration:none;
font-size:1em;
outline:none;
margin:0;
padding:0;
}
code,kbd,samp,code,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;
}
I have used this reset stylesheet for quite sometime now and while it does mean you need to sometimes re-write some of the properties that the stylesheet resets it does offer a more consistant rendering result in a broad range of modern browsers.
Give this a go and let me know your thoughts.
Tags: css