Background color in CSS - 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'

Alightblue

Bcolor

Cbackground

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'color' instead of 'background-color' property.

Using invalid color names.

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 set the background color of a div with class 'box' to #ffcc00.

CSS

.box {
  background-color: [1];
}

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

A#00ff00

Byellowgreen

C#ffcc00

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong hex code.

Forgetting the '#' symbol before the hex code.

The hex color #ffcc00 is a shade of yellow. It is the correct value to set the background color as requested.

3fill in blank

hard

Fix the error in the code to correctly set the background color of the header to rgb(255, 0, 0).

CSS

header {
  background-color: [1];
}

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

Argb(255 0 0)

Brgb255,0,0

Crgba(255, 0, 0)

Drgb(255, 0, 0)

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting commas between numbers.

Using rgba without the alpha value.

Missing parentheses.

The correct syntax for rgb color uses commas between the numbers inside parentheses: rgb(255, 0, 0).

4fill in blank

hard

Fill both blanks to set the background color of paragraphs to a semi-transparent black using rgba.

CSS

p {
  background-color: [1]([2], 0.5);
}

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

Argba

Brgb

C0, 0, 0

D255, 255, 255

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'rgb' instead of 'rgba' for transparency.

Using wrong color values for black.

The rgba function sets colors with red, green, blue, and alpha (transparency). Here, 0, 0, 0 is black, and 0.5 is 50% transparency.

5fill in blank

hard

Fill all three blanks to set the background color of a section to a linear gradient from red to blue.

CSS

section {
  background: linear-gradient([1], [2], [3]);
}

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

Ato right

Bred

Cblue

D45deg

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names in wrong order.

Omitting the direction argument.

Using invalid direction values.

The linear-gradient function creates a smooth transition between colors. Here, it goes to right from red to blue.