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.