Color names in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a CSS color name?

A CSS color name is a predefined word that represents a specific color in CSS, like red, blue, or green. It lets you set colors without using codes.

beginner

Name three common CSS color names.

Three common CSS color names are black, white, and yellow. These are easy to remember and use.

beginner

How do you use a color name in CSS to change text color?

You use the color property with a color name. For example:

p { color: blue; }

This changes paragraph text to blue.

beginner

Are CSS color names case sensitive?

No, CSS color names are not case sensitive. Red, red, and RED all work the same.

beginner

Why might you choose a color name over a hex code?

Color names are easier to remember and type, especially for simple colors. Hex codes give more color choices but can be harder to read.

Which of these is a valid CSS color name?

A blue

B #blue

C 123blue

D blu3

Only 'blue' is a valid CSS color name. The others are invalid formats.

What CSS property changes the text color?

A background-color

B color

C font-color

D text-color

The 'color' property sets the text color in CSS.

Are CSS color names case sensitive?

A Only first letter matters

B Yes, always uppercase

C Yes, always lowercase

D No, case does not matter

CSS color names are not case sensitive; any case works.

Which color name will make text red?

A green

B blue

C red

D yellow

The color name 'red' sets the color red.

Why use color names instead of hex codes?

A They are easier to remember

B They offer more colors

C They are faster to load

D They are required in CSS

Color names are easier to remember and type than hex codes.

Explain how to use a CSS color name to change the background color of a webpage.

Think about the CSS property that controls background color.

List some advantages and disadvantages of using CSS color names compared to hex codes.

Consider simplicity versus variety.

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