Writing reusable CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reusable CSS class that sets the text color to blue.

CSS

.text-blue { color: [1]; }

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

Ared

Bblue

Cgreen

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color other than blue.

Forgetting the semicolon after the value.

The color property sets the text color. To make the text blue, use blue.

2fill in blank

medium

Complete the code to create a reusable CSS class that adds padding of 1rem all around.

CSS

.padded { padding: [1]; }

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

A10px

B5em

C0

D1rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using pixels instead of rem units.

Setting padding to zero which removes space.

The padding property adds space inside the element. Using 1rem adds padding relative to the root font size, making it reusable and scalable.

3fill in blank

hard

Fix the error in the reusable CSS class that should center text horizontally.

CSS

.center-text { text-align: [1]; }

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

Acenter

Bleft

Cjustify

Dright

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'justify' which spreads text evenly.

Using 'left' or 'right' which aligns text to sides.

The text-align property controls horizontal alignment of text. To center text, use center.

4fill in blank

hard

Fill both blanks to create a reusable CSS class that makes text bold and adds a margin of 2rem.

CSS

.bold-margin { font-weight: [1]; margin: [2]; }

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

Abold

Bnormal

C2rem

D1rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'normal' font-weight which is not bold.

Using smaller margin values like 1rem.

font-weight: bold; makes text bold. margin: 2rem; adds space outside the element on all sides.

5fill in blank

hard

Fill all three blanks to create a reusable CSS class that sets background color to lightgray, text color to darkblue, and adds 1.5rem padding.

CSS

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

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

Alightgray

Bdarkblue

C1.5rem

Dblack

Attempts:

3 left

💡 Hint

Common Mistakes

Using black background which is too dark.

Using padding values that are too small or missing units.

background-color: lightgray; sets a soft background. color: darkblue; sets the text color for good contrast. padding: 1.5rem; adds comfortable space inside the box.