Background color in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the background color of this box?

Look at the CSS code below. What color will the box show as its background?

CSS

div {
  background-color: #ff6347;
  width: 100px;
  height: 100px;
}

A A shade of orange-red (tomato color)

B A bright red color

C A dark blue color

D A light green color

💡 Hint

The hex code #ff6347 is known as tomato color.

The hex code #ff6347 corresponds to a tomato color, which is a shade of orange-red. It is not pure red or blue or green.

❓ rendering

intermediate

Which background color will fill the entire viewport?

Given this CSS, what color will fill the entire browser window background?

CSS

body {
  background-color: rgb(0, 128, 0);
  margin: 0;
  height: 100vh;
}

A A medium green color filling the whole window

B No background color visible because height is zero

C A transparent background showing default white

D A blue background filling the window

💡 Hint

The rgb(0, 128, 0) is a green color. The height 100vh means full viewport height.

The background-color is set to rgb(0, 128, 0), which is a medium green. The height: 100vh makes the body fill the full viewport height, and margin: 0 removes default spacing, so the green fills the entire window.

❓ selector

advanced

Which CSS selector changes background color only for paragraphs inside a section?

You want to change the background color of only <p> tags inside <section> elements. Which selector does this correctly?

A p > section { background-color: lightblue; }

B p section { background-color: lightblue; }

C section > p { background-color: lightblue; }

D section p { background-color: lightblue; }

💡 Hint

Think about the order: parent then child in selectors.

The selector section p targets all <p> elements inside any <section>. Option D selects only direct children, which is more restrictive but still valid. However, option D is the general correct selector for paragraphs inside sections.

❓ accessibility

advanced

Why should you avoid pure black background with pure white text?

What is a main accessibility concern when using pure black (#000000) background with pure white (#FFFFFF) text?

A It disables screen readers

B It breaks keyboard navigation

C It causes eye strain due to very high contrast

D It is not readable on mobile devices

💡 Hint

Think about how your eyes feel reading very bright text on dark background.

Pure black and pure white create very high contrast which can cause eye strain for many users. Accessibility guidelines recommend softer contrasts for better readability and comfort.

🧠 Conceptual

expert

What happens if you set background-color with alpha transparency on a semi-transparent element?

Consider this CSS: .box { background-color: rgba(255, 0, 0, 0.5); opacity: 0.5; width: 100px; height: 100px; } What will be the visual effect on the box's background color?

A The box background will be fully opaque red ignoring opacity

B The box background will be very faint red because opacity multiplies transparency

C The box background will be solid red with no transparency

D The box background will be invisible

💡 Hint

Opacity affects the whole element including background color transparency.

The background-color has 50% transparency (alpha 0.5). The opacity: 0.5 applies to the entire element, making it 50% transparent as well. These transparencies multiply, so the visible background is even more faint red.

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