Color names in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color to red using a color name.

CSS

body {
  background-color: [1];
}

Drag options to blanks, or click blank then click option'

Ared

B#ff0000

Crgb(255,0,0)

Drgba(255,0,0,1)

Attempts:

3 left

💡 Hint

Common Mistakes

Using hex or rgb values instead of color names.

Misspelling the color name.

The color name red is a valid CSS color keyword that sets the background color to red.

2fill in blank

medium

Complete the code to set the text color to blue using a CSS color name.

CSS

p {
  color: [1];
}

Drag options to blanks, or click blank then click option'

Anavy

Bblue

Cskyblue

Dcyan

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a shade like 'navy' or 'cyan' instead of 'blue'.

Using hex or rgb values instead of color names.

The color name blue sets the text color to a standard blue in CSS.

3fill in blank

hard

Fix the error in the code to correctly set the border color to green using a color name.

CSS

div {
  border: 2px solid [1];
}

Drag options to blanks, or click blank then click option'

Agren

Brgb(0,255,0)

Cgreen

D#00ff00

Attempts:

3 left

💡 Hint

Common Mistakes

Misspelling 'green' as 'gren'.

Using hex or rgb values instead of color names.

The correct CSS color name for green is green. The option 'gren' is a typo and invalid.

4fill in blank

hard

Fill both blanks to set the background color to yellow and the text color to black using color names.

CSS

section {
  background-color: [1];
  color: [2];
}

Drag options to blanks, or click blank then click option'

Ayellow

Bwhite

Cblack

Dgray

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'white' for text color on yellow background which reduces readability.

Choosing colors that do not contrast well.

The background color is set to yellow and the text color to black using CSS color names.

5fill in blank

hard

Fill all three blanks to set the header background to lightblue, text color to darkred, and border color to gray using color names.

CSS

header {
  background-color: [1];
  color: [2];
  border: 1px solid [3];
}

Drag options to blanks, or click blank then click option'

Alightblue

Bdarkred

Cgray

Dsilver

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up color names or using colors not in the options.

Using hex or rgb values instead of color names.

The header background uses lightblue, text color is darkred, and border color is gray using CSS color names.

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