What is CSS cascade - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color of a paragraph to blue.

CSS

p { background-color: [1]; }

Drag options to blanks, or click blank then click option'

Ayellow

Bred

Cgreen

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that is not spelled correctly.

Leaving the value empty.

The background-color property sets the background color. Here, blue is the correct color value.

2fill in blank

medium

Complete the code to make all h1 headings have a font size of 2rem.

CSS

h1 { font-size: [1]; }

Drag options to blanks, or click blank then click option'

A2rem

B200%

C20px

D2em

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel sizes that don't scale well.

Confusing em and rem units.

The font-size property controls text size. Using 2rem sets it relative to the root font size, which is good for accessibility.

3fill in blank

hard

Fix the error in the CSS rule to correctly set the text color to red.

CSS

p { color: [1]; }

Drag options to blanks, or click blank then click option'

A#red

Bred

Cred;

Drgb(255,0,0

Attempts:

3 left

💡 Hint

Common Mistakes

Including the semicolon inside the value.

Using invalid color syntax like #red.

The value for color should be red without a semicolon inside the value or incorrect syntax.

4fill in blank

hard

Fill both blanks to create a CSS rule that makes all h2 headings bold and blue.

CSS

h2 { font-weight: [1]; color: [2]; }

Drag options to blanks, or click blank then click option'

Abold

Bnormal

Cblue

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using normal instead of bold for font-weight.

Choosing the wrong color value.

font-weight: bold; makes text bold, and color: blue; sets the text color to blue.

5fill in blank

hard

Fill all three blanks to create a CSS rule that sets a class .highlight with a yellow background, black text color, and padding of 1rem.

CSS

.highlight { background-color: [1]; color: [2]; padding: [3]; }

Drag options to blanks, or click blank then click option'

Ayellow

Bblack

C1rem

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up background and text colors.

Forgetting units for padding.

The background-color is set to yellow, color to black for text, and padding adds space inside the element with 1rem.

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