Color names in CSS - Mini Project: Build & Apply

Color Names in CSS

📖 Scenario: You are creating a simple webpage to show how different color names in CSS change the background color of boxes. This helps you learn how to use color names directly in CSS styles.

🎯 Goal: Build a webpage with three colored boxes using CSS color names: red, green, and blue. Each box should have a label showing its color name.

📋 What You'll Learn

Use CSS color names to set background colors

Create three boxes with distinct colors: red, green, and blue

Label each box with its color name inside

Use semantic HTML elements

Make sure the boxes are visible and spaced apart

💡 Why This Matters

🌍 Real World

Using color names in CSS is a quick way to add colors to web pages without remembering hex codes. It helps beginners understand colors and styling.

💼 Career

Web developers often use CSS color names for simple styling and prototyping. Knowing how to apply colors and center content is essential for building user-friendly interfaces.

1

Create the HTML structure

Create a <main> element containing three <section> elements. Each <section> should have a <p> inside with the text Red, Green, and Blue respectively.

CSS

Need a hint?

Use semantic tags: <main> for main content and <section> for each color box.

2

Add CSS selectors for the sections

Add a CSS rule that selects all section elements and sets their width to 10rem, height to 10rem, margin to 1rem, and display to inline-block.

CSS

  
    Red
  
  
    Green
  
  
    Blue
  


/* Add CSS below */
section {
  /* Your code here */
}

Need a hint?

Use the section selector and set the properties exactly as instructed.

3

Set background colors using color names

Add CSS rules to set the background color of the first section to red, the second section to green, and the third section to blue. Use the :nth-child() selector for each.

CSS

  
    Red
  
  
    Green
  
  
    Blue
  


section {
  width: 10rem;
  height: 10rem;
  margin: 1rem;
  display: inline-block;
}

/* Add background colors below */
section:nth-child(1) {
  /* Your code here */
}
section:nth-child(2) {
  /* Your code here */
}
section:nth-child(3) {
  /* Your code here */
}

Need a hint?

Use :nth-child() to target each section and set background-color with the color names.

4

Style the text for readability

Add CSS rules to set the text color inside each section to white, center the text horizontally and vertically using Flexbox, and set the font size to 1.5rem.

CSS

  
    Red
  
  
    Green
  
  
    Blue
  


section {
  width: 10rem;
  height: 10rem;
  margin: 1rem;
  display: inline-block;
  /* Your code here */
}

section:nth-child(1) {
  background-color: red;
}
section:nth-child(2) {
  background-color: green;
}
section:nth-child(3) {
  background-color: blue;
}

Need a hint?

Use Flexbox on section to center text and set text color and size as instructed.