Why You Should Use Reset Stylesheets

Key Points

HTML document graphic

Image via Wikipedia

Web designers are constantly faced with the struggle of balancing clients who want pixel-perfect cross-browser compatibility and don’t understand the limitations of the technology and their own desire to produce standards-compliant sites that ease their frustrations, lower their workload, and are a source of pride.

Perfection is an Unattainable Goal

There will always be differences in how two browsers approach the same set of HTML, CSS, and Javascript files that make up a website. This is the legacy of the original philosophy of HTML, which was that the document makes “recommendations” to the browser on how information should be presented. Even though we’ve now moved into an era of the semantic HTML where HTML is now intended to be used to define the structure and content of a document and CSS to contain all the information on how it should be presented, we’re nevertheless left with the same problem.

We simply do not have the tools in the HTML and CSS standards to force different browsers with different assumptions to present our content in precisely the same way. Browsers contain different default styles that they apply to content, contain bugs, and have different interpretations of the standards from each other. While browsers have improved substantially, and this stands to make it easier for designers to implement their sites, many users cling to old, out-of-date, bad browsers and clients insist that those browser be supported too. This often means the entire site gets held back  and designers and developers can’t use the latest and best tools available in the standards.

You may ask who cares if the sites created ultimately work? Keep in mind that building in a tonne of hacks to support bad browsers is a guarantee that the next version of browsers won’t work with the site and all the work will have to be done again. That future pass has even more complexity since it involves trying to solve problems within the scope of an implementation that couldn’t envision the issues to come. It also means that now there are even more different browsers to support.

How Reset Stylesheets Help

While there are quite a few different problems that have to be overcome if a website must provide pixel-perfect compatibility (or as near as possible) with a broad number of browsers and versions, one solution is always useful no matter which browsers are targeted: reset stylesheets. Reset stylesheets attempt to nullify all the default formatting assigned by browsers and reset all the HTML tags to having no styles applied.

This should give a standard start point for the CSS in many browsers, which helps eliminate the browser setting some style for you that you didn’t define, thus changing the appearance of the site. You’ve already taken a step to having a better cross-browser presentation, and it’s a painless and standards-compliant step as well.

Some Reset Stylesheets for Your Consideration

These stylesheets support HTML5. HTML5 is the next evolution of HTML, and while it’s still evolving, much of it can be used today in many browsers if the designer is careful about backward compatibility for older browsers he or she must support.

Related Articles


About Fergus

Fergus likes to invent cool titles for himself, such as “Communications Specialist” or “Internet Architect”. What it really comes down to is that Fergus’s passion is internet communication. He believes that helping people communicate more effectively makes the world a better place. To this end, he seeks opportunities to help individuals, businesses, and non-profits to communicate their ideas, products, and services beautifully. Some examples of the types of work Fergus undertakes: web design, graphic design, programming, and search-engine optimization. Fergus also enjoys consulting with people about their existing web sites and strategies as well as their plans. Fergus doesn’t enjoy writing about himself in the third-person quite as much, but sometimes it seems a necessary evil.
This entry was posted in Design, Web and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s