{ CSS Resets. }

Objectives:

By the end of this chapter, you should be able to:

  • Explain what a CSS Reset is, and why they are used

CSS Resets

Since we strive to develop the same functionality/style across all browsers, it would be nice if we could start with a level playing field for all browsers. Unfortunately, different browsers make slightly different assumptions about the default styling of a webpage. For example, in Chrome, the body has a default margin of 8px on all sides.

In order to eliminate possible discrepancies across browsers, it's very common to create what's called a CSS Reset. This is just a stylesheet which attempts to overwrite (or reset) any default browser styles with styling that will then be the same across different environments. You typically don't write a CSS Reset yourself; instead, there are a few commonly used resets you can choose from. Here are a couple:

  1. reset.css - this was created by Eric Meyer and it basically resets/clears everything. It's a bit aggressive, but if you want to start from scratch it's a great tool. http://meyerweb.com/eric/tools/css/reset/
  2. normalize.css - https://necolas.github.io/normalize.css/

normalize.css is quite common especially when dealing with responsive design. In order to maintain the same styling and display across all browsers, it's essential to make sure that a standard is set.

When you're ready, move on to Responsive Design

Continue

Creative Commons License