Why a CSS Reset should be at the core of your stylesheet

CSS ResetThe CSS Reset is a little known and often overlooked tool in web design that makes cross-browser and cross-platform compatibility a lot easier. It also ensures that you start with a clean sheet when building CSS-based web sites, whether they be single pages, static sites, WordPress sites or anything else. In my view the CSS reset is so important that web designers, even those just starting out, should use it at all times and make it the foundation of any and all style sheets they create. In fact the employment of the CSS Reset is a main tenant in both my books on Expression Web 2 and Expression Web 3 and is the basis of all my own design projects including the free WordPress theme Typograph.

Why do I need a CSS Reset?

If you’ve never worked with a CSS Reset before I can pretty much guarantee that the question you are itching to ask is “why do I need a CSS Reset”. After all, you’ve designed or worked with numerous CSS-based sites in the past and even though they didn’t have a CSS Reset they work just fine. Right? Well, let me ask you this: If you’ve ever tried to design a site from scratch using CSS, and you’ve tried to make it cross-browser compatible, you’ve probably noticed that your styles don’t always look the same in different browsers even though they should. In most cases this has been a Internet Explorer vs. the rest type of battle and you’ve probably written it off as such and just picked a side. But that’s not the only, or right for that matter, solution. If you run into a browser incompatibility issue where CSS is concerned, it’s more often than not due to the fact you haven’t properly defined your styles leaving it up to the respective browser to make guesses as to what you want the site to look like.

To put it in simpler terms: If you don’t define all the default CSS parameters in your style sheet, the browser will use its default parameters instead. And since different browsers have different parameters your site will end up looking different depending on what browser you use.

What does the CSS Reset do?

As the name suggests, the CSS Reset resets all the default CSS parameters to a neutral position thus overriding any predefined assumptions at the hands of the browser. That’s a bit of a vague explanation so I’ve made a visual example that illustrates it perfectly:

CSS Reset example

The image above shows the same piece of basic HTML displayed when no CSS is defined and when the CSS Reset is applied. It is pretty obvious what happens: When you create a HTML page with some basic tags like <h1>, <p>, <blockquote> and <ul> without defining the styles of these tags with CSS, the browser applies its default stylesheet to these tags. But like I said earlier, different browsers have different standard stylesheets and as a result the page won’t look the same across all browser. And although this isn’t really a big problem when we’re talking super-basic stuff like what is displayed above, it becomes a serious pain in the neck when you create complicated CSS layouts.

So all I’m doing is creating more work for myself?

Unfortunately the gut reaction from a lot of people when they see the image above is “Oh crap! Why would I ever do that? I just create tons of work for myself.” Well, that’s partly true: With a CSS Reset applied you do have to manually define all your styles unless you like the reset look (I don’t). But on the bright side that also means you are now in complete control of every aspect of your site and nothing is left to chance any more. And in my book the former far outweighs the latter.

If that doesn’t convince you, consider this: Before I startet using the CSS Reset in all my projects, I spent a lot of time trying to jury rig my code into playing nice in all browsers. This often included using IE hacks and JavaScript. After emplying the CSS Reset I only rarely encounter these problems, and when I do it’s usually because I made a mistake somewhere.

Alright, I’m sold. How do I start using the CSS Reset?

There are several CSS Resets available out there. The one I use is CSS guru Eric A. Meyer’s Reset Reloaded. It seems to be the most comprehensive reset and it is constantly being updated. To employ it I simply copy the code from the site and paste it in at the very top of my stylesheet. When it comes time to work on my own styles I make new ones leaving the CSS Reset intact. Cascading Style Sheets work as a cascade from the top down which means with the CSS Reset on top the browser will first read all the reset styles and then whatever styles I define below and apply them in order. That way the layout is guaranteed to be clean of browser junk and only shows my style code.

That really is all there is to it. So employ the CSS Reset and go forth and code.

Further Reading

Sixrevisions.com has published an excellent series on the history, options and reasons for and against using CSS Resets. These articles are well worth a read and a comment as well.

12 thoughts on “Why a CSS Reset should be at the core of your stylesheet

  1. What I don’t understand about resets is why we reset everything to zero instead of simply resetting everything to a standard value. Like for an ordered list, why remove the numbers?

    Not that I don’t see the value of a reset, I just feel a FULL reset is overkill. You’ll be redefining some of the same styles every time. Chances are everyone is redefining many of the same basic ones.

    Just my two cents.

    1. I think the original idea of the full zero reset is more a template than something to be used over and over. However in my experience the complete reset actually provides an excellent starting block for each new project – complete clean slate every time.

      Of course you can always reduce the reset or create your own but then you may need to change it to customize each new project. For me it works better to use it as is.

  2. I agree. A little over a year ago I read about Eric Meyer’s CSS reset and adopted a slightly modified one for myself (I would guess that everyone’s is at least a little different). I was a little perturbed at first because, well, it did mean more work in the sense that I had to define everything. However, it wasn’t too long into the project that I found that I wasn’t chasing my tail trying to make four different browsers display reasonably similarly.

    In effect, although I had to “set defaults,” so to speak, I knew what they were, and was not dealing with a hodge podge of defaults determined by others. And I was able to decide the units, using ems where I felt they worked best and pixels elsewhere.

    I feel quite comfortable now starting with a clean slate, and would never go back to the hit or miss occasioned by accepting browser vendors’ defaults again.

  3. I agree, The slightly larger workload might seem annoying at first but it pays off with the peace-of-mind of knowing you’re in complete control.

    I had many frustrated coding sessions in my early days when using things like heading tags…defining the colour and size etc. but not understanding that certain margin and padding sizes are created by default.

    Yahoo have a nice little download for CSS Reset…http://developer.yahoo.com/yui/reset/

    Simply add the CSS doc to your website and add the link relations in the head (before your other stylesheets) and it resets everything before your styles start.

  4. Practice CSS. Get used to it. Sure, there are some things we’re accustomed to in table layout that cannot be replicated under current CSS implementation. In time, it will be. Get on the train now, because when the time comes that there’s no aesthetic excuses to prefer table layout, you will be prepared.

Comments are closed.