| The ability to set the background color for an HTML page has been around almost since the first Web browsers. However, with CSS you can define the background color, not only for the entire page, but also for individual elements using the background-color property (Table 5.3). Table 5.3. Background-Color ValuesVALUE | COMPATIBILITY |
|---|
<color> | IE4, FF1, S1, O3.5, CSS1 | transparent | IE4, FF1, S1, O3.5, CSS1 |
In this example (Figure 5.3), the background color has been set behind various elements to make them stand out on the page. Notice that in addition to the headers and other text, you can use the background-color property to set the color of the input form field and the input button. Also notice that the pink background color is showing through the transparent areas in the GIF image of Alice. Figure 5.3. Background colors have been applied to various elements. A pink color has been set for the image of Alice. This color shows through where the GIF image has been made transparent. 
To define the background color of an element: | | 1. | background-color:
Start your declaration by typing the background-color property name (Code 5.2), followed by a colon (:).
Code 5.2. The background color for the page has been set to white. Other elements in the page can provide their own background color. Make sure you set the background color for the body tag, or the browser might set it for you.| [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 Background Color</title> <style type="text/css" media="screen"><!-- body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; background-color: #fff; color: #000; } h1 { background-color: #000000; color: white; padding: 10px; } h2 { background-color: #ff9999; padding: 10px; } img { background-color: #ff9999; float: right; } input.formText { background-color: #fcc; color: red; } input.formButton { background-color: #fcc; color: red; } .chapterTitle { background-color: #ff3333; color: #ff9999; } .author { background-color: #f33; color: #f99; } .copy { background-color: rgb(75%,75%,75%); padding: 10px; } --></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 II<br /> <span >The Pool of Tears</span></h2> </div> <p > <img src="/books/3/292/1/html/2/alice04a.gif" height="448" width="301" alt="Alice stretching" />'Curiouser and  curiouser!' cried Alice (she was so much surprised, that for the moment she quite forgot how to speak good English); 'now I'm opening out like the largest telescope that ever was! </p> </body> </html>
|
| 2. | #000;
Type a value for the color you want the background to be. This value can be the name of the color or an RGB value.
Alternatively, you could type transparent, which allows the parent's background color to show through.
|
 Tips
The default state for an element's background color is none, so the parent element's background will show through unless the background color or image for that particular child element is set. You can also set the background color using the background property, which is described later in this chapter. Most browsers (except Microsoft Internet Explorer 6 and earlier) let you set not only the background color for form fields, but also the :hover and :focus states, which gives you a handy way to show visitors which field they are currently working in. Again, most browsers let you control the background color of the entire element with the :hover pseudo-class (guess which one is the holdout!). This kind of control is very useful for highlighting blocks of text in lists as the visitor rolls over them. Microsoft Internet Explorer 7 now supports the :hover pseudo-class on all elements. It can be confusing when both the input form field and the input buttons are the same color (as with the example in this section). So, rather than setting the color for the input selector, it's generally better to create classes that then get applied to individual form elements. If you are setting the color using a hex value couple (i.e., the color values for each color are the same number), you include only the first value. Thus, #000000 and #000 will both yield black.
|
