CSS reset: what and which?

Choosing not to use a CSS reset can really effect your code when you first start coding your site and look at it across browsers and in the long run create more coding hassle. Have you coded a really basic website for one of your assignments before and it looked fine in Chrome, but when you opened it in Safari or Firefox, it had a weird border of padding around it? Many of our beginning coding assignments don’t use a css reset, so some rules from the browser (which vary from browser to browser) are effecting the display of your code.

Every browser has it’s own set of built in CSS that it applies to the site if you haven’t specified otherwise. This is called the user agent stylesheet. You have probably noticed it when you are using Chrome Developer tools and see a greyed out rule in the css that can’t be changed, but it applying to your element.

user agent stylesheet can be overridden by attaching a reset.css

The greyed out rules circled in red are from the browser applied user agent stylesheet. The only way to change these is to add css rules to your style.css to override them.

You can bring all the user agent stylesheet rules back to a common baseline (no matter what browser you test the site on) by using a CSS reset from the beginning of your project. There are many different options for CSS resets and choosing one is really a matter of preference and site requirements.

I tend to use Eric Meyer’s Reset CSS at least as a starting point on most of my projects, but I am sure there are many other great options out there. In fact, here is a list of The Best CSS Reset Stylesheets by Jacob Gube that details some of the advantages and disadvantages of some popular choices. No matter what CSS reset you choose, know that you can tweak it (as long as it is public domain) to make a personalized reset that can be used on all your future sites.