Computer and Business Skills training

Sign Up
Home / HTML / Reset Stylesheets

Using HTML Reset Stylesheets

One of the challenges in web design is in making your pages look consistent across the different browsers. Every browser has a user agent stylesheet which it uses to provide default style values when rendering a web page. In the absence of any other style rules, the browser falls back to the user agent stylesheet values to "fill in" missing property values.

For example, here is a very simple HTML page with no styles other than the browser's (Chrome in this case) user-agent stylesheet applied:

HTML Reset Stylesheets

The problem is, there is no "universal" default style – the different browsers each have their own ideas of how the various elements should look. Although many of the modern browsers' default styles look pretty close, there are some variations between browser stylesheets that could subtly throw off your design from browser to browser.

While the goal of web design should not be to make everything pixel-perfect, we should strive for as much cross-browser consistency in rendering and behavior as possible. One method used to accomplish this is through the use of "reset" stylesheets.

What is a reset stylesheet?

Reset styles were first used in 2004 as a way to standardize how the browsers rendered your web pages. Some of the earliest did nothing more than eliminate the margin and padding from all the elements (called a "hard" reset) while others went a bit further, resetting element font sizes, stripping text decorations, and so on.

The results after applying the reset style were just plain-looking text that was all the same size – not very pretty at all. This is the same page as above, with Eric Meyer's Reset CSS reset stylesheet applied:

Eric Meyer's reset style sheet

The intent behind using a reset style is that the designer should have full control over how their web page gets rendered by the browser. By using a reset style, then defining their own styles, the designer can be assured of what CSS property values the browsers are using for every element.

A common criticism of using reset stylesheets is that they make your CSS redundant, which violates what's known as the DRY (Don't Repeat Yourself) principle. Using a reset style to zero out an element's properties, only to have to redefine them later, is extra, unnecessary work, when the style could simply have been set once to begin with.

Others argue that this redundancy is a good thing, in that it forces the designer to properly account for the elements and their style properties used on the site. If an element is missed it quickly becomes apparent when the design is rendered. It also allows for separation of the reset stylesheet from the styles used in a particular project.

CSS Normalization

Having to completely define the styles on the elements after using a reset style is admittedly a bit of a chore to do for each project. It would be much easier if we could just let the user-agent stylesheets do most of the heavy lifting, and then we simply change what we need. Although we can’t rely on the browsers' stylesheets to give us a consistent look, we have another option.

In response to the need to make site design a bit easier, CSS normalization stylesheets began to be developed. These stylesheets went a step beyond simply resetting the styles and defined their own base styling, much like the user-agent stylesheets, but integrating many of the most common styling practices.

Here's our sample page again, this time using Sanitize.css:

CSS Normalization

As you can see, there's a good bit less work involved in defining our projects' custom styling when using a normalization stylesheet instead of just a plain reset style.

Beyond Reset and Normalization Stylesheets

Some of these boilerplate stylesheets eventually evolved even further (or got incorporated) into larger frameworks that not only normalized the page's CSS, but also provide pre-built UI components, often with the help of some JavaScript. Some libraries just include style themes and UI components, like jQuery UI. Others provide a framework for building layouts, including responsive layouts, such as HTML5Boilerplate and Bootstrap.

Which Should You Use?

The choice of whether or not to use some kind of reset style really depends on your (or your team's) preference as well as the project requirements. I do suggest at least starting with one of the normalization stylesheets instead of a basic reset stylesheet to make your life easier. If you're developing a new design that will be responsive (and it should be), Bootstrap is a popular choice.

Some popular reset stylesheets:

CSS Normalization stylesheets:

Toolkits and Frameworks:

Related HTML/CSS Lessons

Creating a Full-Height Web Page Layout

Onsite HTML/CSS training

Through our network of local trainers we deliver onsite HTML/CSS classes right across the country. Obtain a quotation for group HTML training.

To view a sample of our past students testimonials, please click on the following link: HTML class reviews.

Why train with us?Need Group training quotation?Fresh Starbucks brewed every dayFREE Class Repeat with each course