CSS Normalization & Resets
What is a CSS Reset?
Imagine receiving a blank sketchpad from a store. In some sketchpads, the manufacturer has pre-drawn margins or faint gray lines on the page. Before you start drawing, you use an eraser to clear out those pre-drawn lines so you have a completely clean starting canvas.In web browsers, Chrome, Safari, and Firefox all apply their own default styles (User Agent Stylesheets) to elements. For example, headings have default margins, and lists have default padding. A CSS Reset is a set of rules placed at the very top of your stylesheet that clears out these browser defaults, starting everyone at a clean baseline of 0.
Why does it matter?
If you don't reset default margins and paddings, your site will look slightly different on Chrome compared to Safari, with elements shifting or spacing out unexpectedly. A CSS reset ensures cross-browser layout consistency.Syntax Breakdown
Write a global rule targeting the universal selector* to reset default spacings:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Common Mistakes
<ul> or <ol>) use default padding instead of margin for indentation. If you only reset margin (margin: 0;), list items will still have left-aligned padding offsets!Quick Reference
CSS Reset — Clears browser stylesheet defaults.* — Universal selector to baseline all elements.margin: 0; padding: 0; — Standard spacing reset values.Your Task
Write a rule targeting the universal selector `*` and reset both its `margin` and `padding` properties to `0`.
index.html
Type code above to start the lesson.
Live Preview