Cascading Style Sheets: The Definitive Guide, Second Edition

Cascading Style Sheets: The Definitive Guide, Second Edition

by Eric A. Meyer
Released March 2004
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596005252

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon
Start your free trial

Book description

Simply put, Cascading Style Sheets (CSS) is a way to separate a document's structure from its presentation. The benefits of this can be quite profound: CSS allows a much richer document appearance than HTML; CSS saves time--you can create or change the appearance of an entire document in just one place; and its compact file size makes web pages load quickly. Eric Meyer, a member of the CSS&FP Working Group and an internationally known expert on HTML and CSS, tackles the subject with passion and delivers a comprehensive and thorough update to his groundbreaking book. All readers will benefit from both the depth and breadth of his experience and his clear and honest style. Cascading Style Sheets: The Definitive Guide, 2nd Edition is a thorough review of all aspects of CSS2.1 and a comprehensive guide to CSS implementation. The book includes new content on positioning, lists and generated content, table layout, user interface, paged media, and more. It explores in detail each individual CSS property and how it interacts with other properties, and shows how to avoid common mistakes in interpretation. If you're ready to take the next step with your HTML coding and incorporate CSS or are already a CSS code warrior, you'll find Cascading Style Sheets: The Definitive Guide, 2nd Edition is the book you've been craving.

