CSS Foundations

The Cascade 🏔️

CSCI 3403 - Web Programming

Week 5, Class 9

Understanding the "C" in CSS! 💧

Quick Recap

Last Class:

✅ Introduction to CSS
✅ Basic selectors (type, class, ID)
✅ CSS syntax and properties
✅ Linking CSS to HTML

Today's Mission:

Understand how CSS decides which styles win!

Today's Learning Objectives

🎯 Understand what the cascade is and why it matters
🎯 Master CSS specificity calculations
🎯 Learn how inheritance works
🎯 Understand rule order as the tie-breaker
🎯 Fix cascade-related CSS issues

Why Do We Need the Cascade? 😵

Ever had this happen?

                /* You wrote this... */

                p { color: blue; }

                /* But the text is red?! 😤 */

Multiple rules can target the same element:

Browser default styles
Your CSS files
Multiple selectors targeting the same element
Inline styles

The cascade decides who wins! 🏆

The Cascade Defined 🌊

The cascade is CSS's conflict resolution system

Multiple CSS Rules

Targeting Same Element

Cascade Algorithm Runs

Winner Determined!

Think of it like: A waterfall where styles flow down and the strongest survive!

The Cascade's Three Main Factors

1️⃣ Specificity

How specific is the selector?

ID > Class > Type

2️⃣ Inheritance

Does it inherit from parent?

Direct > Inherited

3️⃣ Rule Order

Which rule came last?

Last one wins!

Let's explore each factor in detail...

Factor #1: Specificity 🎯

Not all selectors are created equal!

Type Selector

1

p { }

Class Selector

10

.class { }

ID Selector

100

#id { }

Remember: 1 ID beats 1000 classes, 1 class beats 1000 types!

The Specificity Hierarchy

Inline Styles (1000)

ID Selectors (100)

Class Selectors (10)

Type Selectors (1)

Pro Tip: Avoid inline styles! They're nearly impossible to override.

Specificity in Action: Example 1

                <!-- HTML -->

                <div class="main">

                  <div class="list subsection">What color am I?</div>

                </div>

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

VS

/* Rule 2 - WINS! */
.main .list {
color: red;
}

What color am I?

Why? Both use class selectors, but Rule 2 has TWO classes (20) vs one (10)!

Specificity in Action: Example 2

                <!-- HTML -->

                <div class="main">

                  <div class="list" id="subsection">What color now?</div>

                </div>

/* Rule 1 - WINS! */
#subsection {
color: blue;
}

VS

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

What color now?

Why? ID (100) beats two classes (20). IDs always win!

Calculating Specificity 🧮

Let's practice counting!

.main #content .highlight { }

IDs

1

Classes

2

Types

0

Total Specificity: 120

Quick Method: Count IDs (×100), Classes (×10), Types (×1), then add!

Quick Practice: Calculate Specificity! ✏️

Calculate the specificity of each selector:

div p span
.header .nav-item
#main .content p
body #wrapper .container ul li

Answers: (Click through when ready!)

3 (three type selectors)
20 (two class selectors)
111 (one ID, one class, one type)
122 (one ID, two classes, two types)

What DOESN'T Add to Specificity? 🚫

These don't count!

Universal Selector

* { }

Specificity: 0

Combinators

>, +, ~, space

Don't add specificity

                /* Both have same specificity (20) */

                .class.second-class { }  /* Chaining */

                .class .second-class { } /* Descendant */

                .class > .second-class { } /* Child combinator */

Factor #2: Inheritance 👨‍👧‍👦

Some properties pass from parent to child!

                <div style="color: red;">

                  <p>I'm red too!</p> <!-- Inherits color -->

                </div>

Properties that typically inherit:

✅ Typography: color, font-family, font-size, line-height
✅ Text properties: text-align, text-transform
✅ List properties: list-style

Properties that DON'T inherit:

❌ Box model: margin, padding, border
❌ Background properties
❌ Position and display

Direct Styling ALWAYS Beats Inheritance

                <!-- HTML -->

                <div id="parent">

                  <div class="child">What color am I?</div>

                </div>

#parent {
color: red;
}

VS

.child {
color: blue;
}

Result: Blue wins! Even though #parent has higher specificity (100 vs 10), .child directly targets the element.

Remember: Direct styling > Inherited styling (always!)

Factor #3: Rule Order 📋

The tie-breaker of tie-breakers!

When everything else is equal:

Same specificity ✓
Both direct (not inherited) ✓
Now what? 🤔

The LAST rule wins! 🏆

Rule Order in Action

                /* Both selectors have same specificity (10) */

                .alert {

                  color: red;

                }

                .warning {

                  color: yellow; /* This wins - it's last! */

                }

                <!-- HTML -->

                <p class="alert warning">Important message!</p>

Important message!

Note: Order in HTML class attribute doesn't matter - only CSS file order!

The Complete Cascade Algorithm

1. Collect all rules targeting element

