CSS: The Definitive Guide, 3rd Edition

CSS: The Definitive Guide, 3rd Edition

by Eric A. Meyer
Released November 2006
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596527334

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

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from O’Reilly and nearly 200 trusted publishing partners.

Buy on Amazon
Start your free trial

Book description

CSS: The Definitive Guide, 3rd Edition, provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, lists and generated content, table layout, user interface, paged media, and more.

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 and also 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.

CSS: The Definitive Guide, 3rd Edition, provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, lists and generated content, table layout, user interface, paged media, and more. Author Eric Meyer tackles the subject with passion, exploring in detail each individual CSS property and how it interacts with other properties. You'll not only learn how to avoid common mistakes in interpretation, you also will benefit from the depth and breadth of his experience and his clear and honest style. This is the complete sourcebook on CSS.

The 3rd edition contains:

  • Updates to reflect changes in the latest draft version of CSS 2.1
  • Browser notes updated to reflect changes between IE6 and IE7
  • Advanced selectors supported in IE7 and other major browsers included
  • A new round of technical edits by a fresh set of editors
  • Clarifications and corrected errata, including updated URLs ofreferenced online resources

Table of contents

  1. Dedication
  2. Preface
    1. Conventions Used in This Book
    2. Property Conventions
    3. Using Code Examples
    4. How to Contact Us
    5. Safari® Enabled
    6. Acknowledgments
  3. 1. CSS and Documents
    1. 1.1. The Web’s Fall from Grace
      1. 1.1.1. What a Mess
    2. 1.2. CSS to the Rescue
      1. 1.2.1. Rich Styling
      2. 1.2.2. Ease of Use
      3. 1.2.3. Using Your Styles on Multiple Pages
      4. 1.2.4. Cascading
      5. 1.2.5. Compact File Size
      6. 1.2.6. Preparing for the Future
    3. 1.3. Elements
      1. 1.3.1. Replaced and Nonreplaced Elements
        1. 1.3.1.1. Replaced elements
        2. 1.3.1.2. Nonreplaced elements
      2. 1.3.2. Element Display Roles
        1. 1.3.2.1. Block-level elements
        2. 1.3.2.2. Inline-level elements
    4. 1.4. Bringing CSS and XHTML Together
      1. 1.4.1. The link Tag
        1. 1.4.1.1. Attributes
        2. 1.4.1.2. Alternate style sheets
      2. 1.4.2. The style Element
      3. 1.4.3. The @import Directive
      4. 1.4.4. Actual Style Rules
        1. 1.4.4.1. Backward accessibility
      5. 1.4.5. CSS Comments
      6. 1.4.6. Inline Styles
    5. 1.5. Summary
  4. 2. Selectors
    1. 2.1. Basic Rules
      1. 2.1.1. Rule Structure
      2. 2.1.2. Element Selectors
      3. 2.1.3. Declarations and Keywords
    2. 2.2. Grouping
      1. 2.2.1. Grouping Selectors
        1. 2.2.1.1. The universal selector
      2. 2.2.2. Grouping Declarations
      3. 2.2.3. Grouping Everything
    3. 2.3. Class and ID Selectors
      1. 2.3.1. Class Selectors
      2. 2.3.2. Multiple Classes
      3. 2.3.3. ID Selectors
      4. 2.3.4. Deciding Between Class and ID
    4. 2.4. Attribute Selectors
      1. 2.4.1. Simple Attribute Selection
      2. 2.4.2. Selection Based on Exact Attribute Value
      3. 2.4.3. Selection Based on Partial Attribute Values
      4. 2.4.4. A Particular Attribute Selection Type
    5. 2.5. Using Document Structure
      1. 2.5.1. Understanding the Parent-Child Relationship
      2. 2.5.2. Descendant Selectors
      3. 2.5.3. Selecting Children
      4. 2.5.4. Selecting Adjacent Sibling Elements
    6. 2.6. Pseudo-Classes and Pseudo-Elements
      1. 2.6.1. Pseudo-Class Selectors
        1. 2.6.1.1. Link pseudo-classes
        2. 2.6.1.2. Dynamic pseudo-classes
        3. 2.6.1.3. Real-world issues with dynamic styling
        4. 2.6.1.4. Selecting a first child
        5. 2.6.1.5. Selecting based on language
        6. 2.6.1.6. Combining pseudo-classes
      2. 2.6.2. Pseudo-Element Selectors
        1. 2.6.2.1. Styling the first letter
        2. 2.6.2.2. Styling the first line
        3. 2.6.2.3. Restrictions on :first-letter and :first-line
        4. 2.6.2.4. Style before and after elements
    7. 2.7. Summary
  5. 3. Structure and the Cascade
    1. 3.1. Specificity
      1. 3.1.1. Declarations and Specificity
      2. 3.1.2. Universal Selector Specificity
      3. 3.1.3. ID and Attribute Selector Specificity
      4. 3.1.4. Inline Style Specificity
      5. 3.1.5. Importance
    2. 3.2. Inheritance
    3. 3.3. The Cascade
      1. 3.3.1. Sorting by Weight and Origin
      2. 3.3.2. Sorting by Specificity
      3. 3.3.3. Sorting by Order
      4. 3.3.4. Non-CSS Presentational Hints
    4. 3.4. Summary
  6. 4. Values and Units
    1. 4.1. Numbers
    2. 4.2. Percentages
    3. 4.3. Color
      1. 4.3.1. Named Colors
      2. 4.3.2. Colors by RGB
        1. 4.3.2.1. Functional RGB colors
        2. 4.3.2.2. Hexadecimal RGB colors
        3. 4.3.2.3. Bringing the colors together
        4. 4.3.2.4. Web-safe colors
    4. 4.4. Length Units
      1. 4.4.1. Absolute Length Units
        1. 4.4.1.1. Working with absolute lengths
      2. 4.4.2. Relative Length Units
        1. 4.4.2.1. em and ex units
        2. 4.4.2.2. Practical issues with em and ex
        3. 4.4.2.3. Pixel lengths
        4. 4.4.2.4. Pixel theory
        5. 4.4.2.5. What to do?
    5. 4.5. URLs
      1. 4.5.1. Keywords
        1. 4.5.1.1. inherit
    6. 4.6. CSS2 Units
    7. 4.7. Summary
  7. 5. Fonts
    1. 5.1. Font Families
      1. 5.1.1. Using Generic Font Families
      2. 5.1.2. Specifying a Font Family
        1. 5.1.2.1. Using quotation marks
    2. 5.2. Font Weights
      1. 5.2.1. How Weights Work
      2. 5.2.2. Getting Bolder
      3. 5.2.3. Lightening Weights
    3. 5.3. Font Size
      1. 5.3.1. Absolute Sizes
      2. 5.3.2. Relative Sizes
      3. 5.3.3. Percentages and Sizes
      4. 5.3.4. Font Size and Inheritance
      5. 5.3.5. Using Length Units
    4. 5.4. Styles and Variants
      1. 5.4.1. Fonts with Style
      2. 5.4.2. Font Variations
    5. 5.5. Stretching and Adjusting Fonts
    6. 5.6. The font Property
      1. 5.6.1. Adding the Line Height
      2. 5.6.2. Using Shorthands Properly
      3. 5.6.3. Using System Fonts
    7. 5.7. Font Matching
      1. 5.7.1. Font-Face Rules
        1. 5.7.1.1. Font-name matching
        2. 5.7.1.2. Intelligent font matching
        3. 5.7.1.3. Font synthesis
        4. 5.7.1.4. Font download
    8. 5.8. Summary
  8. 6. Text Properties
    1. 6.1. Indentation and Horizontal Alignment
      1. 6.1.1. Indenting Text
      2. 6.1.2. Horizontal Alignment
    2. 6.2. Vertical Alignment
      1. 6.2.1. The Height of Lines
        1. 6.2.1.1. Constructing a line
        2. 6.2.1.2. Assigning values to line-height
        3. 6.2.1.3. Line height and inheritance
      2. 6.2.2. Vertically Aligning Text
        1. 6.2.2.1. Baseline alignment
        2. 6.2.2.2. Superscripting and subscripting
        3. 6.2.2.3. Bottom feeding
        4. 6.2.2.4. Getting on top
        5. 6.2.2.5. In the middle
        6. 6.2.2.6. Percentages
        7. 6.2.2.7. Length alignment
    3. 6.3. Word Spacing and Letter Spacing
      1. 6.3.1. Word Spacing
      2. 6.3.2. Letter Spacing
      3. 6.3.3. Spacing and Alignment
    4. 6.4. Text Transformation
    5. 6.5. Text Decoration
      1. 6.5.1. Weird Decorations
    6. 6.6. Text Shadows
      1. 6.6.1. Handling Whitespace
      2. 6.6.2. Text Direction
    7. 6.7. Summary
  9. 7. Basic Visual Formatting
    1. 7.1. Basic Boxes
      1. 7.1.1. The Containing Block
      2. 7.1.2. A Quick Refresher
    2. 7.2. Block-Level Elements
      1. 7.2.1. Horizontal Formatting
        1. 7.2.1.1. Horizontal properties
        2. 7.2.1.2. Using auto
        3. 7.2.1.3. More than one auto
        4. 7.2.1.4. Negative margins
        5. 7.2.1.5. Percentages
        6. 7.2.1.6. Replaced elements
      2. 7.2.2. Vertical Formatting
        1. 7.2.2.1. Vertical properties
        2. 7.2.2.2. Percentage heights
        3. 7.2.2.3. Auto heights
        4. 7.2.2.4. Collapsing vertical margins
        5. 7.2.2.5. Negative margins
      3. 7.2.3. List Items
    3. 7.3. Inline Elements
      1. 7.3.1. Line Layout
      2. 7.3.2. Basic Terms and Concepts
      3. 7.3.3. Inline Formatting
      4. 7.3.4. Inline Nonreplaced Elements
        1. 7.3.4.1. Building the boxes
        2. 7.3.4.2. Vertical alignment
        3. 7.3.4.3. Managing the line-height
        4. 7.3.4.4. Scaling line heights
        5. 7.3.4.5. Adding box properties
      5. 7.3.5. Inline Replaced Elements
        1. 7.3.5.1. Adding box properties
        2. 7.3.5.2. Replaced elements and the baseline
    4. 7.4. Altering Element Display
      1. 7.4.1. Changing Roles
      2. 7.4.2. Inline-Block Elements
      3. 7.4.3. Run-in Elements
        1. 7.4.3.1. Computed values
    5. 7.5. Summary
  10. 8. Padding, Borders, and Margins
    1. 8.1. Basic Element Boxes
      1. 8.1.1. Width and Height
      2. 8.1.2. Margins Versus Padding
    2. 8.2. Margins
      1. 8.2.1. Length Values and Margins
      2. 8.2.2. Percentages and Margins
      3. 8.2.3. Replicating Values
      4. 8.2.4. Single-Side Margin Properties
      5. 8.2.5. Negative and Collapsed Margins
      6. 8.2.6. Margins and Inline Elements
    3. 8.3. Borders
      1. 8.3.1. Borders and Backgrounds
      2. 8.3.2. Borders with Style
        1. 8.3.2.1. Multiple styles
        2. 8.3.2.2. Single-side styles
      3. 8.3.3. Border Widths
        1. 8.3.3.1. No border at all
      4. 8.3.4. Border Colors
        1. 8.3.4.1. Transparent borders
      5. 8.3.5. Shorthand Border Properties
      6. 8.3.6. Global Borders
      7. 8.3.7. Borders and Inline Elements
    4. 8.4. Padding
      1. 8.4.1. Percentage Values and Padding
      2. 8.4.2. Single-Side Padding
      3. 8.4.3. Padding and Inline Elements
      4. 8.4.4. Padding and Replaced Elements
    5. 8.5. Summary
  11. 9. Colors and Backgrounds
    1. 9.1. Colors
    2. 9.2. Foreground Colors
      1. 9.2.1. Replacing Attributes
      2. 9.2.2. Affecting Borders
      3. 9.2.3. Affecting Form Elements
      4. 9.2.4. Inheriting Color
    3. 9.3. Backgrounds
      1. 9.3.1. Background Color
        1. 9.3.1.1. Historical issues
        2. 9.3.1.2. Special effects
      2. 9.3.2. Background Images
        1. 9.3.2.1. Using an image
        2. 9.3.2.2. Why backgrounds aren’t inherited
        3. 9.3.2.3. Good background practices
      3. 9.3.3. Repeats with Direction
      4. 9.3.4. Background Positioning
        1. 9.3.4.1. Keywords
        2. 9.3.4.2. Percentage values
        3. 9.3.4.3. Length values
      5. 9.3.5. Repeats with Direction (Revisited)
      6. 9.3.6. Getting Attached
        1. 9.3.6.1. Interesting effects
      7. 9.3.7. Bringing It All Together
    4. 9.4. Summary
  12. 10. Floating and Positioning
    1. 10.1. Floating
      1. 10.1.1. Floated Elements
        1. 10.1.1.1. No floating at all
      2. 10.1.2. Floating: The Details
      3. 10.1.3. Applied Behavior
        1. 10.1.3.1. Negative margins
      4. 10.1.4. Floats, Content, and Overlapping
      5. 10.1.5. Clearing
    2. 10.2. Positioning
      1. 10.2.1. Basic Concepts
        1. 10.2.1.1. Types of positioning
        2. 10.2.1.2. The containing block
        3. 10.2.1.3. Offset properties
      2. 10.2.2. Width and Height
        1. 10.2.2.1. Setting width and height
        2. 10.2.2.2. Limiting width and height
      3. 10.2.3. Content Overflow and Clipping
        1. 10.2.3.1. Overflow
        2. 10.2.3.2. Content clipping
      4. 10.2.4. Element Visibility
      5. 10.2.5. Absolute Positioning
        1. 10.2.5.1. Containing blocks and absolutely positioned elements
        2. 10.2.5.2. Placement and sizing of absolutely positioned elements
        3. 10.2.5.3. Auto-edges
        4. 10.2.5.4. Placing and sizing nonreplaced elements
        5. 10.2.5.5. Placing and sizing replaced elements
        6. 10.2.5.6. Placement on the z-axis
      6. 10.2.6. Fixed Positioning
      7. 10.2.7. Relative Positioning
    3. 10.3. Summary
  13. 11. Table Layout
    1. 11.1. Table Formatting
      1. 11.1.1. Visually Arranging a Table
        1. 11.1.1.1. Table arrangement rules
      2. 11.1.2. Table Display Values
        1. 11.1.2.1. Row primacy
        2. 11.1.2.2. Columns
      3. 11.1.3. Anonymous Table Objects
        1. 11.1.3.1. Object insertion rules
      4. 11.1.4. Table Layers
      5. 11.1.5. Captions
    2. 11.2. Table Cell Borders
      1. 11.2.1. Separated Cell Borders
        1. 11.2.1.1. Border spacing
        2. 11.2.1.2. Handling empty cells
      2. 11.2.2. Collapsing Cell Borders
        1. 11.2.2.1. Collapsing border layout
        2. 11.2.2.2. Border collapsing
    3. 11.3. Table Sizing
      1. 11.3.1. Width
        1. 11.3.1.1. Fixed layout
        2. 11.3.1.2. Automatic layout
      2. 11.3.2. Height
      3. 11.3.3. Alignment
    4. 11.4. Summary
  14. 12. Lists and Generated Content
    1. 12.1. Lists
      1. 12.1.1. Types of Lists
      2. 12.1.2. List Item Images
      3. 12.1.3. List-Marker Positions
      4. 12.1.4. List Styles in Shorthand
      5. 12.1.5. List Layout
    2. 12.2. Generated Content
      1. 12.2.1. Inserting Generated Content
      2. 12.2.2. Specifying Content
        1. 12.2.2.1. Inserting attribute values
        2. 12.2.2.2. Generated quotes
      3. 12.2.3. Counters
        1. 12.2.3.1. Resetting and incrementing
        2. 12.2.3.2. Using counters
        3. 12.2.3.3. Counters and scope
    3. 12.3. Summary
  15. 13. User Interface Styles
    1. 13.1. System Fonts and Colors
      1. 13.1.1. System Fonts
      2. 13.1.2. System Colors
    2. 13.2. Cursors
      1. 13.2.1. Changing the Cursor
        1. 13.2.1.1. Pointing and selection cursors
        2. 13.2.1.2. Movement cursors
        3. 13.2.1.3. Waiting and progressing
        4. 13.2.1.4. Providing help
        5. 13.2.1.5. Graphic cursors
    3. 13.3. Outlines
      1. 13.3.1. Setting an Outline’s Style
      2. 13.3.2. Outline Width
      3. 13.3.3. Coloring an Outline
      4. 13.3.4. Bringing It All Together
    4. 13.4. Summary
  16. 14. Non-Screen Media
    1. 14.1. Designating Medium-Specific Style Sheets
    2. 14.2. Paged Media
      1. 14.2.1. Print Styles
        1. 14.2.1.1. Differences between screen and print
        2. 14.2.1.2. Defining the page size
        3. 14.2.1.3. Selecting page types
        4. 14.2.1.4. Page breaking
        5. 14.2.1.5. Orphans and widows
        6. 14.2.1.6. Page-breaking behavior
        7. 14.2.1.7. Repeated elements
        8. 14.2.1.8. Elements outside the page
      2. 14.2.2. Projection Styles
        1. 14.2.2.1. Setting up slides
        2. 14.2.2.2. Positioning elements
        3. 14.2.2.3. Considerations for projection
    3. 14.3. Aural Styles
      1. 14.3.1. Speaking
        1. 14.3.1.1. Punctuation and numbers
        2. 14.3.1.2. Speaking table headers
        3. 14.3.1.3. Speech rate
      2. 14.3.2. Volume
      3. 14.3.3. Giving Voice
      4. 14.3.4. Altering the Voice
        1. 14.3.4.1. Changing the pitch
        2. 14.3.4.2. Stress and richness
      5. 14.3.5. Pauses and Cues
        1. 14.3.5.1. Pauses
        2. 14.3.5.2. Cues
        3. 14.3.5.3. Pauses, cues, and generated content
      6. 14.3.6. Background Sounds
      7. 14.3.7. Positioning Sounds
        1. 14.3.7.1. Combining azimuth with elevation
    4. 14.4. Summary
  17. A. Property Reference
    1. A.1. Visual Media
      1. A.1.1. background
      2. A.1.2. background-attachment
      3. A.1.3. background-color
      4. A.1.4. background-image
      5. A.1.5. background-position
      6. A.1.6. background-repeat
      7. A.1.7. border
      8. A.1.8. border-bottom
      9. A.1.9. border-bottom-color
      10. A.1.10. border-bottom-style
      11. A.1.11. border-bottom-width
      12. A.1.12. border-color
      13. A.1.13. border-left
      14. A.1.14. border-left-color
      15. A.1.15. border-left-style
      16. A.1.16. border-left-width
      17. A.1.17. border-right
      18. A.1.18. border-right-color
      19. A.1.19. border-right-style
      20. A.1.20. border-right-width
      21. A.1.21. border-style
      22. A.1.22. border-top
      23. A.1.23. border-top-color
      24. A.1.24. border-top-style
      25. A.1.25. border-top-width
      26. A.1.26. border-width
      27. A.1.27. bottom
      28. A.1.28. clear
      29. A.1.29. clip
      30. A.1.30. color
      31. A.1.31. content
      32. A.1.32. counter-increment
      33. A.1.33. counter-reset
      34. A.1.34. cursor
      35. A.1.35. direction
      36. A.1.36. display
      37. A.1.37. float
      38. A.1.38. font
      39. A.1.39. font-family
      40. A.1.40. font-size
      41. A.1.41. font-style
      42. A.1.42. font-variant
      43. A.1.43. font-weight
      44. A.1.44. height
      45. A.1.45. left
      46. A.1.46. letter-spacing
      47. A.1.47. line-height
      48. A.1.48. list-style
      49. A.1.49. list-style-image
      50. A.1.50. list-style-position
      51. A.1.51. list-style-type
      52. A.1.52. margin
      53. A.1.53. margin-bottom
      54. A.1.54. margin-left
      55. A.1.55. margin-right
      56. A.1.56. margin-top
      57. A.1.57. max-height
      58. A.1.58. max-width
      59. A.1.59. min-height
      60. A.1.60. min-width
      61. A.1.61. outline
      62. A.1.62. outline-color
      63. A.1.63. outline-style
      64. A.1.64. outline-width
      65. A.1.65. overflow
      66. A.1.66. padding
      67. A.1.67. padding-bottom
      68. A.1.68. padding-left
      69. A.1.69. padding-right
      70. A.1.70. padding-top
      71. A.1.71. position
      72. A.1.72. quotes
      73. A.1.73. right
      74. A.1.74. text-align
      75. A.1.75. text-decoration
      76. A.1.76. text-indent
      77. A.1.77. text-transform
      78. A.1.78. top
      79. A.1.79. unicode-bidi
      80. A.1.80. vertical-align
      81. A.1.81. visibility
      82. A.1.82. white-space
      83. A.1.83. width
      84. A.1.84. word-spacing
      85. A.1.85. z-index
    2. A.2. Tables
      1. A.2.1. border-collapse
      2. A.2.2. border-spacing
      3. A.2.3. caption-side
      4. A.2.4. empty-cells
      5. A.2.5. table-layout
    3. A.3. Paged Media
      1. A.3.1. orphans
      2. A.3.2. page-break-after
      3. A.3.3. page-break-before
      4. A.3.4. page-break-inside
      5. A.3.5. widows
    4. A.4. Dropped from CSS2.1
    5. A.5. Visual Styles
      1. A.5.1. font-size-adjust
      2. A.5.2. font-stretch
      3. A.5.3. marker-offset
      4. A.5.4. text-shadow
    6. A.6. Paged Media
      1. A.6.1. marks
      2. A.6.2. page
      3. A.6.3. size
    7. A.7. Aural Styles
      1. A.7.1. azimuth
      2. A.7.2. cue
      3. A.7.3. cue-after
      4. A.7.4. cue-before
      5. A.7.5. elevation
      6. A.7.6. pause
      7. A.7.7. pause-after
      8. A.7.8. pause-before
      9. A.7.9. pitch
      10. A.7.10. pitch-range
      11. A.7.11. play-during
      12. A.7.12. richness
      13. A.7.13. speak
      14. A.7.14. speak-header
      15. A.7.15. speak-numeral
      16. A.7.16. speak-punctuation
      17. A.7.17. speech-rate
      18. A.7.18. stress
      19. A.7.19. voice-family
      20. A.7.20. volume
  18. B. Selector, Pseudo-Class, and Pseudo-Element Reference
    1. B.1. Selectors
      1. B.1.1. Universal Selector
      2. B.1.2. Type Selector
      3. B.1.3. Descendant Selector
      4. B.1.4. Child Selector
      5. B.1.5. Adjacent Sibling Selector
      6. B.1.6. Class Selector
      7. B.1.7. ID Selector
      8. B.1.8. Simple Attribute Selector
      9. B.1.9. Exact Attribute Value Selector
      10. B.1.10. Partial Attribute Value Selector
      11. B.1.11. Beginning Substring Attribute Value Selector
      12. B.1.12. Ending Substring Attribute Value Selector
      13. B.1.13. Arbitrary Substring Attribute Value Selector
      14. B.1.14. Language Attribute Selector
    2. B.2. Pseudo-Classes and Pseudo-Elements
      1. B.2.1. :active
      2. B.2.2. :after
      3. B.2.3. :before
      4. B.2.4. :first-child
      5. B.2.5. :first-letter
      6. B.2.6. :first-line
      7. B.2.7. :focus
      8. B.2.8. :hover
      9. B.2.9. :lang
      10. B.2.10. :link
      11. B.2.11. :visited
  19. C. Sample HTML 4 Style Sheet
  20. Index
  21. About the Author
  22. Colophon
  23. Copyright

Product information

  • Title: CSS: The Definitive Guide, 3rd Edition
  • Author(s): Eric A. Meyer
  • Release date: November 2006
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596527334