Thursday 29th of September 2016 12:06:03 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: 8.4.3.1. Scaling the line heights
scrollbars: 9.1.4.1. Overflow
block-level elements and: 8.2.1.1. 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: 8.2.2.1. Horizontal properties
shadow, adding to text: 10.3.2. text-shadow
shorthand hex notation: 3.1.2.4. 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: 9.1.3.1. 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: 10.2.2.4. Simulating class and ID
single attribute values, matching: 10.2.2.3. 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: 4.1.4.3. Spacing, alignment, and font size
letter: 4.1.4.2. Letterspacing
speak properties: 10.7. Tables
special effects
background colors: 6.1.3. Special Effects
perfect alignment of backgrounds: 6.2.5.1. 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
user agent to auto:

P {margin-left: 100px; margin-right: 100px; width: 100px;}

It will then evaluate to 200px , as shown in Figure 8-12.

Figure 8-12

Figure 8-12. Overriding the margin-right setting

TIP

Note that margin-right is forced to be auto only for left-to-right languages such as English. In right-to-left languages, everything gets flipped around,

style sheets
alternate, defining: 1.4.1.1. 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: 7.6.1.3. 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
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: 4.1.3.2. Superscripting and subscripting
superscript (SUP) element: 4.1.3. Vertical Alignment
superscripting: 4.1.3.2. 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.

Fortunately, there'sa way to assign a value to themargin on a single side of an element. Let's say we only wantto set the left margin of H2 elements to be3em. Instead of all the typing required withmargin , we could take this approach:

H2 {margin-left: 3em;}

margin-left is one of four properties devoted to

Inherited

yes

Applies to
background-position: 20px 30px;}
Figure 6-43

Figure 6-43. Offsetting the background image using length measures

This is, of course, different than percentage values, in the sensethat the offset is simply from one top left corner to another. Inother words, the top left corner of the background image lines upwith the point specified in thebackground-position declaration. You can combinelength and percentage values, though, to get a sort of "best ofboth worlds" effect. Let's ay you need to have abackground image that is all the way to the right side of an elementgood practice because list-style-image is inherited -- so any nested lists will pick up the image as the bullet, unless you prevent this from happening:

UL {list-style-image: url(ohio.gif); list-style-type: square;}
UL UL {list-style-image: none;}

Since the nested list inherits the item type square but has been set to use no image for its bullets, squares are used for the bullets in the nested list, as shown in Figure 7-84.</P>

Figure 5-13

Figure 5-13. Changing weight, with the numbers to illustrate it

The first two weight increases are large because they represent jumps from 100 to 400, and from 400 to bold (700). From 700, there is no heavier face, so the user agent simply moves the value of font-weight one notch up the numeric scale (800). Furthermore, if we were to insert a STRONG element into the B