Color names in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What color will the text be?

Given the CSS rule below, what color will the text inside the paragraph appear as in a modern browser?

CSS

p { color: navy; }

A A dark blue color

B A bright red color

C A shade of green

D Black color

💡 Hint

Think about the common color name 'navy' in CSS.

The color name 'navy' in CSS represents a dark blue color. It is a standard named color supported by all modern browsers.

❓ rendering

intermediate

Which color name will make the background yellow?

You want to set the background color of a div to yellow using a CSS color name. Which option will do this correctly?

CSS

div { background-color: ???; }

A background-color: lemon;

B background-color: gold;

C background-color: lightyellow;

D background-color: yellow;

💡 Hint

Look for the exact CSS color name for pure yellow.

The CSS color name 'yellow' sets the background to pure yellow. 'gold' and 'lightyellow' are different shades, and 'lemon' is not a valid CSS color name.

❓ selector

advanced

Which CSS selector applies a red color to all

You want all

headings to have red text using a CSS color name. Which CSS rule below is correct?

A h1 { color: red; }

B h1 { background-color: red; }

C .h1 { color: red; }

D #h1 { color: red; }

💡 Hint

Remember how to select elements by tag name in CSS.

The selector 'h1' targets all

elements. Setting 'color: red;' changes the text color to red. Options A and D select classes or IDs, not elements.

❓ accessibility

advanced

Which color name choice improves text readability for visually impaired users?

You want to choose a text color name that ensures good contrast on a white background for better accessibility. Which color name is best?

A lightgray

B black

C yellow

D darkgray

💡 Hint

Think about which color contrasts most strongly with white.

Black text on white background provides the highest contrast, making it easiest to read for most users, including those with visual impairments.

🧠 Conceptual

expert

How many standard CSS color names are there?

According to the CSS Color Module Level 4 specification, how many standard color names are defined for use in CSS?

A 16

B 512

C 140

D 256

💡 Hint

Think about the named colors inherited from HTML and extended in CSS.

CSS defines 140 standard color names, including basic colors and extended shades like 'lightblue' and 'darkolivegreen'.