| The color property is used to set the foreground color of an element (Table 5.2). Although this property is primarily used to color text, you can also apply it as the foreground color for horizontal rules and form elements. Table 5.2. Color ValueVALUE | COMPATIBILITY |
|---|
<color> | IE3, FF1, S1, O3.5, CSS1 | inherit | IE3, FF1, S1, O3.5, CSS1 |
In this example (Figure 5.2), the header text is rendered in a variety of shades of red, the text is a dark gray, and the form button and the text that gets typed into the form field are red. The brighter red text is much more prominent than the lighter red and the gray text. Figure 5.2. Choose your foreground colors carefully so that they contrast not only with the background color, but also with each other so that they guide the viewer's eye where you want it to go. 
To define the foreground color: | | 1. | color:
Type the color property name, followed by a colon (:), in the CSS rule (Code 5.1).
Code 5.1. The foreground color, primarily for text, can be set using the color name or RGB values.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Setting a Foreground Color</title> <style type="text/css" media="screen"> <!-- body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; } h1 { color: red; } h2 { color: #ff0000; } input { color: rgb(100%,0%,0%); } .chapterTitle { color: #ff9999; } .author { color: #f99; } .copy{ color: rgb(102,102,102); } --> </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <form action="#" method="get" > Search Book: <input type="text" name="searchTerm" size="24" /> <input type="submit" name="findSearchTerm" value="Find" /> </form> <p >Lewis Carroll</p> <h2>CHAPTER I<br /> <span >Down the Rabbit-Hole</span></h2> </div> <p >Alice was beginning to get very tired of sitting by her sister on the bank , and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p> </body> </html>
|
| 2. | red;
Now type a value for the color you want this element to be. This value can be the name of a color or an RGB value set using percentages, values from 0-255, or hexadecimal code (see "Values and Units Used in this Book" in the Introduction).
|
 Tips
Assigning a color to several nested elements can lead to unwanted color changes. The most obvious example of this kind of mistake happens when you set the color in the <body> tag. Older browsers tend to change the color of all elements in the body. Always consider which tag styles you redefine and how they might affect other tags on your Web page (see "Inheriting Properties from a Parent" in Chapter 2). Notice that both the author and chapterTitle class use the same color of light red and both are set using a hexadecimal RGB value. However, the author class uses the full hex number #ff9999, while the chapterTitle class uses the shorthand value #f99. When specifying hex RGB values in which both color value numbers are the same, you specify each value only once. Be careful when choosing foreground text colors so that they contrast enough with the background color or image. The lower the contrast (i.e., the less difference there is in the brightness of the foreground and background colors), the more your readers will have to strain their eyes when reading. Color change is a great way to indicate when the visitor's cursor is hovering over a link. See "Working with Pseudo-Classes" in Chapter 2 for more details.
|
