🎓 A1Learner
🔍
0 of 54 lessons completed

CSS Colors

The color property sets the colour of an element's text. CSS colour keywords are fixed names for colours, like red and navy.

Keywords on headings

Navy and darkgreen are both colour keywords. Each heading takes its own colour.

h1 {
  color: navy;
}
h2 {
  color: darkgreen;
}

A very light colour

Lightgray text is hard to read on a white page. The output line still proves the colour is set.

.intro {
  color: lightgray;
}

Colour the link and button

The color property works on links and buttons too. Their text takes the new colour.

a {
  color: red;
}
button {
  color: blue;
}

Example

h1 {
  color: navy;
}
.intro {
  color: darkgreen;
}
li {
  color: maroon;
}
a {
  color: red;
}

Key points

  • Colour keyword: a fixed name for a colour, like navy or maroon
  • CSS defines more than 140 colour keywords.
  • Each keyword names one exact colour set by the CSS standard.
  • The spellings gray and grey both work as keywords.
  • Text colour passes from a parent element to its children.

In this example, the heading takes the keyword navy. The intro paragraph takes darkgreen. Every list item takes maroon. The link takes red, and each keyword names one exact colour.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which option is a CSS colour keyword?