When developing a website, CSS will almost always be a necessity. Maintaining your CSS as you build your website is equally important. However, it is always best to get ahead of maintenance by starting with a baseline. To do this, many developers use a Css Reset file to prevent fighting a CSS wildfire.

In this post, you will discover the CSS Reset file and learn what it does. You will also learn how a CSS file works and how to implement one for your web development. Furthermore, you will see an example of a CSS Reset file, many of which exist. Finally, you will learn why you might use a CSS Reset over other possible options.

Let’s get started.

What is a CSS Reset?

A CSS Reset file circumvents inconsistencies across different browsers when developing websites. All browsers have default rules with properties and values applied to all pages before loading files. Due to the cascading nature of CSS, any styles the browser uses will remain unless explicitly overridden. A CSS Reset file targets all rules that the different browsers apply defaults to and resets them to their minimum possible value.

The following video elaborates on what a CSS Reset file does and how to use it.

This means that their values are either unset, none, or zero — the digit — removing any styles that might be set. This reset creates a consistent baseline to begin creating your CSS rules, resulting in a more consistent view across browsers. Let’s look at an example of what a simple CSS Reset file would look like below.

CSS Reset Examples

The CSS Reset is not the only way to create a baseline like this, and it can also be done using a Normalize file. A Normalize file will change rules to match the browser whose rule is the least flexible, which is different from the CSS Reset file approach.

Let’s look at code examples from each file type to see the differences.

 
/* 
Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari.
*/
 h1 {  font-size: 2em;  margin: 0.67em 0;}

The above code is a snippet from a Normalize file; notice the properties get set to a specific value. The CSS Reset equivalent to this would look like the following code.

 
/* 
Correct the font size and margin on `h1` elements within `section`  and `article` contexts in Chrome, Firefox, and Safari.
*/
 h1 {  font-size: 1em;  margin: 0;}

This code would be the CSS Reset version of the above Normalize code, which corrects the font size and margin values for h1 tags. This code is not actually from a Reset CSS file but simply represents how a Reset would handle things differently.

With all of that said, let’s look at what a simple Reset file snippet can look like in some cases.

 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { 
  margin: 0; 
  padding: 0; 
  border: 0; 
  font-size: 100%; 
  font: inherit; 
  vertical-align: baseline;
} 

Why Use a CSS Reset?

A CSS Reset file does things differently, trying to remove any browser default styles for consistency. This approach doesn’t sound like much of a difference, but the fact is that both methods have very different results.

Let’s look at each example and then discuss the results based on the first-ever web page.

The above is an example of the first website ever created, and it uses basic HTML and no CSS. As a result, it is a simple representation; the styles applied are based on browser defaults and are not consistent between browsers.

The Reset file removes any browser defaults, and you can see the difference this makes in the image below. 

The code for a Normalize file aims to bring defaults across browsers to an even playing field. 

Many developers prefer a reset file as it allows the design to be approached with no presets to consider. Some developers feel that using either type of file is overly repetitive and goes against DRY development practices.

Getting Started Using a CSS Reset File

The choice to use one and which one to use is a personal preference, and there is a lot of debate regarding their use. There are many different opinions and views on the experiences developers have had using them. Moving forward with using a Reset CSS file, you should research the different kinds of Reset files and their advice, tips, and experiences.

You should also try out different Reset files and learn from using them in small projects to find out how you feel about how they work. Discovering your comfort zone will help you identify the best way to approach setting up your project.