Colors

CSS has several properties for changing the color of various items:

  • color
  • The color of the text itself (black on this page)
  • background-color
  • The color of the background behind the text (white on this page)
  • border-color
  • The color of a visible box surrounding the text

CSS uses a 24-bit color space to specify colors, much as HTML does. Always keep in mind, however, that just because you can specify a color doesn't mean any given device can render it. A black-and-white printer isn't going to print red no matter how you identify it; it might give you some nice shades of gray though. Like many other properties, color depends on the medium in which the document is presented.

The simplest way to choose a color is through one of these 16 named constants: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. There are also a number of colors that are defined to be the same as some part of the user interface. For instance, WindowText is the same color as text in windows on the local system.

Beyond this small list, you can specify the color of an item by specifying the three components--red, green, and blue--of each color, much as you do for background colors on HTML pages. Each component is given as a number between 0 and 255 with 255 being the maximum amount of the color. Numbers can be given in decimal or hexadecimal. For example, these rules use hexadecimal syntax to color the dish element pure red, the story element pure green, and the directions element pure blue: 

dish {
 color: #FF0000
}
story {
 color: #00FF00
}
directions {
 color: #0000FF }

If you prefer, you can specify the color as decimals separated by commas inside an rgb( ) function. For example, white is rgb(255,255,255); black is rgb(0,0,0). Colors in which each component is equal form various shades of gray. These rules use decimal syntax to color the ingredient element a light shade of gray but its quantity child element a darker shade of gray: 

ingredient {
 color: rgb(43,43,43)
}
quantity {
 color: rgb(21,21,21) }

You can also specify the color as percentages of each primary color from 0 to 100%. For example, the previous rules can be rewritten like this: 

ingredient {
 color: rgb(16.9%,16.9%,16.9%)
}
quantity {
 color: rgb(8.2%,8.2%,8.2%) }