CSS Color Values

< Day Day Up >

Style sheets support a variety of color measurement values, as shown in Table B-3. Appendix E provides a greater discussion of possible color values and names .

Table B-3: CSS1 and CSS2 Color Measurement Units
Color Format	Description	Example
Specification-defined named colors	CSS color values can be defined using 16 color names: aqua , black , blue , fuchsia , gray , green , lime , maroon , navy , olive , purple , red , silver , teal , white , and yellow.	body {font-family: Arial; font- size : 12pt; color: red;}
Browser-defined named colors	Browsers define a variety of their own colors like mintcream . Appendix E provides a complete list of these extended colors, which should be avoided because of potential browser compatibility problems.	#gap {color: khaki;}
Six-digit hexadecimal	CSS's six-digit hexadecimal format is the same as HTML/XHTML. The format specifies color as #RRGGBB where RR is the amount of red, GG the amount of green, and BB the amount of blue all specified in a hexadecimal value ranging from 00 to FF.	div {font-family: Courier; font-size: 10pt; color: #00CCFF;}
Three-digit hexadecimal	The three-digit hexadecimal format is unique to CSS and specifies color in the format of #RGB where R,G, and B are hexadecimal ranging from 0 to F. Given the lesser number of digits, it is obviously less expressive than the six-digit format.	span {font-family: Helvetica; font-size: 14pt; color: #0CF;}
RGB	CSS colors can also be defined using the keyword rgb , followed by three numbers between 0 and 255, contained in parentheses and separated by commas, with no spaces between them. RGB color values can also be defined using percentages. The format is the same, except that the numbers are replaced by percentage values between 0% and 100% .	#p1 {color: rgb(204,0,51);} p {color: rgb(0%,10%,50%);}

Tip	For maximum compatibility with older CSS implementations , developers are encouraged to use known name values or the six-digit hexadecimal format when specifying color.

Selectors

CSS1 and 2 support a rich set of selectors for specifying which particular element(s) that a CSS rule applies to. CSS1 selectors are presented in Table B-4.

Table B-4: CSS1 and CSS2 Color Measurement Units
Selector	Description	Example
element	Selects all elements of the name specified in the rule.	h1 {color: red;} /* makes all h1 tags red */
#id	Selects any tag with an id attribute set.	#test {color: green;} /* makes a tag with id= ˜test' green */
.class	Selects any tag with the specified class value.	.note {color: yellow;} /* makes all tags with class= ˜note' yellow */
element.class	Selects the specified elements with a particular class value.	h1.note {text-decoration: underline;} /* underlines all H1 tags with class= ˜note' */
Grouping	Applies the same rules to a group of tags.	h1,h2,h3 { background-color : orange;} /* sets the background color of all h1,h2, and h3 elements to orange */
Contextual	Selects descendent tags.	p strong {color: purple;} /* sets all strong tags that are descendents of p tags purple */
:first-line	Selects the first line of an element.	p:first-line {color: red;} /* makes the first lines of a paragraph red */
:first-letter	Selects the first letter of an element.	p:first-letter {font-size: larger;} /* makes the first letter of a paragraph larger */
a:link	Specifies the unvisited link.	a:link {font-weight: bold;} /* makes unvisited links bold */
a:active	Specifies the link as it is being pressed.	a:active {color: red;} /* makes links red as they are pressed */
a:visited	Specifies the link after being pressed.	a:visited {text-decoration: line-through;} /* puts a line through visited links */

CSS2 introduces a number of new selectors as summarized in Table B-5. Many of these selectors use document context to determine how styles should be applied to elements, potentially reducing reliance on HTML/XHTML selectors such as class and id . For more information, see Chapter 11.

Table B-5: CSS2 Selector Summary
Selector	Description	Examples
*	The wildcard selector is used to apply a match to any element. It can be used for a global rule or, more commonly, in contextual or child selection rules.	* {background-color: red;} div * span {background-color: yellow;}
>	This selector defines a rule that matches only elements that are directly enclosed within another element, such as a <p> tag with a document body.	body > p {background-color: yellow;}
+	The adjacent sibling selector defines a rule that applies a style to the first incidence of an element immediately after the first element. In other words, the two tags are adjacent siblings in their parse tree.	h1 + p {color: red;}
[ ]	The attribute selector has many uses. Unfortunately, many browsers do not support it. The basic inclusion of an attribute name in brackets matches when the attribute is used on the selected element. A specific attribute value can be matched with = and pieces of an attribute can also be matched. The symbol ~= can be used to match space-separated attribute values while = is used to match dash-separated attribute values. It is also possible to match multiple attribute values at once.	a[href] {background-color: yellow;} a[href='http://www.htmlref.com'] {font-weight: bold;} p[title~='Test match'] { font-style: italic; } p[lang='en'] { color: red; } /* English text in red */ p[title='Test Selector'][lang='en'] { border-style : dashed; border-width : 1px; }
@media	Defines style rules for multiple media types in a single style sheet. See 'Media-Dependent Style Sheets' in Chapter 11.	@media screen {body {font-family: sans-serif; font-size: 18 pt;} }
@page	Used to define rules for page sizing and orientation rules for printing.	@page {size: 8.5in 11in;}
:left	Sets page layout rules for a left-hand page when printing.	@page :left {margin-left: 4cm; margin-right: 3cm;}
:right	Sets page layout rules for a right-hand page when printing.	@page :right {margin-left: 3cm; margin-right: 4cm;}
:first	Sets page layout rules for the first page in a document when printing.	/* Top margin on first page 10cm */ @page :first {margin-top: 10cm;}
:first-child	Applies a style to the first child element of an element.	p:first-child {color: red;}
:focus	Changes the display of an element when the element receives focus ( generally , <input="text" >).	input:focus{background-color: yellow;}
:hover	Changes the display of an element when a cursor passes over the element. Commonly supported for links, but defined for nearly every element.	a:hover {text-decoration: underline;} p:hover {background-color: yellow;}
:lang	Applies style to an element according to what language the element is in.	:lang(fr) {color: blue;} :lang(en) {color: red;}
:before	Defines content to be placed before an element. See the content property for more information on use.	div:before {content: url(/books/4/324/1/html/2/sectionstart.gif);}
:after	Defines content to be placed after an element. See the content property for more information on use.	div:after {content: url(/books/4/324/1/html/2/sectionend.gif);}

Tip	Developers should proceed with caution when using CSS2 selectors; many of the more complex ones are buggy or not supported even in modern browsers. However, they should not be avoided because when supported they can be used to create very powerful rules.

< Day Day Up >