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

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 */
}

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 */
}

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;
}

Hint

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

Practice

1. Which of the following is a valid CSS color name you can use directly in your stylesheet?

easy

A. brightblue

B. bluish

C. blue

D. colorful

Solution

1. Step 1: Understand CSS color names

   CSS supports a fixed list of color names like 'blue', 'red', 'green', etc. Names like 'bluish' or 'brightblue' are not standard.

2. Step 2: Identify the valid color name

   Among the options, only 'blue' is a recognized CSS color name.

3. Final Answer:

   blue -> Option C

4. Quick Check:

   Valid CSS color name = blue [OK]

Hint: Use only standard color names listed in CSS specs [OK]

Common Mistakes:

• Using made-up color names
• Assuming any descriptive word works
• Confusing color names with CSS functions

2. Which CSS property correctly uses a color name to set text color?

easy

A. color: red;

B. background-color: red;

C. text-color: red;

D. font-color: red;

Solution

1. Step 1: Recall CSS property for text color

   The CSS property to set text color is 'color'. Properties like 'text-color' or 'font-color' do not exist.

2. Step 2: Match property with color name usage

   color: red; uses 'color: red;', which is correct syntax to set text color using a color name.

3. Final Answer:

   color: red; -> Option A

4. Quick Check:

   Text color property = color [OK]

Hint: Use 'color' property for text color, not 'font-color' or 'text-color' [OK]

Common Mistakes:

• Using non-existent properties like 'text-color'
• Confusing background and text color properties
• Misspelling property names

3. What color will the text appear if this CSS is applied?

p { color: green; }

medium

A. Red text

B. Blue text

C. Black text

D. Green text

Solution

1. Step 1: Read the CSS rule

   The CSS sets the text color of paragraph elements to 'green' using the color name.

2. Step 2: Understand color name effect

   The color name 'green' changes the text color to green in the browser.

3. Final Answer:

   Green text -> Option D

4. Quick Check:

   color: green; means green text [OK]

Hint: Color name sets the visible color directly [OK]

Common Mistakes:

• Confusing property with background-color
• Assuming color names are case-sensitive
• Ignoring the CSS selector effect

4. Identify the error in this CSS snippet:

div { background-color: lightbluee; }

medium

A. Color name is misspelled

B. Property name is incorrect

C. Missing semicolon

D. Selector is invalid

Solution

1. Step 1: Check the property name

   The property 'background-color' is correct and valid in CSS.

2. Step 2: Check the color name spelling

   The color name 'lightbluee' is misspelled; the correct name is 'lightblue' without the extra 'e'.

3. Final Answer:

   Color name is misspelled -> Option A

4. Quick Check:

   Misspelled color name causes error [OK]

Hint: Check spelling of color names carefully [OK]

Common Mistakes:

• Assuming any similar word is valid color
• Ignoring typos in color names
• Thinking semicolon or selector is wrong

5. You want a button with white text on a dark red background using color names. Which CSS rule achieves this?

hard

A. button { color: darkred; background-color: white; }

B. button { color: white; background-color: darkred; }

C. button { color: black; background-color: red; }

D. button { color: white; background-color: red; }

Solution

1. Step 1: Identify text color requirement

   The text should be white, so the 'color' property must be set to 'white'.

2. Step 2: Identify background color requirement

   The background should be dark red, so 'background-color' must be 'darkred'.

3. Step 3: Match the correct CSS rule

   button { color: white; background-color: darkred; } sets 'color: white;' and 'background-color: darkred;', matching the requirements exactly.

4. Final Answer:

   button { color: white; background-color: darkred; } -> Option B

5. Quick Check:

   Text white + background darkred = button { color: white; background-color: darkred; } [OK]

Hint: Text color uses 'color', background uses 'background-color' [OK]

Common Mistakes:

• Swapping text and background colors
• Using incorrect color names
• Ignoring case sensitivity of color names