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.

Practice

1. What does the CSS property background-color do?

easy

A. It sets the color behind the content of an element.

B. It changes the text color inside an element.

C. It adds a border around an element.

D. It changes the font style of the text.

Solution

1. Step 1: Understand the property purpose

   The background-color property sets the color behind the content and padding of an element.

2. Step 2: Compare with other properties

   Text color is set by color, borders by border, and font style by font-style.

3. Final Answer:

   It sets the color behind the content of an element. -> Option A

4. Quick Check:

   Background color = color behind element [OK]

Hint: Background color paints behind content, not text color [OK]

Common Mistakes:

• Confusing background-color with text color
• Thinking it changes borders
• Mixing it with font styling

2. Which of the following is the correct CSS syntax to set a background color to blue?

easy

A. background-color: blue;

B. background: color blue;

C. color-background: blue;

D. bg-color: blue;

Solution

1. Step 1: Identify correct property name

   The correct CSS property to set background color is background-color.

2. Step 2: Check syntax format

   The syntax is property: value;, so background-color: blue; is correct.

3. Final Answer:

   background-color: blue; -> Option A

4. Quick Check:

   Correct syntax = background-color: value; [OK]

Hint: Use full property name 'background-color' with colon and semicolon [OK]

Common Mistakes:

• Using incorrect property names like bg-color
• Swapping property and value order
• Missing semicolon at end

3. What background color will this CSS produce?

div {
  background-color: #ff0000;
}

medium

A. Green background

B. Blue background

C. Red background

D. No background color

Solution

1. Step 1: Understand hex color code

   The hex code #ff0000 means full red, zero green, zero blue.

2. Step 2: Match hex code to color

   This code produces a bright red color as background.

3. Final Answer:

   Red background -> Option C

4. Quick Check:

   #ff0000 = red color [OK]

Hint: Hex #ff0000 always means red [OK]

Common Mistakes:

• Confusing hex codes with other colors
• Thinking #ff0000 is green or blue
• Ignoring the # symbol

4. Find the error in this CSS code that tries to set a yellow background:

p {
  background-color = yellow;
}

medium

A. Missing semicolon after yellow

B. Using '=' instead of ':' between property and value

C. Wrong color name, should be 'yellowish'

D. Property name should be 'bg-color'

Solution

1. Step 1: Check property-value separator

   CSS uses colon ':' to separate property and value, not '='.

2. Step 2: Verify other syntax parts

   Semicolon is present, color name 'yellow' is valid, property name is correct.

3. Final Answer:

   Using '=' instead of ':' between property and value -> Option B

4. Quick Check:

   Property and value separated by ':' [OK]

Hint: Use colon ':' not equal '=' in CSS declarations [OK]

Common Mistakes:

• Using '=' instead of ':'
• Wrong color names
• Changing property names incorrectly

5. You want a webpage section to have a light gray background that adjusts well on all screen sizes. Which CSS snippet is best?

hard

A. section { background-color: gray; padding: 10px; }

B. section { background-color: rgb(211,211,211); width: 100px; }

C. section { background-color: lightgray; height: 100vh; }

D. section { background-color: #d3d3d3; padding: 1rem; }

Solution

1. Step 1: Choose a light gray color

   Both #d3d3d3 and rgb(211,211,211) represent light gray; color names like 'lightgray' also work.

2. Step 2: Consider responsive design

   Using padding in rem units scales well on different screens; fixed width or height can cause layout issues.

3. Step 3: Evaluate each option

   section { background-color: #d3d3d3; padding: 1rem; } uses hex color and rem padding, good for responsiveness. section { background-color: rgb(211,211,211); width: 100px; } fixes width to 100px (not responsive). section { background-color: lightgray; height: 100vh; } uses height 100vh which may cause scrolling issues. section { background-color: gray; padding: 10px; } uses 'gray' which is darker and padding in px (less scalable).

4. Final Answer:

   section { background-color: #d3d3d3; padding: 1rem; } -> Option D

5. Quick Check:

   Light gray + responsive padding = section { background-color: #d3d3d3; padding: 1rem; } [OK]

Hint: Use hex or rgb with rem padding for responsive backgrounds [OK]

Common Mistakes:

• Using fixed pixel sizes hurting responsiveness
• Choosing too dark colors for light gray
• Ignoring padding for spacing