Bird
Raised Fist0
CSSmarkup~5 mins

Color names in CSS

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
Introduction

Color names let you pick colors by simple words instead of codes. This makes styling easier and faster.

You want to quickly set a background color without remembering hex codes.
You are making a simple webpage and want readable color settings.
You want to use common colors like red, blue, or green in your design.
You are teaching or learning CSS and want easy examples.
You want to ensure colors are understood by all browsers without extra setup.
Syntax
CSS
property: color-name;

Use any CSS property that accepts colors, like color, background-color, or border-color.

Color names are case-insensitive, so Red and red work the same.

Examples
This sets the text color to red using the color name.
CSS
color: red;
This sets the background color to a light blue shade.
CSS
background-color: lightblue;
This creates a green border around an element.
CSS
border: 2px solid green;
Sample Program

This webpage uses color names to style the background, heading, and paragraph. You will see a light yellow page background, a dark blue text color for the body, a crimson heading, and a light green paragraph with an orange border.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Color Names Example</title>
  <style>
    body {
      background-color: lightyellow;
      color: darkblue;
      font-family: Arial, sans-serif;
      padding: 2rem;
    }
    h1 {
      color: crimson;
    }
    p {
      background-color: lightgreen;
      border: 3px solid orange;
      padding: 1rem;
      max-width: 400px;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>Welcome to Color Names</h1>
  <p>This paragraph uses color names for background, border, and text colors.</p>
</body>
</html>
OutputSuccess
Important Notes

Color names are easy but limited to about 140 standard colors.

For more precise colors, you can use hex codes or RGB values.

Always check color contrast for readability and accessibility.

Summary

Color names let you use simple words to set colors in CSS.

They work with many CSS properties like color and background-color.

Use color names for quick, readable, and browser-friendly color styling.

Practice

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