{}
Learn web design and development
Free interactive courses
← Back to CSS
04

Reset and Normalize: A Consistent Base for CSS

Learn why reset or normalize belongs at the beginning of a project and how a modern baseline makes the rest of your CSS more predictable.

How much do you know about CSS?

📘 Theory

Reset versus normalize

Same goal, different starting strategies.

A reset strips most browser defaults so you can define the visual rules from scratch. That gives maximum control, but it also means you must rebuild more basics yourself.

Normalize preserves sensible defaults in areas such as forms, headings and inline elements while correcting the cross-browser mismatches that usually cause trouble.

  • Reset: more control, more initial work.
  • Normalize: a balanced starting point for many production projects.
  • In mixed teams, normalize often speeds up onboarding and reduces surprises.

A practical modern reset

A small baseline already removes many recurring layout issues.

Where this layer belongs in your project

1

Architecturally, reset or normalize should load before your own components and utilities. It is part of the foundation, not an afterthought.

2

Pedagogically it also makes sense early in the course, because it removes some browser noise before you tackle layout, typography and spacing in more depth.

🧭 Key visuals

Reset inside the cascade

It helps explain why this foundational layer should run before components and later overrides.

Place of reset or normalize inside the CSS cascade flow.

🧪 Learn by doing

Example Example: apply a reset to a basic layout Compare a block with cleaner defaults and fewer unexpected margins.
⌄

🏁 Challenges

Challenge Challenge: create a minimal reset Define global `box-sizing` and remove default margins.
⌄

🧰 Resources

Useful links

normalize.css A Modern CSS Reset (Andy Bell) Custom CSS Reset (Josh Comeau) MDN - User agent stylesheets
Test

Check your knowledge with a test about CSS.

Test for CSS
Course resources 78
📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets
‹
Lesson 03
CSS Syntax: The Structure of a Rule
Lesson 05
The Cascade in CSS: Origin, Order and Importance
›

What is this?

I'm Cristian Eslava and I sometimes build websites so both you and I can learn and experiment. culTest

I made this in February 2026 to make learning easier for my students. The idea is to learn web development by practicing and to keep expanding the project with new topics, tests and challenges.

It draws inspiration from MDN, W3Schools, CodePen, Manz and many other web development references. I wanted to combine useful theory, runnable examples, challenges and the testing system I had already built for culTest. culTest

If you liked it, if you didn't, or if you want to get in touch, write to me at cristianeslava@gmail.com