Overview

If you've spent time using HTML and CSS you've likely encountered the default styles for your browser environment. One example of a browser default is the margin: 8px; applied to the body in most major browsers. While this single default is easy to notice and override, it's important to remember that there are a variety of defaults which can impact the look of our pages. Each of the solutions we'll cover has a different approach, but they share the same goal: to minimize the visual inconsistencies between browsers.

Reset

A reset works by trying to remove some or all of the default styles in order to create an environment that is barebones, but consistent across browsers, and from which we can focus on adding only the styles we want. The example below shows a basic reset, it removes the padding and margin from every element, and would require us to assign new values for these properties as we developed our pages.

/* Remove default browser padding and margin */
* {
  padding: 0;
  margin: 0;
}

One popular reset which was more widely used before the development of the other approach we'll cover was the Eric Meyer Reset. It was originally proposed by Eric in a 2007 blog post. It went on to be widely used, and has been kept up-to-date as standards have evolved. While useful, other solutions have since been developed and are largely acknowledged as improvements on the reset approach.

Normalize

In 2011 Normalize.css was created as an alternative to resets, and it chose to address the issue in a different way. Instead of trying to erase default styles it aimed to preserve the many useful defaults, and only adjust the specific styles that needed normalizing across browsers.

One reason it likely gained popularity is because using it meant significantly less rework for developers when compared to some of the heavier resets. This is apparent when you consider that after the reset the developer would be responsible for redeclaring values for all the properties they just erased. On the other hand since normalize kept the good defaults and adjusted the inconsistent ones styles wouldn't need to be redeclared.

Conclusion

CSS Resets and Normalize.css are two common approaches for dealing with default browser styles. While using resets as a primary approach to browser consistency has grown less popular in the face of more elegant solutions, I do think the case can be made for a hybrid approach. Such an approach could use a simple reset to zero out the properties you'd wanted full control over (margin and padding), while leaving the bulk of the consistency work to be done by something like normalize.