CSS Reset

CSS Reset

A CSS reset provides a consistent starting point for styling webpages by removing or adjusting selected browser default styles that can vary between elements and browsers.

Browsers include built-in styles for elements such as headings, paragraphs, lists, and the document body. A reset lets you establish your own baseline before adding the CSS that controls the design of your website.

Why Use a CSS Reset?

Web browsers apply their own default stylesheet before your CSS is loaded. These default styles provide useful formatting, but they can also introduce margins, sizing behavior, and other styles that you may want to control yourself.

A CSS reset creates a more predictable baseline. Instead of removing every browser style, a modern reset can make selected defaults more consistent while preserving useful browser behavior.

Using a reset can also reduce the amount of repetitive CSS needed when beginning a new project because common baseline rules are already established.

What the Reset Changes

The reset used in this tutorial makes several practical adjustments to common browser defaults. It uses border-box sizing, removes the default body margin, removes margins from common text elements, makes media responsive, and allows form controls to inherit the surrounding font.

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

These rules give your project a more controlled starting point without requiring every browser default to be removed.

What the Reset Keeps

A reset does not need to remove every useful browser default. The reset provided here preserves normal semantic behavior while changing selected styles that commonly affect page layout and consistency.

For example, ordinary lists keep their list markers. List styling is removed only when a list explicitly uses role="list". Links also keep their normal browser behavior, and form controls remain usable while inheriting the page's typography.

ul[role="list"],
ol[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}

This approach provides a useful baseline while leaving the final appearance of the website to your project stylesheet.

Using the CSS Reset

Save the reset as a separate CSS file and load it before your main project stylesheet. Loading your stylesheet after the reset allows your project styles to build on and override the reset rules.

<link rel="stylesheet" href="css-reset.css">
<link rel="stylesheet" href="styles.css">

The reset only needs to be linked once on each HTML document that uses it.

You can also download the reset used in this tutorial and use it as the starting point for your own projects.

Download CSS Reset

CSS Reset Example

The following example includes several common HTML elements. The reset removes selected default spacing and applies a predictable box model before additional project styles are added.

<h1>CSS Reset Example</h1>
<p>This paragraph uses the reset stylesheet as its starting point.</p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

The heading and paragraph begin without their usual default margins, while the ordinary list keeps its normal list markers because the reset does not remove them from regular lists.