• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

CSS

online coding class codepractice

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)

codepractice logo
Login
Go Back Top