Where styles come from: the three origins

CSS isn't your stylesheet alone

Every element on a page has a "computed style" — the final answer the browser uses to paint it. That answer is the result of merging styles from THREE origins, in this priority order (lowest to highest):

1. User-agent (browser defaults) — <h1> is bold and 32px because Chrome says so. <a> is blue and underlined. Lists have bullets. Margins exist between paragraphs.
2. Author styles — your CSS files + <style> blocks + inline style="" attributes.
3. Inline styles (still author, but higher specificity).
4. !important declarations cross-cut all of the above.

Plus a fourth origin you can ignore for now: user stylesheets — custom CSS the user can apply in browser settings (rare; mostly accessibility).

The "starts working from nothing" mistake

Junior devs often look at a default <h1> and wonder "why is this so big?" — they don't realize the browser already gave it 32px and margin. Modern projects ship a reset or normalize stylesheet first:

/* Modern minimal reset */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }

Two lines that solve 80% of "why does my hero have a tiny gap at the top?"

What this module is about

• Lesson 2: how the browser PICKS which selector wins (specificity).
• Lesson 3: which properties cascade from parent → child (inheritance).
• Lessons 5-7: the box model — content, padding, border, margin.
• Lessons 8-9: box-sizing: border-box and why it's a default.
• Lesson 10: capstone combining all the above.