< 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 .
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; |
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; |
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; |
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);} |
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. |
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.
Selector | Description | Example |
---|---|---|
element | Selects all elements of the name specified in the rule. | h1 {color: red;} |
#id | Selects any tag with an id attribute set. | #test {color: green;} |
.class | Selects any tag with the specified class value. | .note {color: yellow;} |
element.class | Selects the specified elements with a particular class value. | h1.note {text-decoration: underline;} |
Grouping | Applies the same rules to a group of tags. | h1,h2,h3 { background-color : orange;} |
Contextual | Selects descendent tags. | p strong {color: purple;} /* sets all strong tags that are descendents |
:first-line | Selects the first line of an element. | p:first-line {color: red;} |
:first-letter | Selects the first letter of an element. | p:first-letter {font-size: larger;} |
a:link | Specifies the unvisited link. | a:link {font-weight: bold;} |
a:active | Specifies the link as it is being pressed. | a:active {color: red;} |
a:visited | Specifies the link after being pressed. | a:visited {text-decoration: line-through;} |
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.
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;} |
> | 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 |
@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 */ |
: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;} |
:lang | Applies style to an element according to what language the element is in. | *:lang(fr) {color: blue;} |
: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 > |