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
- Start with variables and inputs. Place style rules in reusable class selectors.
- Add processing logic in the middle section.
- 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
- Start with a page that contains a heading and a paragraph, then apply the starter CSS exactly as written.
- Notice which properties are inherited from body and which must be declared directly on each element.
- Add one new rule for the heading and predict the result before refreshing the page.
- Create a conflicting declaration on purpose so you can see the cascade decide the final style.
- 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.
Common Mistake
Skipping input validation or mixing logic/output in one unstructured block.
Real-life Mini Challenge
Build a small real-life example for this lesson topic using 3 clear steps: input, process, output.