Lesson 1: CSS foundations and cascade: Concept walkthrough

Concept Explanation

This lesson introduces the two ideas every CSS file depends on: selectors and the cascade. You will see how a rule reaches an element, why one declaration wins over another, and how small style changes can affect an entire page. Instead of memorizing theory in isolation, you will style a tiny page and observe the result after each edit. By the end, you should be comfortable reading a simple rule set, predicting which styles apply, and making small changes without guessing.

Where to Put the Code

1. Start with variables and inputs. Place style rules in reusable class selectors.
2. Add processing logic in the middle section.
3. Finish with output and quick validation.

Command Reference

• Change one property on the body rule and note which parts of the page update automatically.
• Add a rule for h1 or p, then compare it with the inherited styles from body.
• Create a second rule that targets the same element and observe which declaration wins.
• Write down one example of when shared base styles make a page easier to maintain.

Step-by-step Guide

1. Start with a page that contains a heading and a paragraph, then apply the starter CSS exactly as written.
2. Notice which properties are inherited from body and which must be declared directly on each element.
3. Add one new rule for the heading and predict the result before refreshing the page.
4. Create a conflicting declaration on purpose so you can see the cascade decide the final style.
5. Finish by summarizing which rule was global, which rule was specific, and why that distinction matters.

Practice Exercises

• Style a short article with a heading, paragraph, and link using only element selectors.
• Build a second version where the body sets the base typography and individual rules handle emphasis.
• Create a small example that proves inheritance by changing the text color in one place.

Coding Challenges

• Write two competing rules for the same element and explain why the final result is correct.
• Refactor a messy starter stylesheet into clearer base styles plus a few focused overrides.

Mini Practice Tasks

• Add one rule that changes spacing, not color.
• Write a one-line note explaining what the cascade does.
• Test one small tweak and confirm which elements changed.