A CSS Reset is a stylesheet that removes or "resets" all the default styling applied by web browsers to HTML elements. Different browsers have their own default styles (called the "user agent stylesheet"), which can cause inconsistencies in how your website looks. A reset provides a clean, unstyled slate, ensuring a consistent base for you to apply your own styles across all browsers.

Reset vs. Normalize

There are two main approaches to achieving browser consistency:

Reset CSS: This method takes a more aggressive approach by removing almost all default styles (margins, padding, font sizes, etc.). The goal is to start with a completely blank canvas.
Normalize CSS: This is a more subtle method. Instead of removing all styles, it preserves useful defaults (like headings being larger than paragraphs) and only corrects bugs and common browser inconsistencies.

Today, many developers prefer a modern reset that combines the best of both worlds, like the one by Andy Bell or Josh Comeau.

Practical Examples

A reset is simply a CSS file that you include before your own custom styles.

Code (CSS):

/* A simple, classic CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Result:

Before Reset

List item 1
List item 2

After Reset

List item 1
List item 2

Code (CSS):

/* A more modern reset for lists */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

Result:

This specifically targets lists, removing their bullets and spacing, which is a common practice.

Best Practices

Load it First: Your reset stylesheet should always be the first one loaded to ensure your custom styles can override it correctly.
Don't Over-Reset: Be careful not to remove styles that are useful for accessibility, such as focus outlines. Modern resets are designed to avoid this.
Choose a Proven Reset: Instead of writing your own, it's often better to start with a well-tested reset like Normalize.css, Tailwind's Preflight, or a modern reset from a reputable developer.