Wednesday 13th of December 2017 08:02:35 PM

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: S

S element: 4.1.6. Text Decoration
sample projects using CSS: 11. CSS in Action
sans serif fonts: 5.1. Font Families
Scalable Vector Graphics (SVG): 1.3.1. Limited Initial Scope
scaling factor
absolute font sizes: 5.3.1. Absolute Sizes
line height and: 4.1.2. The Height of Lines
scaling line heights: Scaling the line heights
scrollbars: Overflow
block-level elements and: Height
selectors: 2.1.1. Rule Structure
class: 2.3. Class and ID Selectors
2.3.1. Class Selectors
CSS2: 10.2. CSS2 Selectors
grouping: 2.2.1. Grouping Selectors
ID: 2.3. Class and ID Selectors
2.3.2. ID Selectors
pseudo-class: 2.4.1. Pseudo-Class Selectors
pseudo-element: 2.4.2. Pseudo-Element Selectors
semicolon (;) terminating declarations: 2.1.3. Declarations
2.2.2. Grouping Declarations
serif fonts: 5.1. Font Families
servers, external style sheets and: 11.2.11. Serving CSS Up Correctly
seven properties of horizontal formatting[seven properties of horizontal formatting: Horizontal properties
shadow, adding to text: 10.3.2. text-shadow
shorthand hex notation: Short hexadecimal colors
shorthand properties: 7.4.4. Shorthand Border Properties
background property: 6.2.6. Bringing It All Together
border property: 7.4.4. Shorthand Border Properties
font property: 5.5. Using Shorthand: The font Property
list-style property: 7.7.4. List Styles In Shorthand
shrink-wrapping content: Setting width and height
shrinking text: 11.2.6. The Incredible Shrinking Text!
side-offset properties: 9.1.2. Side Offsets
sidebar: 11.1.2. Case 2: Library Catalog System Interface
images in: 6.2.2. Repeats with Direction
simulating class/ID selectors: Simulating class and ID
single attribute values, matching: Matching single attribute values
single quotation marks ( ): 5.1.3. Using Quotation Marks
single-side margin properties: 7.3.4. Single-Side Margin Properties
slanted text: 5.4.1. Fonts with Style
small-caps text: 5.4.2. Font Variations
sorting (cascade rules): 2.8. The Cascade
spaces separating keywords: 2.1.3. Declarations
2.1.3. Declarations
spacing: 4.1.4. Word Spacing and Letterspacing
alignment and: Spacing, alignment, and font size
letter: Letterspacing
speak properties: 10.7. Tables
special effects
background colors: 6.1.3. Special Effects
perfect alignment of backgrounds: Interesting effects
text shadow: 10.3.2. text-shadow
specificity: 2.7. Specificity
inheritance and: 2.7.1. Inheritance and Specificity
specificity sorting: 2.8. The Cascade
speech-synthesis browsers: 1.1.1. What a Mess
1.1.1. What a Mess
10.8.2. The Spoken Word
stacking context: 9.5. Stacking Positioned Elements
stacking positioned elements: 9.5. Stacking Positioned Elements
sticky notes: 9.3. Absolute Positioning
stress property: 10.8.2. The Spoken Word
STRIKE element: 4.1.6. Text Decoration
strikethrough (see line-through)
structural languages: 1.2.6. Preparing for the Future
structural markup: 1.1.1. What a Mess
structure of rules: 2.1.1. Rule Structure
STYLE attribute: 1.4.6. Inline Styles
2.8. The Cascade
quotation marks and: 5.1.3. Using Quotation Marks
specificity and: 2.7.1. Inheritance and Specificity
style declarations: 1.4.4. Actual Styles
STYLE element: 1.4.2. The STYLE Element
style sheets
alternate, defining: LINK attributes
cascading (see CSS)
consistency, achieving with: 11.1.1. Case 1: Consistent Look and Feel
document: 1.4.2. The STYLE Element
embedded: 1.4.2. The STYLE Element
external (see external style sheets)
ignored when not recognized: 1.4.4. Actual Styles
imported: 1.2.3. Using Your Styles on Multiple Pages
overriding styles in: No floating at all
linking to HTML documents: 1.4.1. The LINK Tag
making concise through grouping: 2.2. Grouping
naming: 1.4.1. The LINK Tag
reader: 1.2.4. Cascading

If you wanted to make sure that a document uses italic text infamiliar ways, you could write a style sheet like this:

P {font-style: normal;}EM, I {font-style: italic;}

As we can see in Figure 5-25, these styles wouldmake paragraphs use an upright font, as usual, and cause theEM and I elements to use anitalic font -- again, as usual.

styles: 1.4.4. Actual Styles
for borders: 7.4.1. Borders with Style
disappearing with Netscape Navigator: 11.2.10. Disappearing Styles
inline: 1.4.6. Inline Styles
using on multiple pages: 1.2.3. Using Your Styles on Multiple Pages
styling common elements: 11.2.4. Styling Common Elements
stylistic languages: 1.2.6. Preparing for the Future
subscript (SUB) element: 4.1.3. Vertical Alignment
subscripting: Superscripting and subscripting
superscript (SUP) element: 4.1.3. Vertical Alignment
superscripting: Superscripting and subscripting
SVG (Scalable Vector Graphics): 1.3.1. Limited Initial Scope

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.

The script used for this trick was adopted from a technique presented in the Netscape Developer's Edge article "Determining Browser Type and Version with JavaScript" at (

11.2.11. Serving CSS Up Correctly

Finally, a problem related to, but not exactly about, CSS. Some authors have reported trouble with getting

To see what this means, let's start with a paragraph that has anegative top margin and no margins on its other sides -- this willkeep the example simple. In addition, we'll make the paragraphbold, so that it's easier to distinguish from its neighbors:

<P STYLE="margin: -1.75em 0 0 0; font-weight: bold;">This paragraph has a negative top margin...</P>

We can see in Figure 7-18 that the paragraph has

Further compounding the problem is that rect(...)only accepts length units and auto. The additionof percentage units as valid rect(...) valueswould go a long way toward improving things, and hopefully a futureversion of CSS will add this capability.

This property can be used to clip the element with a simpleintersection operation. The area of the element contained within theconsider our next subject: the adjacent siblingselector. This is in some ways like the child selector,but in this case, styles are applied to elements that share a parentand are next to each other in the document tree. For example:

H2 + P {color: silver;}

In the first set of markup, a paragraph immediately follows anH2, so it is silver. In the second, the elementadjacent to the H2 is a UL,which does not match the rule, and neither does the paragraph right the innermost STRONG element, its weight would also be 900, since font-weight can never be higher than 900. Assuming, as we have, that there are only two font faces available, then the text would appear to be either Regular or Bold text, as we see in Figure 5-15:

regular <SPAN> regular <STRONG> bold <B> bold