Table of contents

  1. Cascading Style Sheets: The Definitive Guide, 2nd Edition
    1. Foreword
    2. Preface
      1. Conventions Used in This Book
      2. Property Conventions
      3. How to Contact Us
      4. Acknowledgments
    3. 1. CSS and Documents
      1. The Web’s Fall from Grace
        1. What a Mess
      2. CSS to the Rescue
        1. Rich Styling
        2. Ease of Use
        3. Using Your Styles on Multiple Pages
        4. Cascading
        5. Compact File Size
        6. Preparing for the Future
      3. Elements
        1. Replaced and Nonreplaced Elements
          1. Replaced elements
          2. Nonreplaced elements
        2. Element Display Roles
          1. Block-level elements
          2. Inline-level elements
      4. Bringing CSS and XHTML Together
        1. The Tag
          1. Attributes
          2. Alternate style sheets
        2. The style Element
        3. The @import Directive
        4. Actual Style Rules
          1. Backward accessibility
        5. CSS Comments
        6. Inline Styles
      5. Summary
    4. 2. Selectors
      1. Basic Rules
        1. Rule Structure
        2. Element Selectors
        3. Declarations and Keywords
      2. Grouping
        1. Grouping Selectors
          1. The universal selector
        2. Grouping Declarations
        3. Grouping Everything
      3. Class and ID Selectors
        1. Class Selectors
        2. Multiple Classes
        3. ID Selectors
        4. Deciding Between Class and ID
      4. Attribute Selectors
        1. Simple Attribute Selection
        2. Selection Based on Exact Attribute Value
        3. Selection Based on Partial Attribute Values
        4. A Particular Attribute Selection Type
      5. Using Document Structure
        1. Understanding the Parent-Child Relationship
        2. Descendant Selectors
        3. Selecting Children
        4. Selecting Adjacent Sibling Elements
      6. Pseudo-Classes and Pseudo-Elements
        1. Pseudo-Class Selectors
          1. Link pseudo-classes
          2. Dynamic pseudo-classes
          3. Real-world issues with dynamic styling
          4. Selecting a first child
          5. Selecting based on language
          6. Combining pseudo-classes
        2. Pseudo-Element Selectors
          1. Styling the first letter
          2. Styling the first line
          3. Restrictions on :first-letter and :first-line
          4. Style before and after elements
      7. Summary
    5. 3. Structure and the Cascade
      1. Specificity
        1. Declarations and Specificity
        2. Universal Selector Specificity
        3. ID and Attribute Selector Specificity
        4. Inline Style Specificity
        5. Importance
      2. Inheritance
      3. The Cascade
        1. Sorting by Weight and Origin
        2. Sorting by Specificity
        3. Sorting by Order
        4. Non-CSS Presentational Hints
      4. Summary
    6. 4. Values and Units
      1. Numbers
      2. Percentages
      3. Color
        1. Named Colors
        2. Colors by RGB
          1. Functional RGB colors
          2. Hexadecimal RGB colors
          3. Bringing the colors together
          4. Web-safe colors
      4. Length Units
        1. Absolute Length Units
          1. Working with absolute lengths
        2. Relative Length Units
          1. em and ex units
          2. Practical issues with em and ex
          3. Pixel lengths
          4. Pixel theory
          5. What to do?
      5. URLs
        1. Keywords
          1. inherit
      6. CSS2 Units
      7. Summary
    7. 5. Fonts
      1. Font Families
        1. Using Generic Font Families
        2. Specifying a Font Family
          1. Using quotation marks
      2. Font Weights
        1. How Weights Work
        2. Getting Bolder
        3. Lightening Weights
      3. Font Size
        1. Absolute Sizes
        2. Relative Sizes
        3. Percentages and Sizes
        4. Font Size and Inheritance
        5. Using Length Units
      4. Styles and Variants
        1. Fonts with Style
        2. Font Variations
      5. Stretching and Adjusting Fonts
      6. The font Property
        1. Adding the Line Height
        2. Using Shorthands Properly
        3. Using System Fonts
      7. Font Matching
        1. Font Face Rules
          1. Font name matching
          2. Intelligent font matching
          3. Font synthesis
          4. Font download
      8. Summary
    8. 6. Text Properties
      1. Indentation and Horizontal Alignment
        1. Indenting Text
        2. Horizontal Alignment
      2. Vertical Alignment
        1. The Height of Lines
          1. Constructing a line
          2. Assigning values to line-height
          3. Line height and inheritance
        2. Vertically Aligning Text
          1. Baseline alignment
          2. Superscripting and subscripting
          3. Bottom feeding
          4. Getting on top
          5. In the middle
          6. Percentages
          7. Length alignment
      3. Word Spacing and Letter Spacing
        1. Word Spacing
        2. Letter Spacing
        3. Spacing and Alignment
      4. Text Transformation
      5. Text Decoration
        1. Weird Decorations
      6. Text Shadows
        1. Handling Whitespace
        2. Text Direction
      7. Summary
    9. 7. Basic Visual Formatting
      1. Basic Boxes
        1. The Containing Block
        2. A Quick Refresher
      2. Block-Level Elements
        1. Horizontal Formatting
          1. Horizontal properties
          2. Using auto
          3. More than one auto
          4. Negative margins
          5. Percentages
          6. Replaced elements
        2. Vertical Formatting
          1. Vertical properties
          2. Percentage heights
          3. Auto heights
          4. Collapsing vertical margins
          5. Negative margins
        3. List Items
      3. Inline Elements
        1. Line Layout
        2. Basic Terms and Concepts
        3. Inline Formatting
        4. Inline Nonreplaced Elements
          1. Building the boxes
          2. Vertical alignment
          3. Managing the line-height
          4. Scaling line heights
          5. Adding box properties
        5. Inline Replaced Elements
          1. Adding box properties
          2. Replaced elements and the baseline
      4. Altering Element Display
        1. Changing Roles
        2. Inline-Block Elements
        3. Run-in Elements
          1. Computed values
      5. Summary
    10. 8. Padding, Borders, and Margins
      1. Basic Element Boxes
        1. Width and Height
        2. Margins Versus Padding
      2. Margins
        1. Length Values and Margins
        2. Percentages and Margins
        3. Replicating Values
        4. Single-Side Margin Properties
        5. Negative and Collapsed Margins
        6. Margins and Inline Elements
      3. Borders
        1. Borders and Backgrounds
        2. Borders with Style
          1. Multiple styles
          2. Single-side styles
        3. Border Widths
          1. No border at all
        4. Border Colors
          1. Transparent borders
        5. Shorthand Border Properties
        6. Global Borders
        7. Borders and Inline Elements
      4. Padding
        1. Percentage Values and Padding
        2. Single-Side Padding
        3. Padding and Inline Elements
        4. Padding and Replaced Elements
      5. Summary
    11. 9. Colors and Backgrounds
      1. Colors
      2. Foreground Colors
        1. Replacing Attributes
        2. Affecting Borders
        3. Affecting Form Elements
        4. Inheriting Color
      3. Backgrounds
        1. Background Color
          1. Historical issues
          2. Special effects
        2. Background Images
          1. Using an image
          2. Why backgrounds aren’t inherited
          3. Good background practices
        3. Repeats with Direction
        4. Background Positioning
          1. Keywords
          2. Percentage values
          3. Length values
        5. Repeats with Direction (Revisited)
        6. Getting Attached
          1. Interesting effects
        7. Bringing It All Together
      4. Summary
    12. 10. Floating and Positioning
      1. Floating
        1. Floated Elements
          1. No floating at all
        2. Floating: The Details
        3. Applied Behavior
          1. Negative margins
        4. Floats, Content, and Overlapping
        5. Clearing
      2. Positioning
        1. Basic Concepts
          1. Types of positioning
          2. The containing block
          3. Offset properties
        2. Width and Height
          1. Setting width and height
          2. Limiting width and height
        3. Content Overflow and Clipping
          1. Overflow
          2. Content clipping
        4. Element Visibility
        5. Absolute Positioning
          1. Containing blocks and absolutely positioned elements
          2. Placement and sizing of absolutely positioned elements
          3. Auto-edges
          4. Placing and sizing nonreplaced elements
          5. Placing and sizing replaced elements
          6. Placement on the z-axis
        6. Fixed Positioning
        7. Relative Positioning
      3. Summary
    13. 11. Table Layout
      1. Table Formatting
        1. Visually Arranging a Table
          1. Table arrangement rules
        2. Table Display Values
          1. Row primacy
          2. Columns
        3. Anonymous Table Objects
          1. Object insertion rules
        4. Table Layers
        5. Captions
      2. Table Cell Borders
        1. Separated Cell Borders
          1. Border spacing
          2. Handling empty cells
        2. Collapsing Cell Borders
          1. Collapsing border layout
          2. Border collapsing
      3. Table Sizing
        1. Width
          1. Fixed layout
          2. Automatic layout
        2. Height
        3. Alignment
      4. Summary
    14. 12. Lists and Generated Content
      1. Lists
        1. Types of Lists
        2. List Item Images
        3. List-Marker Positions
        4. List Styles in Shorthand
        5. List Layout
      2. Generated Content
        1. Inserting Generated Content
        2. Specifying Content
          1. Inserting attribute values
          2. Generated quotes
        3. Counters
          1. Resetting and incrementing
          2. Using counters
          3. Counters and scope
      3. Summary
    15. 13. User Interface Styles
      1. System Fonts and Colors
        1. System Fonts
        2. System Colors
      2. Cursors
        1. Changing the Cursor
          1. Pointing and selection cursors
          2. Movement cursors
          3. Waiting and progressing
          4. Providing help
          5. Graphic cursors
      3. Outlines
        1. Setting an Outline’s Style
        2. Outline Width
        3. Coloring an Outline
        4. Bringing It All Together
      4. Summary
    16. 14. Non-Screen Media
      1. Designating Medium-Specific Style Sheets
      2. Paged Media
        1. Print Styles
          1. Differences between screen and print
          2. Defining the page size
          3. Selecting page types
          4. Page-breaking
          5. Orphans and widows
          6. Page-breaking behavior
          7. Repeated elements
          8. Elements outside the page
        2. Projection Styles
          1. Setting up slides
          2. Positioning elements
          3. Considerations for projection
      3. Aural Styles
        1. Speaking
          1. Punctuation and numbers
          2. Speaking table headers
          3. Speech rate
        2. Volume
        3. Giving Voice
        4. Altering the Voice
          1. Changing the pitch
          2. Stress and richness
        5. Pauses and Cues
          1. Pauses
          2. Cues
          3. Pauses, cues, and generated content
        6. Background Sounds
        7. Positioning Sounds
          1. Combining azimuth with elevation
      4. Summary
    17. A. Property Reference
      1. Visual Media
        1. background
        2. background-attachment
        3. background-color
        4. background-image
        5. background-position
        6. background-repeat
        7. border
        8. border-bottom
        9. border-bottom-color
        10. border-bottom-style
        11. border-bottom-width
        12. border-color
        13. border-left
        14. border-left-color
        15. border-left-style
        16. border-left-width
        17. border-right
        18. border-right-color
        19. border-right-style
        20. border-right-width
        21. border-style
        22. border-top
        23. border-top-color
        24. border-top-style
        25. border-top-width
        26. border-width
        27. bottom
        28. clear
        29. clip
        30. color
        31. content
        32. counter-increment
        33. counter-reset
        34. cursor
        35. direction
        36. display
        37. float
        38. font
        39. font-family
        40. font-size
        41. font-style
        42. font-variant
        43. font-weight
        44. height
        45. left
        46. letter-spacing
        47. line-height
        48. list-style
        49. list-style-image
        50. list-style-position
        51. list-style-type
        52. margin
        53. margin-bottom
        54. margin-left
        55. margin-right
        56. margin-top
        57. max-height
        58. max-width
        59. min-height
        60. min-width
        61. outline
        62. outline-color
        63. outline-style
        64. outline-width
        65. overflow
        66. padding
        67. padding-bottom
        68. padding-left
        69. padding-right
        70. padding-top
        71. position
        72. quotes
        73. right
        74. text-align
        75. text-decoration
        76. text-indent
        77. text-transform
        78. top
        79. unicode-bidi
        80. vertical-align
        81. visibility
        82. white-space
        83. width
        84. word-spacing
        85. z-index
      2. Tables
        1. border-collapse
        2. border-spacing
        3. caption-side
        4. empty-cells
        5. table-layout
      3. Paged Media
        1. orphans
        2. page-break-after
        3. page-break-before
        4. page-break-inside
        5. widows
      4. Dropped from CSS2.1
      5. Visual Styles
        1. font-size-adjust
        2. font-stretch
        3. marker-offset
        4. text-shadow
      6. Paged Media
        1. marks
        2. page
        3. size
      7. Aural Styles
        1. azimuth
        2. cue
        3. cue-after
        4. cue-before
        5. elevation
        6. pause
        7. pause-after
        8. pause-before
        9. pitch
        10. pitch-range
        11. play-during
        12. richness
        13. speak
        14. speak-header
        15. speak-numeral
        16. speak-punctuation
        17. speech-rate
        18. stress
        19. voice-family
        20. volume
    18. B. Selector, Pseudo-Class, and Pseudo-Element Reference
      1. Selectors
        1. Universal Selector
        2. Type Selector
        3. Descendant Selector
        4. Child Selector
        5. Adjacent Sibling Selector
        6. Class Selector
        7. ID Selector
        8. Simple Attribute Selector
        9. Exact Attribute Value Selector
        10. Partial Attribute Value Selector
        11. Language Attribute Selector
      2. Pseudo-Classes and Pseudo-Elements
        1. :active
        2. :after
        3. :before
        4. :first-child
        5. :first-letter
        6. :first-line
        7. :focus
        8. :hover
        9. :lang
        10. :link
        11. :visited
    19. C. Sample HTML 4 Style Sheet
    20. Index
    21. Colophon

Product information

  • Title: Cascading Style Sheets: The Definitive Guide, Second Edition
  • Author(s): Eric A. Meyer
  • Release date: March 2004
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596005252