CSS Reset & Normalize

Every browser ships its own built-in stylesheet (a user-agent stylesheet) that applies default styling to raw HTML before any of your own CSS runs — headings get bold and larger text, lists get bullets and indentation, buttons get platform-native chrome, and paragraphs get vertical margin. These defaults are useful for an unstyled document, but they're rarely what a designed interface actually wants, and — worse — they're not perfectly consistent across browsers. A "reset" or "normalize" stylesheet exists to deal with that inconsistency before your real styles are applied.

Two different philosophies

"Reset" and "normalize" are often used loosely as synonyms, but they historically describe two different approaches to the same problem:

	Reset (e.g. Eric Meyer’s Reset)	Normalize (e.g. normalize.css)
Philosophy	Strip almost all default styling to a flat, blank baseline	Make defaults consistent across browsers, while keeping sensible baseline styling
Headings	`font-size` and `font-weight` zeroed out — an `h1` looks like plain text	`h1`–`h6` keep sensible relative sizing and boldness, just made consistent
Lists	Bullets and indentation removed entirely	List styling largely preserved
Work required after	You must explicitly restyle nearly everything, even basic hierarchy	Less follow-up work — you're adjusting a reasonable baseline, not building one from zero

Eric Meyer's classic reset (2007-era) is the canonical example of the first philosophy — a short stylesheet that zeroes out margin, padding, borders, font-size and font-weight across a long list of elements, giving every browser an identical, mostly unstyled starting point:

CSS

/* Eric Meyer's Reset CSS v2.0 (excerpt) */
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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

normalize.css, released years later, took the opposite approach: it keeps useful default styling (like bold headings and a readable base font stack) but patches known cross-browser inconsistencies — for example, historically fixing inconsistent sup/sub vertical alignment, or the tricky default sizing of button and input elements across browsers.

The modern minimal reset

Today, most projects use neither of the above in full. Modern evergreen browsers are already far more consistent with each other than they were in 2007, so the current trend is a short, curated "modern CSS reset" that fixes only the handful of defaults that still reliably cause friction:

CSS

/* A compact modern reset */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

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;
}

box-sizing: border-box everywhere — makes width/height include padding and border, which is almost always what you actually want when sizing boxes.
margin: 0 on every element — removes inconsistent/surprising default margins (like the classic default <h1> margin) so spacing is something you opt into deliberately.
img { max-width: 100%; display: block } — prevents images from overflowing their container and removes the small inline-baseline gap images get by default.
font: inherit on form controls — form elements don't inherit typography by default in most browsers, which this fixes in one line.

Which should a new project use?

Full Eric-Meyer-style resets have mostly fallen out of favor — modern browsers no longer disagree wildly enough to justify zeroing out everything, and doing so just adds work restyling basic hierarchy. normalize.css is still perfectly valid, but most modern projects now reach for a short custom reset like the one above (or the popular community versions of it), tuned to exactly what their design system needs.

A CSS framework may already include one

If you're using Tailwind, its Preflight base layer applies a modern-style reset automatically. Check whether your framework or component library already resets the basics before adding a second, possibly conflicting, reset on top.