• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Color Keywords

← Previous Next →

🔹 What Are CSS Color Keywords?

CSS Color Keywords are predefined color names that browsers recognize. They allow you to apply colors using plain language like red, blue, gold, etc., instead of using HEX, RGB, or HSL values.

CSS supports 140+ standard color keywords.

🔸 Examples of Common CSS Color Keywords

Color Name Preview
red 🔴 Red
green 🟢 Green
blue 🔵 Blue
yellow 🟡 Yellow
black ⚫ Black
white ⚪ White
gray ⚫ Gray
orange 🟠 Orange
purple 🟣 Purple
pink 🌸 Pink
cyan 🔷 Cyan
lime 🟩 Lime
gold 💛 Gold
navy 🔵 Navy Blue
teal 🟩 Teal
maroon 🟥 Maroon
olive 🟨 Olive
silver ⚪ Silver
aqua 🔹 Aqua

🔸 Using CSS Color Keywords in Code

Text Color
h1 {
  color: crimson;
}
Background Color
div {
  background-color: lightgreen;
}
Border Color
button {
  border: 2px solid navy;
}

🔸 Using transparent and currentColor

  • transparent: Makes the element background invisible

  • currentColor: Inherits the current color value

p {
  background-color: transparent;
  border: 1px solid currentColor;
}

Practice Questions

Q1. Set <h2> text color to blue.

Q2. Use tomato color for the background of a paragraph.

Q3. Add a gold border to a button.

Q4. Make the background of a box transparent.

Q5. Apply maroon color to heading text.

Q6. Use currentColor to match border with text.

Q7. Change a div’s background to lime.

Q8. Set the text color of a link to navy.

Q9. Use orange as the background of a section.

Q10. Create a card with white text and black background.

CSS Color Keywords Quiz

Q1: Which of the following is a valid CSS color keyword?

A. ultrablue
B. navy
C. deepred
D. neonpink

Q2: What does currentColor do in CSS?

A. Sets color to white
B. Inherits the text color
C. Makes color transparent
D. Resets color to default

Q3: Which keyword makes the background fully see-through?

A. clear
B. none
C. transparent
D. invisible

Q4: Which is not a valid color keyword?

A. teal
B. pink
C. skyred
D. orange

Q5: Which color keyword will give a light blue background?

A. aqua
B. black
C. maroon
D. olive

Q6: What does the keyword silver represent?

A. Light gray
B. White
C. Gold
D. Transparent

Q7: Which property uses color keywords to style text?

A. text-color
B. color
C. font-color
D. paint

Q8: Which CSS property uses color keywords for backgrounds?

A. color-bg
B. background-color
C. bgcolor
D. backcolor

Q9: Which of these is a darker shade keyword?

A. navy
B. yellow
C. aqua
D. lime

Q10: Which color keyword gives a dark red tone?

A. crimson
B. maroon
C. orange
D. olive
← Previous Next →
Login
Go Back Top