First CSS stylesheet - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color of the body to lightblue.

CSS

body {
  background-color: [1];
}

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

Ablue

Bgreen

Cred

Dlightblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that is not valid in CSS.

Forgetting the semicolon after the property value.

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

2fill in blank

medium

Complete the code to make all paragraph text red.

CSS

p {
  color: [1];
}

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

Ared

Bgreen

Cblue

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using background-color instead of color.

Misspelling the color name.

The color property changes the text color. To make text red, use red.

3fill in blank

hard

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

CSS

h1 {
  font-size: [1];
}

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

A16px

B16

Cpx16

Dsize16

Attempts:

3 left

💡 Hint

Common Mistakes

Writing only the number without units.

Putting units before the number.

In CSS, font size must include units like px for pixels. So 16px is correct.

4fill in blank

hard

Fill both blanks to set the margin to 10 pixels and padding to 5 pixels for div elements.

CSS

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

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

A10px

B5px

C15px

D20px

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up margin and padding values.

Forgetting to add units like px.

The margin property sets space outside the element, and padding sets space inside. Here, margin is 10 pixels and padding is 5 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 for all h2 elements.

CSS

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

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

AArial

Bbold

Ccenter

Dnormal

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect values for font-weight or text-align.

Forgetting semicolons after each property.

font-family sets the text font, font-weight controls thickness, and text-align sets horizontal alignment. Here, Arial font, bold weight, and centered text are correct.