Bird
Raised Fist0
CSSmarkup~15 mins

Background color in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Background Color Styling with CSS
📖 Scenario: You are creating a simple webpage for a local bakery. The bakery wants the page to have a warm, inviting background color that matches their brand.
🎯 Goal: Build a webpage with a <body> background color set to a soft pastel orange using CSS.
📋 What You'll Learn
Use an internal CSS style block inside the <head> section
Set the background color of the <body> element
Use a valid CSS color value for the background
Ensure the HTML document has proper structure with lang, charset, and viewport meta tags
💡 Why This Matters
🌍 Real World
Setting background colors is a common task when designing websites to create mood and brand identity.
💼 Career
Web developers often need to style pages with CSS to meet client branding and design requirements.
Progress0 / 4 steps
1
Create the basic HTML structure
Write the basic HTML5 skeleton with lang="en", <head> containing <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">, and an empty <body>.
CSS
Hint

Start with the standard HTML5 document structure. Make sure to include the lang attribute on the <html> tag and the required meta tags inside <head>.

2
Add a CSS style block inside the head
Inside the <head> section, add a <style> block where you will write CSS rules.
CSS
Hint

Use the <style> tag inside <head> to write CSS rules directly in the HTML file.

3
Write CSS to set the background color of the body
Inside the <style> block, write a CSS rule that sets the background-color property of the body element to #FFDAB9 (a soft pastel orange).
CSS
Hint

Use the CSS property background-color inside the body selector to set the page background color.

4
Add a welcoming heading inside the body
Inside the <body> tag, add an <h1> heading with the text Welcome to Our Bakery!.
CSS
Hint

Use an <h1> tag inside the <body> to add the welcome message.

Practice

(1/5)
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