Normalize CSS

Definition

Normalize CSS is a stylesheet that targets browser default inconsistencies, making browsers render all elements consistently while preserving useful defaults.

Why It Matters

It preserves default typography and margins, making styling more incremental and less destructive than a full reset.

Core Concepts

• CSS Reset: Sets margins, padding, and font sizes to zero/null across elements.
• Normalize.css: Corrects specific bugs (form elements, heading sizes) without total erasure.
• Goal: Predictable starting point before applying custom styles.
• Modern Practice: Normalize or a minimal custom reset plus box-sizing: border-box globally.

/* Example of a normalization rule */
button, input, optgroup, select, textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

Connected Concepts

• CSS Reset
• CSS Cascade
• CSS Inheritance
• CSS Box Model
• Browser Rendering Engines