What is CSS cascade - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding CSS Cascade Priority

Which CSS rule will apply to the paragraph below if these styles are all present?

p { color: blue; }
.highlight { color: red; }
#main { color: green; }

HTML:
<p id="main" class="highlight">Hello</p>

A The paragraph text will be black (default).

B The paragraph text will be red.

C The paragraph text will be green.

D The paragraph text will be blue.

💡 Hint

Remember that IDs have higher priority than classes and element selectors in CSS cascade.

CSS cascade decides which style applies when multiple rules target the same element. ID selectors (#main) have higher priority than class selectors (.highlight) and element selectors (p). So, the color green from #main wins.

📝 Syntax

intermediate

Which CSS rule overrides others due to !important?

Given these CSS rules:

div { color: blue !important; }
.alert { color: red; }

What color will a <div class="alert"> show?

A Red, because class selectors override element selectors.

B It will cause a syntax error.

C Black, because no color applies.

D Blue, because !important overrides normal declarations.

💡 Hint

The !important keyword gives a rule the highest priority.

The !important declaration makes the blue color rule override the red color from the class selector, even though classes normally have higher specificity than elements.

❓ selector

advanced

Which selector has the highest specificity?

Consider these selectors:

A) ul li a:hover
B) #nav .menu a
C) .header .nav a.active
D) body.home ul li a

Which selector has the highest specificity according to CSS cascade rules?

A ul li a:hover

B #nav .menu a

C .header .nav a.active

D body.home ul li a

💡 Hint

ID selectors count more than classes and elements in specificity.

Selector B has an ID (#nav), which gives it higher specificity than selectors with only classes and elements.

❓ layout

advanced

How does CSS cascade affect conflicting layout styles?

If two CSS rules set different display values for the same element:

.box { display: flex; }
#container { display: grid; }

And the HTML is:
<div id="container" class="box">Content</div>

What will be the display style of the div?

A The div will use display: grid.

B The div will use display: flex.

C The div will have no display style and default to block.

D The div will cause a layout error.

💡 Hint

ID selectors have higher specificity than class selectors.

The ID selector (#container) has higher specificity than the class selector (.box), so display: grid applies.

❓ accessibility

expert

How does CSS cascade impact accessibility when styles conflict?

You have these CSS rules:

button { color: black; }
.disabled { color: gray !important; }
#submitBtn { color: white; }

HTML:
<button id="submitBtn" class="disabled">Submit</button>

What color will the button text be, and why is this important for accessibility?

A Gray, because !important overrides ID selectors.

B White, because ID selectors override classes even with !important.

C Black, because element selectors have priority.

D The button will be invisible due to conflicting colors.

💡 Hint

The !important keyword overrides normal specificity rules.

The .disabled class uses !important, which overrides the ID selector color. This ensures the button looks disabled visually, which is important for users to understand its state.

Practice

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