Reset your CSS

What is one of the most annoying problems when developing a CSS based website? The inconsistencies among different browsers. You try to define every little details in your style sheet, only to see your site behave differently in Firefox, Internet Explorer, Opera, etc.

So what can you do about this? Continue creating additional styles for every html element, which results into a bloated CSS file, and hope everything works ok?

Well, there is something you can do! Stop bloating your style sheet, step back a bit and reset your CSS before you move on with your design.

What is CSS reset?

The concept of resetting your CSS comes to address this specific problem with inconsistencies across different browsers.

For example, since Internet Explorer adds different spacing at <p> elements than Firefox, what we want to do is eliminate this difference (and all other differences) and create a level playing field.

Essentially, CSS reset is not a complex process or hard to implement. In fact, it’s very simple.

So how do we reset our CSS?

To get to the point, here is a simple piece of css reset code:

h1,h2,h3,h4,h5,h6,ul,li,em,strong,pre,code {
padding:0;
margin:0;
line-height:1em;
font-size:100%;
}

Padding, margin, line-height and font-size are the obvious attributes that are rendered in a different way across various browsers, and we want to fix that.

What we did in the previous CSS code example, is to set all these attributes to 0 or to a default value. Now we can take it on and style every element in our page the way we want it to be.

That was it?

Yeah, that was (almost) it! With only a few lines of CSS, you can make your websites render consistently across browsers.

Now, before going ahead and adding this code to your style sheet, you need to decide how far you’re going to go in resetting things.

If you google for “reset.css” you’ll get lots of results and lots of sample reset.css files, each trying to cater to different needs.

If you use only some basic tags, you don’t need to reset everything. While if you have a complex site with lots of tags, then you may need to reset more tags.

As a start, I would suggest the following code. It’s simple, clean and resets the most used tags. If you need additional definitions, just add your tag in the list.

body {
padding:0;
margin:0;
}
 
h1,h2,h3,h4,h5,h6,ul,li,em,strong,pre,code {
padding:0;
margin:0;
line-height:1em;
font-size:100%;
}
 
ul,ol,li {
list-style:none;
}
 
img {
border:0;
}

You can add this code directly into your default style sheet, or just create an additional reset.css file, which you can then re-use it for all your sites.

Related posts:

1. Optimise your ‹title› and ‹description› meta tags