Bird
Raised Fist0
CSSmarkup~20 mins

What is CSS cascade - Hands-On Activity

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Understanding CSS Cascade
📖 Scenario: You are creating a simple webpage with text that changes color based on CSS rules. You want to see how CSS cascade decides which color to show when multiple rules apply.
🎯 Goal: Build a small HTML page with three paragraphs. Each paragraph has multiple CSS rules that set its text color. You will see which color the browser shows because of the CSS cascade.
📋 What You'll Learn
Create an HTML skeleton with three paragraphs, each with a unique class
Add CSS rules that set different colors for these paragraphs using element selectors, class selectors, and inline styles
Observe how the CSS cascade chooses the final color for each paragraph
Use comments to label which CSS rule has higher priority
💡 Why This Matters
🌍 Real World
Understanding CSS cascade helps you style webpages correctly and avoid unexpected colors or layouts.
💼 Career
Web developers must know CSS cascade to write clean, maintainable styles and fix styling bugs efficiently.
Progress0 / 4 steps
1
Create HTML with three paragraphs
Write the HTML skeleton with a <!DOCTYPE html>, <html lang="en">, <head> with a <title>, and a <body> containing three <p> elements. Give them classes first, second, and third respectively. Each paragraph should have text: "Paragraph One", "Paragraph Two", and "Paragraph Three".
CSS
Hint

Remember to add the class attribute exactly as first, second, and third.

2
Add basic CSS rules for paragraphs
Inside the <head>, add a <style> block. Write CSS rules that set the color of all p elements to blue. Then add a rule that sets the color of the class .second to green.
CSS
Hint

Use the selector p for all paragraphs and .second for the second paragraph's class.

3
Add inline style to the third paragraph
Add an inline style attribute to the third paragraph (<p class="third">) that sets its color to red. This will show how inline styles override CSS rules.
CSS
Hint

Use style="color: red;" inside the third paragraph tag.

4
Add comments explaining CSS cascade priority
Inside the <style> block, add comments above each CSS rule explaining its priority in the CSS cascade. For example, mention that element selectors have lower priority than class selectors, and inline styles have the highest priority.
CSS
Hint

Write comments using /* comment */ syntax above the CSS rules.

Practice

(1/5)
1. What does the CSS cascade primarily decide?
easy
A. How JavaScript interacts with CSS
B. Which style rule applies when multiple rules target the same element
C. The order of HTML elements on the page
D. How to write CSS syntax correctly

Solution

  1. Step 1: Understand the role of CSS cascade

    The CSS cascade is about resolving conflicts when multiple CSS rules apply to the same element.

  2. Step 2: Identify what cascade decides

    It decides which style wins based on importance, specificity, and order.

  3. Final Answer:

    Which style rule applies when multiple rules target the same element -> Option B

  4. Quick Check:

    CSS cascade = style conflict resolver [OK]
Hint: Cascade picks the winning style when rules conflict [OK]
Common Mistakes:
  • Confusing cascade with CSS syntax rules
  • Thinking cascade controls HTML structure
  • Mixing cascade with JavaScript behavior
2. Which of the following is the correct CSS syntax to set text color to red?
easy
A. font-color: red;
B. text-color = red;
C. color: red;
D. color = red;

Solution

  1. Step 1: Recall CSS property syntax

    CSS properties use a colon ':' to assign values, ending with a semicolon ';'.

  2. Step 2: Check each option

    Only 'color: red;' uses correct syntax to set text color.

  3. Final Answer:

    color: red; -> Option C

  4. Quick Check:

    Property: value; is correct CSS syntax [OK]
Hint: CSS uses colon and semicolon for property-value pairs [OK]
Common Mistakes:
  • Using '=' instead of ':'
  • Using wrong property names like font-color
  • Omitting semicolon at the end
3. Given this CSS:
p { color: blue; }
.highlight { color: yellow; }
#special { color: green; }

And this HTML:
<p id="special" class="highlight">Hello</p>

What color will the text "Hello" be?
medium
A. Green
B. Yellow
C. Blue
D. Black (default)

Solution

  1. Step 1: Identify selectors and their specificity

    p selector is least specific, .highlight class is more specific, #special id is most specific.

  2. Step 2: Apply CSS cascade rules

    The id selector (#special) wins over class and element selectors, so color: green applies.

  3. Final Answer:

    Green -> Option A

  4. Quick Check:

    Id selector beats class and element selectors [OK]
Hint: Id selectors override class and element selectors [OK]
Common Mistakes:
  • Choosing class color over id color
  • Ignoring specificity order
  • Assuming first rule always wins
4. Why does this CSS not change the paragraph color to red?
p { color: blue !important; }
p.special { color: red; }

HTML:
<p class="special">Text</p>
medium
A. Because class selectors always override element selectors
B. Because the HTML class is misspelled
C. Because the syntax of red color is wrong
D. Because !important on blue overrides the red color

Solution

  1. Step 1: Understand !important in CSS cascade

    The !important rule makes a style override other conflicting styles regardless of specificity.

  2. Step 2: Analyze given CSS rules

    p { color: blue !important; } overrides p.special { color: red; } even though the latter is more specific.

  3. Final Answer:

    Because !important on blue overrides the red color -> Option D

  4. Quick Check:

    !important beats specificity [OK]
Hint: !important always wins over normal rules [OK]
Common Mistakes:
  • Ignoring !important effect
  • Assuming class overrides !important
  • Thinking syntax or spelling is wrong
5. You have these CSS rules:
div { color: black; }
.alert { color: orange !important; }
#warning { color: red; }

And this HTML:
<div id="warning" class="alert">Warning!</div>

What color will the text "Warning!" be and why?
hard
A. Orange, because !important overrides id selector
B. Black, because element selector is default
C. Red, because id selector is more specific than class
D. Orange, because class selector always wins

Solution

  1. Step 1: Compare specificity and importance

    Id selector (#warning) is more specific than class (.alert), but .alert has !important.

  2. Step 2: Apply cascade rules with !important

    !important on .alert color: orange overrides even the more specific id selector color: red.

  3. Final Answer:

    Orange, because !important overrides id selector -> Option A

  4. Quick Check:

    !important beats specificity [OK]
Hint: !important beats even id selectors [OK]
Common Mistakes:
  • Thinking id selector always wins
  • Ignoring !important priority
  • Assuming element selector can override class