2. Check Specificity - Higher wins!

3. If tied, check Direct vs Inherited

4. If still tied, Last Rule Wins!

Pro Tip: Use browser DevTools to see which rules are winning!

Common Cascade Problems 🔧

Problem 1: Over-Specific Selectors

                body div.container ul li a.link { } /* Too specific! */

                .link { } /* Much better */

Problem 2: Using IDs for Styling

                #header { } /* Hard to override */

                .header { } /* Easier to work with */

Problem 3: !important Overuse

color: red !important; /* Nuclear option! */

Cascade Best Practices ✨

📝 Keep specificity low - use classes primarily
🎯 Be only as specific as necessary
🏗️ Structure CSS from general to specific
🚫 Avoid inline styles
⚠️ Use !important only in emergencies
🔍 Use DevTools to debug cascade issues
📚 Organize CSS files logically

Remember: The cascade is your friend once you understand it!

Using DevTools for Cascade Debugging 🔍

Live Demo: Let's Debug Together!

Open your Recipe Project
Right-click → Inspect Element
Look at Styles panel
See crossed-out styles (lost cascade battle)
Hover over selectors to see specificity

DevTools shows:

✓ Applied styles (winning)
✗ Overridden styles (crossed out)
📍 Source file and line number
🎯 Computed final values

Practice Time: Cascade Fix! 🛠️

Today's Exercise

Complete the 01-cascade-fix exercise from The Odin Project

You'll fix CSS cascade issues in a provided HTML file

The Challenge:

Six elements with cascade problems
Fix the CSS to match the desired output
Use your knowledge of specificity and rule order
No changing the HTML!

Let's walk through the setup together...

Setting Up the Exercise 💻

                # If you haven't cloned the exercises repo yet:

                git clone https://github.com/TheOdinProject/css-exercises.git

                # Navigate to today's exercise:

                cd css-exercises/foundations/cascade/01-cascade-fix

                # Open in VS Code:

                code .

Files you'll see:

index.html - DON'T MODIFY
style.css - FIX THE CASCADE HERE
README.md - Instructions
desired-outcome.png - What it should look like

Work Session ⚡

20 Minutes to Complete

Your Tasks:

Open the exercise files
Read the README instructions
Fix the cascade issues in style.css
Match the desired-outcome.png
Test in your browser

Hints:

Check specificity first
Look for rule order issues
Some rules might need more specific selectors
Some might need less specific ones!

Exercise Solutions Discussion 💡

Common Fixes Needed:

Problem 1: Class selector being overridden by type
- Solution: Increase specificity or reorder
Problem 2: Multiple classes with same specificity
- Solution: Use rule order to your advantage
Problem 3: Inherited styles interfering
- Solution: Add direct styling

Remember: There are multiple correct solutions! The goal is understanding WHY it works.

Quick Knowledge Check! 🧠

Answer These:

Which has higher specificity: .header .nav or #nav?
Does margin inherit from parent elements?
If two rules have the same specificity, which wins?
What's the specificity of div.highlight#main?

Answers:

#nav (100 > 20)
No, margin doesn't inherit
The last one in the CSS file
111 (1 ID + 1 class + 1 type)

Real-World Cascade Scenarios 🌍

Scenario 1: Theme Customization

                /* Base theme */

                .button { background: blue; }

                /* Your customization - comes after */

                .button { background: green; } /* Wins! */

Scenario 2: Responsive Design

                /* Mobile first */

                .container { width: 100%; }

                /* Desktop override - same specificity, comes later */

                @media (min-width: 768px) {

                  .container { width: 80%; } /* Wins on desktop! */

                }

Homework 📚

Due Before Next Class

Your Tasks:

Complete the cascade exercise if not finished
Read "The CSS Cascade" article (link in Odin Project)
Watch Kevin Powell's "CSS Specificity Explained" video
Try the CSS Specificity Calculator online tool
Apply cascade knowledge to your Recipe Project - make it prettier!

Extra Credit: Use DevTools to find and fix a cascade issue in your Recipe Project

Today's Key Takeaways 🎯

The Cascade:

✅ Resolves conflicts between CSS rules
✅ Uses specificity as primary factor
✅ Direct styling beats inheritance
✅ Last rule wins when all else is equal

Best Practices:

✅ Keep specificity low
✅ Use classes over IDs for styling
✅ Organize CSS logically
✅ Use DevTools for debugging

Next Class Preview

Tuesday: Browser Developer Tools

Inspecting HTML and CSS
Live editing in the browser
Debugging cascade issues like a pro
Performance insights
Mobile device emulation

Get ready to become a debugging wizard! 🧙‍♂️

Great Work Today! 🎉

You've Mastered the Cascade!

Now you understand:

✅ Why CSS rules conflict
✅ How specificity works
✅ The role of inheritance
✅ How to debug cascade issues

See you Tuesday at 9:30 AM! 👋

Keep practicing with the cascade!