This page explains more about how you can specify color in CSS.
In your sample stylesheet, you introduce background colors.
Information: Color
In this tutorial so far, you have used a limited number of named colors. CSS 2 supports 17 named colors in all. Some of the names might not be what you expect:
| black | gray | silver | white | |||||||||||
| primaries | red | lime | blue | |||||||||||
| secondaries | yellow | aqua | fuchsia | |||||||||||
| maroon | orange | olive | purple | green | navy | teal |
Your broswer might support many more named colors, like:
For details of this extended list, see: SVG color keywords in the CSS 3 Color Module. Beware of using color names that your reader's browsers might not support. |
For a larger palette, specify the red, green and blue components of the color you want by using a number sign (hash) and three hexadecimal digits in the range 0 – 9, a – f. The letters a – f represent the values 10 – 15:
| black | #000
| |
| pure red | #f00
| |
| pure green | #0f0
| |
| pure blue | #00f
| |
| white | #fff
|
For the full palette, specify two hexadcimal digits for each component:
| black | #000000
| |
| pure red | #ff0000
| |
| pure green | #00ff00
| |
| pure blue | #0000ff
| |
| white | #ffffff
|
You can usually get these six-digit hexadecimal codes from your graphics program or some other tool.
<caption style="font-weight:bold; text-align:left;">Examples </caption> With a little practice, you can adjust the three-digit colors manually for most purposes:
| ||||||||||||||||||
For a pastel shade like pale blue:
|
| You can also specify a color using decimal RGB values in the range 0 – 255, or percentages.
For example, this is maroon (dark red): rgb(128, 0, 0)
For information on matching system colors like Menu and ThreeDFace, see: CSS2 System Colors in the CSS Specification. |
Color properties
You have already used the color property for text.
You can also use the background-color property to change elements' backgrounds.
Backgrounds can be set to transparent to explicitly remove any color,
revealing the parent element's background.
The Example boxes in this tutorial use this pale yellow background:
background-color: #fffff4; The More details boxes use this pale gray: background-color: #f4f4f4; |
Action: Using color codes
Edit your CSS file. Make the change shown here in bold, to give the initial letters a pale blue background. (The layout and comments in your file will probably differ from the file shown here. Keep the layout and comments the way you prefer them.)
/*** CSS Tutorial: Color page ***/
/* page font */
body {font: 16px "Comic Sans MS", cursive;}
/* paragraphs */
p {color: blue;}
#first {font-style: italic;}
/* initial letters */
strong {
color: red;
background-color: #ddf;
font: 200% serif;
}
.carrot {color: red;}
.spinach {color: green;}
Refresh your browser to see the result:
| Cascading Style Sheets |
| Cascading Style Sheets |
| In your CSS file, change all the color names to 3-digit color codes without affecting the result.
(This cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.) |
What next?
Your sample document and your sample stylesheet strictly separate content from style.
The next page explains how you can make exceptions to this strict separation: Content