Style Sheet Property Reference - Colors
(Page 2 of 4 )
A color value can be assigned either via an RGB (red-green-blue) value or a plain-language equivalent (see Appendix A). For style sheet RGB values, you have a choice of three formats: hexadecimal triplet, decimal values, or percentage values. A hexadecimal triplet consists of three pairs of hexadecimal (base 16) numbers that range between values of 00 and ff , corresponding to the red, green, and blue components of the color. The three pairs of numbers are bunched together and preceded by a pound sign ( # ). Therefore, the reddest of reds has all red ( ff ) and none ( 00 ) of the other two colors: #ff0000 ; pure blue is #0000ff . Letters a through f can also be uppercase letters. (An approved notational shortcut allows you to specify one hexadecimal character when the value is intended to be a matching pair of characters. For example, #f0a is interpreted as #ff00aa .)
The other types of RGB values require a prefix of rgb() with a comma-delimited list of red, green, and blue values in the parentheses. As decimal values, each color can range from 0 through 255, with zero meaning the complete absence of a particular color. You can also specify each value by a percentage. The following examples show four different ways of specifying pure green:
color: gree n
color: #00ff00
color: rgb(0, 255, 0)
color: rgb(0%, 100%, 0%)
If you exceed the maximum allowable values in the last two examples, the browser trims the values back to the maximums.
These numbering schemes obviously lead to a potentially huge number of combina tions (over 16 million). In the early days of the web, typical PC display settings (throttled by limitations in processing power and memory) limited output to 256 colors, meaning that subtle differences among the 16 million potential colors were lost on visitors who had those settings. As a result, web content authors commonly used what became known as a web-safe palette consisting of 216 distinguishable colors. Although today’s computers have sufficient processing power and memory to accommodate millions of colors with ease, some page designers continue to adhere to the more limited palette. A fine online reference of colors that work well on all browsers and PC color display settings can be found at http://www.lynda.com/hex. asp.
The CSS2 specification adds another dimension to color naming: you can specify colors that the user has assigned to specific user interface items in the operating system’s control panel. Such colors are typically adjustable for items like button label text, scrollbars, 3D shadows, and so on. A color-blind user, for example, may have a carefully crafted set of colors that provide necessary contrast to see screen elements. Use these choices with caution, however, because even the default rendered color can vary widely between browser brands and operating systems. To link those colors to a style, use any of the following keywords in place of the color property value:
| activeborder | activecaption | appworkspace |
| background | buttonface | buttonhighlight |
| buttontext | captiontext | graytext |
| highlight | highlighttext | inactiveborder |
| inactivecaption | inactivecaptiontext | infobackground |
| infotext | menu | menutext |
| scrollbar | threeddarkshadow | threedface |
| threedhighlight | threedlightshadow | threedshadow |
| window | windowframe | windowtext |
Selectors
Most style sheet rules are associated with distinct HTML elements or groups of elements identified via style sheet selectors, such as classes, IDs, and contextual selectors (see Chapter 3). Table 4-1 lists these selectors as defined in W3C recommendations through CSS3, along with mainstream browser version support. In the Format column, E and F stand for element (i.e., tag) names of two different elements. As shown in Appendix F, the “m18” designation in the Mozilla column indicates an early milestone release number.
Table 4-1. Primary CSS selectors
| Name | Format | IE | Mozilla | Safari | Opera | CSS |
|---|
| Adjacent sibling | E + F | 7 | m18 | all | 7 | 2 |
| Attribute (name) | E[attr] | 7 | m18 | all | 7 | 2 |
| Attribute (name and | E[attr="val"] | 7 | m18 | all | 7 | 2 |
| value) | | | | | |
| Attribute (name and | E[attr~="val"] | 7 | m18 | all | 7 | 2 |
| any value) | | | | | | |
| Attribute (name and any value up to hyphen) | E[attr|="val"] | 7 | m18 | all | 7 | 2 |
| Attribute (name and value start) | E[attr^="val"] | 7 | 1.0.1 | all | 9 | 3 |
| Attribute (name and value end) | E[attr$="val"] | 7 | 1.0.1 | all | 9 | 3 |
| Attribute (name and value contains) | E[attr*="val"] | 7 | 1.0.1 | all | 9 | 3 |
| Child | E > F | 7 | m18 | all | 7 | 2 |
| Class | E.classname | 4 | m18 | all | 7 | 1 |
| Descendant | EF | 4 | m18 | all | 7 | 1 |
| General sibling | E ~ F | 7 | 1.7.2 | n/a | 9 | 3 |
| ID | E#id | 4 | m18 | all | 7 | 1 |
| Type | E | 4 | m18 | all | 7 | 1 |
| Universal | * | 4 | m18 | all | 7 | 2 |
Next: Pseudo-Element and Pseudo-Class Selectors >>
More DHTML Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Check it out today at your favorite bookstore. Buy this book now.
|
|
