|
|
|||
|
|
|
|
|
|
||||
        
|
 |
Chapter 13: Color
CSS1 Color Use
So far we have discussed applying color values to various HTML elements using named values like red or hexadecimal values like #ff0000. The number of HTML elements that support such attributes as color and bgcolor is rather limited. Using CSS1 (Cascading Style Sheets, Level 1) opens up a whole new world of color possibilities, both in terms of expressing color values and of the number of HTML elements to which you can apply color.First, CSS allows color to be applied both to the foreground and background of almost any HTML element. For example, to make all text in a document red, use the simple style rule: body {color: red;}
You can also specify background color using the background-color property; so the following rule would specify a black background for the page with red text:body {background-color: black; color: red;}
The specification of colors can happen on single tags or groups of tags so that instead of using <table> tags with background colors, you might resort to simple rules like, em {background-color: orange; color: black;}
to accomplish the same look with far less markup. Consider what it would take to implement the look here:strong {background-color: yellow; color: purple;}  Color in CSS, as in HTML, can be specified using traditional hexadecimal color values, for example: body {background-color: #000000; color: #FF0000;}
However, you could also use this approach in this case for a red font:body {background-color: #000; color: #F00;}
CSS1 andCSS2 support a sort of condensed hexadecimal code, where black would be #000, blue would be #00F, and so on. Browser support is variable, so be careful when applying these color values.PhotoShop users will appreciate another CSS color value approach: RGB values. No need to convert RGB values to hex with this technique. span {color: rgb(0,0,255);}
Most CSS browsers support this approach, in which the color value is defined by the letters rgb (lowercase) followed by three-comma-separated RGB values in parentheses. It is also possible to use percentage values instead of decimal values, as for example:span {color: rgb(100%,0%,0%);}
Next: CSS2 Color Use
|
 Overview | Chapters | Examples | Resources | Buy the Book! |