CSSmarkup~20 mins

What is CSS cascade - Hands-On Activity

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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

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




    CSS Cascade Example

Need a hint?

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

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




    CSS Cascade Example
    
        /* Set all paragraphs to blue */
        /* Set .second class paragraphs to green */
    


    Paragraph One
    Paragraph Two
    Paragraph Three

Need a hint?

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

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




    CSS Cascade Example
    
        p {
            color: blue;
        }
        .second {
            color: green;
        }
    


    Paragraph One
    Paragraph Two
    Paragraph Three

Need a hint?

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

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




    CSS Cascade Example
    
        /* Element selector: lowest priority */
        p {
            color: blue;
        }
        /* Class selector: higher priority than element */
        .second {
            color: green;
        }
    


    Paragraph One
    Paragraph Two
    Paragraph Three

Need a hint?

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