CSS Cascade - Guided Notes

🌊 What is the Cascade?

Definition

The cascade is CSS's _________________ resolution system.

It determines which CSS rules get _________________ to HTML elements.

Why Do We Need It?

Multiple sources of CSS can target the same element:

Browser _________________ styles
Your _________________ files
Multiple _________________ targeting same element
_________________ styles (in HTML)

💡 Remember: CSS only does what we tell it to do!

🎯 The Three Main Factors

The cascade uses three main factors to resolve conflicts:

Factor	Description	Rule
1. _________________	How specific is the selector?	More specific wins
2. _________________	Does it inherit from parent?	Direct beats inherited
3. _________________	Which rule came last?	Last one wins

1️⃣ Factor #1: Specificity

Specificity Hierarchy (from highest to lowest)

_________________ styles (avoid these!) - Value: 1000
_________________ selectors - Value: 100
_________________ selectors - Value: 10
_________________ selectors - Value: 1

⚠️ Important Rule: 1 ID beats _______ classes, 1 class beats _______ type selectors!

Practice: Calculate Specificity

Calculate the specificity for each selector:

p = _______
.header = _______
#main = _______
.nav .item = _______
#header .nav li = _______
div.highlight#main = _______

What DOESN'T Add to Specificity?

The universal selector: _________________
Combinators: _______, _______, _______, and _______ (space)

📝 Specificity Examples

Example 1: Class Selectors

<div class="main">
  <div class="list subsection">Text</div>
</div>
            

/* Rule 1 */
.subsection { color: blue; }     /* Specificity: _____ */

/* Rule 2 */
.main .list { color: red; }       /* Specificity: _____ */
            

Which rule wins? _________________

Why? _________________________________________

Example 2: ID vs Classes

<div class="main">
  <div class="list" id="subsection">Text</div>
</div>
            

/* Rule 1 */
#subsection { color: blue; }      /* Specificity: _____ */

/* Rule 2 */
.main .list { color: red; }       /* Specificity: _____ */
            

Which rule wins? _________________

Why? _________________________________________

2️⃣ Factor #2: Inheritance

Properties That Typically Inherit:

Typography: _________, _________, _________
Text properties: _________, _________
List properties: _________

Properties That DON'T Inherit:

Box model: _________, _________, _________
_________________ properties
_________________ and display

💡 Key Rule: Direct styling ALWAYS beats _________________!

Inheritance Example

<div id="parent">
  <div class="child">Text</div>
</div>

#parent { color: red; }    /* Specificity: 100 */
.child { color: blue; }     /* Specificity: 10 */
            

What color is the text? _________________

Why? _________________________________________

3️⃣ Factor #3: Rule Order

The Tie-Breaker

When two rules have:

✓ Same _________________
✓ Both are _________________ (not inherited)

Then: The _________________ rule wins!

Rule Order Example

.alert { color: red; }
.warning { color: yellow; }

<p class="alert warning">Message</p>
            

What color is the text? _________________

Why? _________________________________________

Note: Order in the HTML class attribute does NOT matter - only CSS file order!

🔄 The Complete Cascade Algorithm

Fill in the cascade decision process:

Collect all _________________ targeting the element
Check _________________ - higher wins!
If tied, check _________________ vs inherited
If still tied, _________________ rule wins!

🏋️ Practice Problems

Problem 1: Predict the Color

<div id="container" class="box">
  <p class="text">What color am I?</p>
</div>

#container { color: red; }
.box p { color: blue; }
.text { color: green; }
                

Answer: _________________

Explanation: _________________________________________

Problem 2: Calculate Total Specificity

Selector	IDs	Classes	Types	Total
`body #wrapper .container ul li`	____	____	____	____
`nav > ul > li > a.active`	____	____	____	____

✨ Best Practices

Do's ✅

Keep specificity _________________
Use _________________ for styling (not IDs)
Organize CSS from _________________ to specific
Use DevTools to _________________ cascade issues

Don'ts ❌

Avoid _________________ styles
Don't use _________________ for styling
Minimize use of _________________
Don't make selectors overly _________________

🔍 Using DevTools for Cascade Debugging

DevTools shows you:

✓ Applied styles (_________________)
✗ Overridden styles (_________________ out)
📍 Source file and _________________ number
🎯 _________________ final values

DevTools Exercise

Open your Recipe Project and find:

A style that's being overridden: _________________________________
The winning rule's specificity: _________________________________
The source file and line number: _________________________________

📋 Today's Exercise: 01-cascade-fix

Setup Commands

git clone _________________________________________
cd css-exercises/foundations/cascade/_________________
code .
            

Exercise Notes

Problems encountered and solutions:

Problem: _________________________________________
Solution: _________________________________________
Problem: _________________________________________
Solution: _________________________________________
Problem: _________________________________________
Solution: _________________________________________

📝 Additional Notes

Use this space for any additional notes, examples, or questions:

🎯 Key Takeaways

Complete these summary statements:

The cascade resolves _________________________________________
Specificity is calculated by counting _________________________________________
Direct styling always beats _________________
When specificity is equal, the _________________ rule wins
The best practice is to keep specificity _________________