Resets and Base Styles
Browsers provide default user-agent styles. A CSS reset or carefully designed base layer establishes predictable defaults.
Modern resets often avoid removing useful accessibility behavior and instead focus on box sizing, margin consistency, typography inheritance, responsive media, and sensible defaults.
CSS Reset / Base Layer
Minimal Reset
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}💡 A minimal reset establishes useful baseline behavior without aggressively removing browser features.
Key Takeaways
- Resets should establish intentional defaults.
- Do not blindly copy large resets without understanding their consequences.
Knowledge Check
Why are CSS resets used?