CSS Resets to improve website its browser compatibility

A couple years back a revolution began against the ugly websites with tables. Many people adapted the use of XHTML with the mark-up language CSS. These steps drastically improved the web, but unfortunately, the developments are too good to be true.

Why? Because we live in a web-world where browsers define the look of many CSS properties. Modern browsers like Firefox, Internet explorer, Opera, Safari, Netscape and all the others have generalized their own rules. Usually, a webdesigner can’t pay attention to all the rendering rules of all those different browsers, so usually a website will not look the same on every computer.

Have people been talking about this? Ofcourse, lots of. A lot of CSS developers didn’t want to use any CSS styles they didn’t specificy in their CSS file, so they started to use “CSS Resets”. They included lines of CSS in the beginning of their file to clear their website of unwanted CSS declarations. It worked and lots of CSS reset variants have entered the CSS developer scene ever since.

I will show you some and explain them to you.

A couple populair CSS-Resets

Simplest

This reset I used to use is the most simple on available. It resets the border, padding and margin to zero on every element HTML contains.

*{
padding:0;
margin:0;
border:0;
}

Normal

When I was researching this topic, I found this interesting CSS Reset, which I think is the best available. It covers the basic aspect every website needs and absolutely nothing more, which is great for your optimized CSS files as well.

* {
border: 0;
padding: 0;
margin: 0;
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
}

Other, more extensive resets

Eric Meyer’s reset - This is a very extensive reset, it covers everything! It is one of the most populair reset available.
Yahoo!’s Reset - Another large reset, which in my opinion is too big and is covering too many elements most CSS developers will not use in a normal website.
Rik Lomas’ Reset - Rik created a standard CSS reset file, but an optimized file as well. Great to reset everything and make sure your webpage loads fast as well.

I am sure there are more CSS reset files out there, but I think this list covers the most important parts. You have seen sizes vary on complexity. I hope you are going to use CSS resets to make sure your website use the standard CSS rules in every browser. In the end, this will speed up your designing process.

Thanks for reading.