Reset CSS vs Normalize CSS

Reset CSS and Normalize CSS both solve the same problem — browsers have different default styles for HTML elements — but they take opposite approaches. A CSS reset strips all default styles to zero (no margins, no padding, no font sizes), giving you a completely blank slate. Normalize CSS preserves useful defaults while fixing inconsistencies between browsers — it makes defaults consistent without removing them. In modern development, most projects use neither in their pure form — Tailwind's Preflight (based on modern-normalize) or a minimal custom reset handles this automatically.

Every browser ships with a user-agent stylesheet that applies default styles to HTML elements — headings get font sizes and margins, lists get bullets and padding, body gets a margin. The problem is that these defaults differ between Chrome, Firefox, Safari, and Edge. Without addressing this, the same HTML looks slightly different in each browser. Both Reset and Normalize CSS aim to create a consistent starting point across browsers.

/* Browser default differences (simplified examples): */

/* Chrome default */
body { margin: 8px; }
h1 { font-size: 2em; margin: 0.67em 0; }

/* Firefox default */
body { margin: 8px; }
h1 { font-size: 2em; margin: 0.67em 0; } /* similar but not identical */

/* Safari default */
body { margin: 8px; }
h1 { font-size: 2em; margin: 0.67em 0; }

/* The differences are subtle but real:
   - Button styling varies significantly
   - Form element fonts differ
   - Table border-spacing differs
   - Sub/sup positioning varies
   These small differences cause cross-browser bugs */

A CSS reset (like Eric Meyer's Reset CSS) removes all default browser styles. Every element starts with zero margin, zero padding, no font size differences, no list bullets — a completely blank canvas. The advantage is total control and predictability. The disadvantage is that you must explicitly style everything — even basic things like heading sizes, list bullets, and paragraph spacing that you'd normally get for free.

/* Classic CSS Reset (simplified) */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* After a reset, ALL elements look the same:
   <h1>Heading</h1>  — same size as <p>
   <ul><li>Item</li></ul> — no bullets, no indent
   <strong>Bold</strong> — not bold!
   
   You must add back everything you want. */

Normalize CSS takes a different philosophy: keep useful defaults, but make them consistent across browsers. Headings still have sizes, lists still have bullets, bold text is still bold — but these styles are identical in Chrome, Firefox, Safari, and Edge. It also fixes known browser bugs (like form element font inheritance) and improves usability of HTML5 elements.

/* Normalize CSS approach (simplified examples) */

/* Fix: HTML5 elements display correctly in older browsers */
article, aside, footer, header, nav, section {
  display: block;
}

/* Fix: Consistent heading sizes across browsers */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Fix: Form elements inherit font (browsers don't do this by default!) */
button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/* Fix: Remove default button styling inconsistencies */
button {
  text-transform: none;
}

/* Fix: Correct line-height in all browsers */
body {
  line-height: 1.15;
}

/* After normalize:
   <h1>Heading</h1>  — still large, but same size in all browsers
   <ul><li>Item</li></ul> — still has bullets, consistent indent
   <button>Click</button> — consistent font, consistent sizing */

In modern development, most teams use Tailwind CSS which includes Preflight — a reset layer based on modern-normalize. It takes a hybrid approach: normalizes cross-browser differences, removes default margins, makes images block-level, and sets border-box sizing globally. It's opinionated toward utility-first development where you'll be adding all styles explicitly anyway. If you're using Tailwind, you don't need a separate reset or normalize — Preflight handles it.

/* What Tailwind Preflight does (simplified): */

/* 1. Box-sizing border-box on everything */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margins */
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote {
  margin: 0;
}

/* 3. Headings and bold are unstyled (like a reset) */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* 4. Lists are unstyled */
ol, ul {
  list-style: none;
  padding: 0;
}

/* 5. Images are block and responsive by default */
img, svg, video {
  display: block;
  max-width: 100%;
}

/* 6. Form elements inherit font */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Preflight = modern-normalize + opinionated resets for utility-first CSS */

This question tests your understanding of cross-browser CSS fundamentals. Interviewers want to see that you know why browser defaults are inconsistent and why that matters, can explain the philosophical difference (remove all vs fix inconsistencies), know what modern tools do (Tailwind Preflight, CSS layers), understand the tradeoff (more reset = more CSS to write, but more control), and have a practical opinion on what to use in real projects.