Skip to content
Web Dev

CSS Reset

A reset removes browser styles that I would otherwise overwrite in every project. I keep it small. Useful browser defaults can stay.

For the complete CSS styling file structure and load order, see CSS Setup.

Why use a reset.css

Section titled “Why use a reset.css”

Browsers add their own margins, list padding, form fonts and other default styles. Some of those defaults are useful, others aren’t. So the CSS reset helps us reset those once at the start and make every browser behave and look the same.

Older resets tried to make every browser render everything identically. Browser differences are smaller now, and removing every default creates more work. For example, I keep italic text on <em> and do not remove list markers from every list.

The reset should only contain rules I want in every project. Colors, font sizes and component styling belong to the other CSS files.

CSS reset examples

Section titled “CSS reset examples”

These two resets are useful references. Both are short enough to understand instead of copying blindly.

This is a shortened version of the reset.css Josh W Comeau uses:

*, *::before, *::after {
  box-sizing: border-box;
}


* {
  margin: 0;
}


body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}


img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}


input, button, textarea, select {
  font: inherit;
}


p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}


#root, #__next {
  isolation: isolate;
}

The reset I use

Section titled “The reset I use”
*,
*::before,
*::after {
    box-sizing: border-box;
}


* {
    margin: 0;
}


body {
    -webkit-font-smoothing: antialiased;
}


img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}


img {
    font-style: italic;
}


input, button, textarea, select {
    font: inherit;
}


p, h1, h2, h3, h4, h5, h6, code {
    overflow-wrap: anywhere;
}


p {
    text-wrap: pretty;
}


h1, h2 {
    text-wrap: balance;
}


ul[role="list"] {
  list-style-type: none; /* Do <ul role="list">, to use when list is semantic*/
  padding: 0;
}


:has(:target) {
    scroll-padding-top: var(--navbar-height)
}


@media (prefers-reduced-motion: no-preference) {
    :has(:target) {
        scroll-behavior: smooth;
    }
}

There are a few decisions worth knowing about:

  • box-sizing: border-box makes declared widths include padding and borders.
  • Media gets display: block and cannot grow wider than its container.
  • Italic alt text styles alt text for when images fail to load.
  • Form controls inherit the surrounding font.
  • Paragraphs use text-wrap: pretty and large headings use text-wrap: balance.
  • A list only loses its marker when it has role="list". This keeps the choice intentional in the HTML.
  • Anchor navigation accounts for the navbar. Smooth scrolling is only enabled when the user has not enabled reduced motion.

The color scheme lives in var.css, because it changes with the theme. Utility classes such as the full-height class is in util.css, because it is a reusable class rather than a reset.

Helpful sources and references