CSS syntax and rules - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color to blue.

CSS

body { background-color: [1]; }

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

Afont-size

Bblue

Ccolor

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name instead of a color value.

Leaving the value empty.

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

2fill in blank

medium

Complete the code to select all paragraphs.

CSS

[1] { color: red; }

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

Ap

B#paragraph

C.paragraph

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using class or id selectors instead of the tag selector.

Selecting a different element like div.

The selector p targets all paragraph elements in the HTML.

3fill in blank

hard

Fix the error in the CSS rule to properly set font size to 16 pixels.

CSS

h1 { font-size: [1]; }

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

A16

Bsize16

Cpx16

D16px

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving out the unit (like just '16').

Putting the unit before the number.

The font size value must include units like px to be valid. So 16px is correct.

4fill in blank

hard

Fill both blanks to create a CSS rule that sets margin to 10 pixels and padding to 5 pixels.

CSS

div { margin: [1]; padding: [2]; }

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

A10px

B5px

C10em

D5em

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing units between margin and padding.

Using units like em instead of px here.

Margin and padding values need units. Here, 10px margin and 5px padding set spacing in pixels.

5fill in blank

hard

Fill all three blanks to create a CSS rule that sets the font family to Arial, font weight to bold, and text alignment to center.

CSS

p { font-family: [1]; font-weight: [2]; text-align: [3]; }

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

AArial

Bbold

Ccenter

Dleft

Attempts:

3 left

💡 Hint

Common Mistakes

Using font weight values like numbers instead of 'bold'.

Choosing wrong text alignment like 'left' instead of 'center'.

This CSS rule sets the font family to Arial, makes the text bold with bold, and centers the text with center.