Day 5: Cascade, Specificity & Week 3 Mini-Project

Daily Objective

Master how browsers resolve conflicting styles using the cascade, inheritance, and specificity, then style your personal page.

1. The Cascade & Specificity

When multiple CSS rules target the same element:

1. Source Order: Later rules override earlier rules if specificity is equal.
2. Inheritance: Some properties (color, font-family) inherit from parents; others (border, margin) do not.
3. Specificity Score:
   • Inline styles: 1,0,0,0
   • ID selector: 0,1,0,0
   • Class, attribute, pseudo-class: 0,0,1,0
   • Element, pseudo-element: 0,0,0,1

2. Inspecting in Chrome DevTools

Press F12, click the Inspect arrow, and select an element. In the Styles pane:

• Strikethrough text shows styles that were overridden by higher specificity.
• You can toggle checkboxes to test properties live in your browser!

---

Week 3 Mini-Project: Style Your Personal Page

Project Requirements:

1. Take your Week 1 “About Me” page and attach an external stylesheet.
2. Implement a curated color palette (primary, secondary, background, and text colors).
3. Import and configure Google Fonts for headings and body.
4. Replace px values with scalable rem units.
5. Inspect your elements in Chrome DevTools to verify the cascade.