Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
CSS Reset vs Normalize
Browsers have different default styles. A CSS reset removes ALL defaults (starting from zero), while normalize.css preserves useful defaults and fixes inconsistencies. Understanding when to use each is fundamental to professional CSS.
Reset vs Normalize
- CSS Reset - Removes ALL browser defaults: margins, padding, font sizes. You build everything from scratch
- Normalize.css - Keeps useful defaults, fixes browser inconsistencies. Less disruptive to start with
- Modern reset - A minimal reset that's the best of both: box-sizing, margin reset, img fix
- * { box-sizing: border-box } - The most important reset rule. Makes width include padding and border
- img { max-width: 100% } - Prevents images from overflowing containers. Essential responsive rule
- body { min-height: 100vh } - Ensures body fills the viewport. Useful for sticky footers
- Use modern reset - Most developers now use a small custom reset rather than a full reset or normalize
Modern CSS Reset
/* Modern CSS Reset (recommended) */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Prevent font-size inflation on mobile */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Core body defaults */
body {
min-height: 100vh;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Responsive media */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/* Form elements inherit font */
input, button, textarea, select {
font: inherit;
}
/* Text overflow */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Tip
Copy the modern CSS reset shown above into every new project. It's only 20 lines but fixes the most common cross-browser issues: box-sizing, margin reset, responsive images, font inheritance, and reduced motion support.
The cascade determines which style wins when multiple rules conflict
Common Mistake
Using a full CSS reset (like Eric Meyer's) that removes ALL browser defaults including useful ones like list-style on <ul>. The modern minimal reset is better - it fixes inconsistencies without stripping everything.
Practice Task
Build your own modern reset: (1) * { box-sizing: border-box; margin: 0; padding: 0 }, (2) img { max-width: 100%; display: block }, (3) input, button { font: inherit }, (4) @media (prefers-reduced-motion: reduce) to disable animations.
Quick Quiz
Key Takeaways
- Browsers have different default styles.
- CSS Reset - Removes ALL browser defaults: margins, padding, font sizes. You build everything from scratch
- Normalize.css - Keeps useful defaults, fixes browser inconsistencies. Less disruptive to start with
- Modern reset - A minimal reset that's the best of both: box-sizing, margin reset, img fix