Fighting Browser Inheritance
Every browser (Chrome, Safari, Firefox) has its own " default styles " (User Agent Styles). For example, buttons have different borders, and lists have different margins. To make the site look the same everywhere, we must " reset " these differences.
1. CSS Reset
Harshly removes all standard margins, borders, and styling. You start with a clean slate.
* { margin: 0; padding: 0; box-sizing: border-box; }
2. Normalize.css
Doesn't remove styles completely, but brings them to a unified standard across all browsers. For example, makes h1 the same height everywhere.
3. Modern Approach: " Modern Reset "
Instead of removing everything, developers write small rules that make work comfortable (e.g., improving image and list display).
Never start a project without some form of reset. Otherwise, small 5-10 pixel differences between Chrome and Safari will drive you crazy in final development stages.