Author: Stefan Petrovic

Hello! My name is Stefan, and I'm a web developer working in Houston, Texas. I like creating accessible, clean and attractive websites for people to use and enjoy. Have a look around, and if you like what you see, drop me a line. I'd love to help you make your home on the Internet.

Today usage of CSS is imperative. We have so many different browsers and so many different versions of them which cause troubles to developers and designers who are trying to deal with all that.

I was little surprised when I realized that some of the developers and designers haven't heard about CSS Reset in any shape or form.

What is CSS Reset?

CSS Reset is set of global CSS rules whose goal is to reset, or maybe better to say, set all elements to baseline value.

What we get with it?

Well, this is an attempt to ensure that website looks more or less identical in different browsers.

Why would we do that?

Because major browsers (Firefox, Internet Explorer, Opera, Chrome, Safari, etc) have their own generalized CSS rules, and these rules are totally different between them.

There are plenty of different reset methods already available on the web, and I will mention just some of them which I think are the most popular.

Also I will not tell you whether you should or shouldn't use CSS reset, because there isn't ultimate solution and probably both sides are right. I'm just trying to give you some thoughts about it.

Like Eric Mayer said: "This is a starting point, not a self-contained black box of no-touchiness."

CSS Reset List

• CSS Reset by Eric Meyer

  "The goal of a reset style sheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on."

• Yahoo! UI Library: Reset CSS

  The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to build upon. With CSS Reset loaded, write explicit CSS your project needs.

• CSS Reset by Ed Eliot

  "Less is more"

• Tripoli

  Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects. Tripoli completely resets all default browser standards and rebuilds them quietly with modern web development in mind.

• Vanilla CSS Un-Reset

  Vanilla is meant to be dropped into your style sheet, tweaked and handled to your liking. It's meant as a very base style sheet, so that you don't have to start over every time.

Further reading

A Killer Collection of Global CSS Reset Styles

Create Your Own Simple Reset.css File by Jeffrey Way

CSS Global Reset by Christian Montoya

CSS Frameworks by Kyle Neath

Master Stylesheet

CSS Reset by Dave Woods

Crafting Ourselves by Eric Mayer

Eddie

I will share this with our developers, as this is very beneficial and helpful. Great Post.

Nikola Mitic

12 sites

Thanks Stefan! I will have to start using CSS Reset for sure

Greg

Setting margin and padding to 0 is widely used I believe. For other stuff, especially when it comes to forms, I'm not really sure whether resetting CSS is more work in the end especially for small projects.

Daniel Quinn

I love Eric Meyer's reset. Use it in every project. Some of the resets can be annoying as Greg notes - like stripping the bolding from strong tags or the emphasis from em. But it's a starting point anyway.

Stefan Petrovic

1 site

Thank you all.

@Greg: You are right, but some developers do not recommend that solution, because if you set:
* margin:0; padding:0;
then it will apply as a rule for everything on the web page, which will affect loading speed.

And I agree with you that it would be more work but I am ok with that since I will have better control on it.

Processing, please wait ...

Your name:

Your email:

Your URL:

Comment: