CSS has several properties for changing the color of various items:
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. CSS 2.1 adds orange to this list. 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%) }