Friday 20th of April 2018 08:24:48 AM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: F

after all, the combination of all colors. Alternatively, in order to specify black -- the absence of color -- all three would be set to 0%. Here are a few more color declarations:

H1 {color: rgb(0%,0%,0%);}          /*black*/
H2 {color: rgb(50%,50%,50%);}       /*medium gray*/
H3 {color: rgb(25%,66%,40%);}

The general syntax of this type of color value is:


where color is one of two ways to specify

fictional tags (see pseudo-element selectors)
file size with CSS: 1.2.5. Compact File Size
decreased: 11.1.2. Case 2: Library Catalog System Interface
:first-child pseudo-element: :first-child
:first-letter pseudo-element: 2.4.2. Pseudo-Element Selectors
first line of paragraph, indenting: Indenting text
:first-line pseudo-element: 2.4.2. Pseudo-Element Selectors
:first pseudo-class: Miscellaneous pseudo-elements and pseudo-classes
fixed positioning: 9.4. Fixed Positioning
float property: 7.6. Floating and Clearing
floated elements: 7.6. Floating and Clearing
8.3. Floated Elements
applied behavior: 8.3.2. Applied Behavior
background and: Backgrounds and floats
8.3.2. Applied Behavior
clearing: 7.6.2. Clear
collapsing margins and: 7.6.1. Floated Elements
columns and: 11.1.3. Case 3: Putting a Magazine Article Online
images: 7.6. Floating and Clearing
Internet Explorer 4.x and: 11.2.8. Floating Text Elements in Internet Explorer
min-max properties and: Limiting width and height
negative margins and: Negative margins and floating Negative margins
overlapping, preventing: 8.3.1. Floating: The Details
placement, rules governing: 8.3.1. Floating: The Details
taller than parent element: 8.3.2. Applied Behavior
wider than parent element: Negative margins
:focus pseudo-element: :focus
font declaration, forward-slash in: 2.1.3. Declarations
font faces: 5.1. Font Families
font families: 5.1. Font Families
declarations, quotation marks in: 5.1.3. Using Quotation Marks
generic: 5.1. Font Families
combining with actual: 5.1.2. Specifying Actual Font Names
importance of providing: 5.1.2. Specifying Actual Font Names
specifying: 5.1.2. Specifying Actual Font Names
font-family property: 5.1.1. Using Generic Font Families
font matching: 5.6. Font Matching
font names (see font families)
font property: 5.5. Using Shorthand: The font Property
required values: 5.5. Using Shorthand: The font Property
values new with CSS2: 10.3. Fonts and Text
font-size-adjust property: 10.3.1. New Font Properties
font-size property: 5.3. Font Size
font sizes: 5.3. Font Size
absolute: 5.3.1. Absolute Sizes
inheritance and: 5.3.4. Font Size and Inheritance
percentage values: 5.3.3. Percentages and Sizes
relative: 5.3.2. Relative Sizes
setting using length units: 5.3.5. Using Length Units
font-stretch property: 10.3.1. New Font Properties
font-style property: 5.4.1. Fonts with Style
font-variant property: 5.4.2. Font Variations
font-weight property: 5.2. Font Weights
fonts: 5. Fonts
alternate, providing: 5.1.2. Specifying Actual Font Names
5.1.4. Good Practices
families (see font families)
fantasy: 5.1. Font Families
handling in CSS specifications: 1.3.1. Limited Initial Scope
kursiv: 5. Fonts
matching: 5.6. Font Matching
naming issues: 5. Fonts
sizes (see font sizes)
styles: 5.4.1. Fonts with Style
variants: 5.4.2. Font Variations
weights: 5.2. Font Weights
how they work: 5.2.1. How Weights Work
sample, list of: 5.2.1. How Weights Work
footer of a table: 10.7. Tables
foreground colors: 6.1.1. Foreground Colors
importance of declaring background color with: 6.1.4. Good Practices
foreign languages
default text alignment in Arabic/Hebrew: Aligning text
hyphenation in: Aligning text
:lang pseudo-class: :lang
form elements
background images, placing in: 6.2.1. Background Images
color, setting: Affecting form elements
forward slash (/)
font property and: 5.5.1. Adding the Line Height
separating keywords: 2.1.3. Declarations
frequency values: 3.5. CSS2 Units

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

P.shade1 {border-style: solid; border-width: thick; color: gray;}P.shade2 {border-style: solid; border-width: thick; color: gray;border-color: black;}
Figure 7-44

Figure 7-44. Border colors based on the element's foreground (top) and the value of the border-color property (bottom)

The result is that the first paragraph has a gray border, havingtaken the value gray from the foreground color ofthe paragraph itself. The second paragraph, on the other hand, has ablack border because that color was explicitly assigned usingborder-color.

Figure 10-5

Figure 10-5. Selecting adjacent elements

If you wanted to make any element immediately following anH2 silver, then the universal selector comes intoplay:

H2 + * {color: silver;}

The fact that user agents ignore text between elements can actuallybe used to your advantage in many circumstances. Take, for example, adocument design in which you want STRONG text tobe gray, except when it follows EM text, in which <DIV> <P>This paragraph is not green.</P> </DIV> <P>This paragraph is green.</P> </BODY>

Only the first and third paragraphs match the rule because they are children of BODY. The second paragraph is a child of DIV, and therefore a grandchild of BODY, so it does not match the rule.