CSS · Chapter 43 of 44
CSS Reset and Normalize
Browsers apply their own default styles to elements, which differ slightly across browsers. A CSS reset removes these defaults, while a normalize stylesheet makes them consistent rather than removing them entirely.
Starting a project with a reset or normalize ensures a predictable baseline before applying your own design.
Syntax
* { margin: 0; padding: 0; box-sizing: border-box; }Reset vs normalize
A reset (like Eric Meyer's) strips almost all default styling (margins, font sizes, list styles) to zero. Normalize.css instead standardizes defaults across browsers, keeping useful baseline styles.
A minimal custom reset
Many modern projects use a small custom reset targeting box-sizing, margins, and default list/link styles rather than a full library.
Example 1 (css)
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}Output
All elements start with zero margin/padding and consistent box-sizingThis minimal reset removes inconsistent browser defaults before custom styles are applied.
Key points
- Browsers apply different default styles to elements.
- A reset removes default styling almost entirely.
- Normalize.css standardizes defaults instead of removing them.
- Many modern projects use a small custom reset rather than a full library.
💡 Note: Applying box-sizing: border-box globally is one of the most common reset habits.