Publishers of technology books, eBooks, and videos for creative people

Home > Blogs > To CSS Reset or Not to CSS Reset

To CSS Reset or Not to CSS Reset

Question: Which Global Reset for CSS Should I Use?

The short answer is the simplest one possible.

The slightly longer answer is that you should reset some styles, but do so with a good reason.

The long answer is that the exact CSS reset you choose will depend on the needs of your design. I like to keep my own reset simple, relying on adding styles to specific tags as needed. However, there are several styles that are inconsistent or (in my opinion) poorly set in most browsers.

The argument for redefining important CSS properties (generally to none or 0) are straight forward:

  • Reduces bad styles: Undoes some of the questionable and downright annoying styles added by browser manufacturers as well as the styles that simply do not work. One that comes springs to mind is using an outline to highlight items that are in focus such as form fields. While highlighting is useful for keyboard navigation, you should design this yourself.
  • Eliminates design by default: Sets a level playing field from which to begin a design. Rather than allowing the browser manufacturers dictate how your pages look, you are now in control.
  • Browser style consistency: Ensures values across all browser types and versions are the same. Since browsers vary their default style values slightly, a good reset will allow your designs to appear with greater consistency, regardless of how your visitor is viewing it.

There are also several counter arguments to be made against a global reset, although I find their logic to be mostly flawed:

  • Download time: Adds more code and thus more load time. This is a stretch though, since the amount of added code will be small and by resetting the styles in a single place, you are likely eliminating repetition of the same definition in multiple selectors and thus reducing the amount of code.
  • Repetitive redundancy: Many of the styles will simply be overwritten by styles later in the cascade. While possibly true, many styles will not be changed, so the global reset, while redundant in some cases, fills in the gaps.
  • Rendering time: Applying styles globally to every tag puts a burden on the browser's rendering engine. This is mostly an argument against using the universal selector (*), which would apply the styles to every single tag. However, I have not seen any data showing exactly what this lag would be, and haven't found any noticeable degradation in my own tests, even on complex pages.

Far too many Web sites are designed by default. The designers and developers allow the browser manufacturer to have the final word on how the content is displayed. By forcing you to set your styles, a good CSS reset can keep you from vanilla designs.

Which of the many different CSS global resets you choose will depend on the needs of your particular project; however, I recommend keeping them as simple as you can.

What to Reset

As a designer, I recommend resetting many of the typographic and box styles and then setting your own defaults. Beyond not allowing the browser to set the direction, another good argument for resetting styles is that different browsers will have slightly different values

  • Padding, borders, and margins: These are the the main styles that designers like to reset, most especially because these vary so much from browser to browser.
  • Text underlining: There is no good reason to ever use the text-decoration property to underline text. I have never seen a design where underlining didn't do anything more than simply add visual noise, even for links. That is not to say that there is never a case where text should be underlined. Underlining text, though, is much better handled using the border-bottom property. Border-bottom gives more precise control, allowing you to specify the thickness, color and line style of the underline.
  • Line height: The default for line height on text is 1em, which means the text is has little or not breathing room. All text can benefit from bumping this up a bit to at least 1.4em.
  • Outline: Outlines are applied by some browsers (you know who I mean, Safari) to highlight elements like form fields when they come into focus. While this is a good idea, the nature of this highlight should be up to you, not the browser.
  • Vertical alignment: Vertical alignment is tricky to deal with, and rarely works the way you expect it to. The best thing to do is set the vertical alignment to the baseline and then use relative positioning to move elements up or down from there manually.
  • Other?: These are the basics, but most CSS resets will go beyond this, cleaning up other perceived problems, generally with specific tags implementation. We'll look at each a little later in this article.

How to Reset

Resetting values is really a misnomer; All you are actually doing is setting styles for the HTML on your page, overriding the browser’s default styles.

  • Keep it simple: Don’t reset styles unless you need them reset. If the browser defaults are not causing a problem, then it’s okay to leave them.
  • Keep it compressed: You are adding extra code that you are unlikely to want to change. take out all spaces, tabs, and line breaks.
  • Keep it at the top: Since this is meant to override the browser default styles and not interfere with your other styles, always make sure that the override comes first in the cascade order.

There are two basic ways of resetting all of the styles, either by using the universal CSS selector, which is simpler, or by listing each tag individually, which is more backwards compatible (i.e., they work in IE6).

A Simple CSS Reset

The easiest way to reset styles is with the universal selector and set the default styles you want applied to all tags:

* { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; line-height: 1.4em; vertical-align: baseline; text-decoration: none; }

This is a nice, quick way to get the most important styles reset, but has one drawback: Internet Explorer 6 does not recognize the universal selector. If you are concerned about supporting IE6, then you will want to include all of the HTML tags in the selector list. The advantage of using the universal selector, other than compactness, is that it will always apply itself to new HTML tags as they become available.

Below is the same script compressed to make it as lean as possible:

YUI 2: Reset CSS

Yahoo! developed YUI2: Reset CSS to remove and neutralize "the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions."

This CSS Reset addresses the styles of many specific HTML tags, zeroing them out, but also takes care of some problems with font sizes, weights, and even the use of quotation marks.

Eric Meyer's Reset

Partially in response to Yahoo, noted Web pundit Eric Myer developed his own CSS reset script. According to his blog, he felt that the Yahoo code went too far in some areas and not enough in others. This script is useful for resetting typographic styles.

Undo HTML CSS

After working on the CSS 2 specification as well as the ill fated Mac version of Internet Explorer, Tantek Çelik is in an excellent position to know where the pain points are in CSS. Tantek's own CSS reset is part sublime and part madness, but worth a look.

This reset not only removes underlines from links, but also borders from linked images, and sets the font size to 1em for headings, code, and paragraphs.

Tripoli’s CSS Reset

Although billed as a CSS reset, the Tripoli CSS Reset by David Hellsing borders on becoming a CSS frame work. Unlike other Resets which set values to 0 or none, this reset sets up a complete typographic scale and style.

Jason Cranford Teague has been on hiatus for the last few months, working on his new book, Fluid Web Typography, which will be out in December. His most recent book Speaking In Styles: The Fundamentals of CSS for Web Designers, is available now online and in finer books stores.

Jason is back and ready to answer your Web design questions. Ask a question, win a book! Jason will be answering Web design questions each week, and each week the person whose question he chooses will win a copy of his latest book Speaking In Styles.

Follow Jason on Twitter: @jasonspeaking.

Comments

comments powered by Disqus