CSSmarkup~15 mins

Background color in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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

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




    
    
    Bakery Homepage

Need a 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>.

Add a CSS style block inside the head

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

CSS




    
    
    Bakery Homepage
    
        /* Your CSS here */

Need a hint?

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

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




    
    
    Bakery Homepage
    
        body {
            /* Your background color here */
        }

Need a hint?

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

Add a welcoming heading inside the body

Inside the <body> tag, add an <h1> heading with the text Welcome to Our Bakery!.

CSS




    
    
    Bakery Homepage
    
        body {
            background-color: #FFDAB9;
        }

Need a hint?

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