What is CSS Reset

The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to build upon. With CSS Reset loaded, write explicit CSS your project needs.

Resetting your styles, commonly referred to as CSS Reset or Reset CSS is the process of resetting (or more accurately – setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser.

In fact, one of the biggest challenges in working with CSS is dealing with the different ways in which browsers are set up to interpret rules and styles.

All the ‘big’ browsers (Firefox, Internet Explorer, Opera, Chrome) may generate unpredictable results depending on the version. IE is particluarly notorious for (among other things) drastic differences between CSS interpretation in various versions. IE5.xx for Windows has a number of CSS idiosyncrasies (‘behaviors’?), but virtually every browser has its own quirks that need to be taken into consideration.

The answer is in CSS reset — basically, a way to keep results as universal as possible by defeating any browser-based rules and omissions before your CSS is applied.

CSS Reset. How to use it?

To use CSS Reset, download one from us or create cssreset.css and include the following source file in your web page:

<link rel="stylesheet" type="text/css" href="cssreset.css">

Remember: Use cssreset.css before your main css file!

<link rel="stylesheet" type="text/css" href="cssreset.css">
<link rel="stylesheet" type="text/css" href="your_main.css">

Where it all started

The concept of CSS Reset was first discussed in 2004 by Andrew Krespanis. In his article, he suggests using the universal selector (*) at the beginning of your CSS file to select all elements and give them 0 values for margin and padding, like so:

* {
  margin: 0;
  padding: 0;
}

The universal selector acts like a wildcard search, similar to regular expression matching in programming. Since in this case, the * isn’t preceded by another selector, all elements is a match and therefore all margins and paddings of all elements are removed.

Applying the universal selector margin and padding reset to our earlier example, we now remove all inconsistent spacing between all browsers.

Remember: Some browsers don’t fully support the universal selector