Cover image for Cascading Style Sheets: The Definitive Guide

Book description

Cascading Style Sheets (CSS) is poised to make its mark on the Web. With good implementations in Internet Explorer 5.0 and Opera 3.6, and 100% support expected in Netscape's "Mozilla" browser, signs are that CSS is rapidly becoming a useful, reliable, and powerful tool for web authors. CSS is the W3C-approved method for enriching the visual presentation of web pages. Cascading Style Sheets: The Definitive Guide offers a complete, detailed review of CSS1 and CSS positioning, as well as an overview of CSS2. Each property is explored in detail with a discussion of how each interacts with other properties. There is also information on how to avoid common mistakes in interpretation. This book is the first major title to cover CSS in a way that both acknowledges and describes current browser support, instead of simply describing the way things work in theory. It offers both web authors and scripters a comprehensive guide to using CSS effectively. Cascading Style Sheets: The Definitive Guide targets veteran web authors who have already invested thousands of hours in learning HTML and writing web pages and are wondering why they need to learn a brand new language of style. This book supplies those dubious but curious web authors with the information they need to easily implement CSS for their web site. This book also addresses an audience of novice web authors who are already straining to learn all of the tags and attributes of HTML and can benefit now from implementing CSS correctly instead of repeating the mistakes of the past. The author has extensive experience writing about pitfalls and interesting tricks in CSS. He is a member of the CSS&FP Working Group, coordinates the W3C's CSS1 Test Suite, remains active on CSS newsgroups, and edits Web Review's Style Sheets Reference Guide. He has built a widespread reputation as a CSS expert, particularly with regard to his understanding of the intricacies of browser support for CSS. He brings his knowledge and expertise to this book in the form of hints, workarounds, and many other tips for web authors.

Table of Contents

  1. Cascading Style Sheets: The Definitive Guide
    1. Preface
      1. Typographical Conventions
      2. Property Conventions
      3. How to Contact Us
      4. Acknowledgments
    2. 1. HTML and CSS
      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. Limitations of CSS
        1. Limited Initial Scope
        2. Implementations
      4. Bringing CSS and HTML Together
        1. The LINK Tag
          1. LINK attributes
          2. Alternate style sheets
        2. The STYLE Element
        3. The @import Directive
        4. Actual Styles
        5. CSS Comments
        6. Inline Styles
      5. Summary
    3. 2. Selectors and Structure
      1. Basic Rules
        1. Rule Structure
        2. Simple Selectors
        3. Declarations
      2. Grouping
        1. Grouping Selectors
        2. Grouping Declarations
        3. Grouping Everything
      3. Class and ID Selectors
        1. Class Selectors
        2. ID Selectors
        3. Class? ID? What’s the Difference?
      4. Pseudo-Classes and Pseudo-Elements
        1. Pseudo-Class Selectors
          1. Real-world issues
        2. Pseudo-Element Selectors
        3. Restrictions on Pseudo-Class and Pseudo-Element Selectors
      5. Structure
        1. Contextual Selectors
      6. Inheritance
        1. Limitations of Inheritance
      7. Specificity
        1. Inheritance and Specificity
        2. Importance
      8. The Cascade
      9. Classification of Elements
        1. Why Does the display Property Exist?
      10. Summary
    4. 3. Units and Values
      1. Colors
        1. Named Colors
        2. Colors by RGB
          1. Percentage colors
          2. Going by numbers
          3. Hexadecimal colors
          4. Short hexadecimal colors
          5. Bringing the colors together
          6. Web-safe colors
      2. 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. What to do?
      3. Percentage Values
      4. URLs
      5. CSS2 Units
      6. Summary
    5. 4. Text Properties
      1. Manipulating Text
        1. Indentation and Horizontal Alignment
          1. Indenting text
          2. Aligning text
          3. Handling whitespace
        2. The Height of Lines
          1. Real-world issues
        3. Vertical Alignment
          1. Baseline alignment
          2. Superscripting and subscripting
          3. Bottom feeding
          4. Getting on top
          5. In the middle
          6. Percentages
          7. Combined alignment
        4. Word Spacing and Letterspacing
          1. Word spacing
          2. Letterspacing
          3. Spacing, alignment, and font size
        5. Text Transformation
        6. Text Decoration
          1. Weird decorations
      2. Summary
    6. 5. Fonts
      1. Font Families
        1. Using Generic Font Families
        2. Specifying Actual Font Names
        3. Using Quotation Marks
        4. Good Practices
      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. Using Shorthand: The font Property
        1. Adding the Line Height
      6. Font Matching
      7. Summary
    7. 6. Colors and Backgrounds
      1. Colors
        1. Foreground Colors
          1. BODY attributes
          2. Affecting borders
          3. Inheriting color
          4. Affecting form elements
        2. Background Color
          1. Real-world issues
        3. Special Effects
        4. Good Practices
      2. Complex Backgrounds
        1. Background Images
          1. Good background practices
        2. Repeats with Direction
          1. Real-world uses
        3. Background Positioning
          1. Keywords
          2. Percentage values
          3. Length values
        4. Repeats with Direction (Revisited)
          1. Repeating: Real-world issues
        5. Getting Attached
          1. Interesting effects
        6. Bringing It All Together
      3. Summary
    8. 7. Boxes and Borders
      1. Basic Element Boxes
      2. Margins or Padding?
      3. Margins
        1. Length Values and Margins
        2. Percentages and Margins
        3. Replicating Values
        4. Single-Side Margin Properties
        5. Collapsing Margins
        6. Negative Margin Values
        7. Margins and Inline Elements
        8. Margins: Known Issues
      4. Borders
        1. Borders with Style
          1. Multiple styles
          2. Falling back on solid
        2. Border Widths
          1. No border at all
        3. Border Colors
        4. Shorthand Border Properties
          1. Setting borders as quickly as possible
        5. Borders and Inline Elements
        6. Borders: Known Issues
      5. Padding
        1. Percentage Values and Padding
        2. Single-Side Padding
        3. Padding and Inline Elements
        4. Padding: Known Issues
      6. Floating and Clearing
        1. Floated Elements
          1. Backgrounds and floats
          2. Negative margins and floating
          3. No floating at all
        2. Clear
      7. Lists
        1. Types of Lists
        2. List Item Images
        3. List Item Positions
        4. List Styles In Shorthand
      8. Summary
    9. 8. Visual Formatting
      1. Basic Boxes
      2. Block-Level Elements
        1. Vertical Formatting
          1. Height
          2. Collapsing vertical margins
        2. Horizontal Formatting
          1. Horizontal properties
          2. Using auto
          3. More than one auto
          4. Negative margins
        3. List Items
        4. Block-Level Replaced Elements
      3. Floated Elements
        1. Floating: The Details
        2. Applied Behavior
          1. Negative margins
      4. Inline Elements
        1. Line Layout
        2. Inline Formatting
          1. Generating a line box
          2. Adding box properties
        3. Managing the Line Height of Inline Elements
          1. Scaling the line heights
        4. Inline Replaced Elements
          1. Adding box properties
      5. Summary
    10. 9. Positioning
      1. General Concepts
        1. Positioning Schemes
        2. Side Offsets
        3. Width and Height
          1. Setting width and height
          2. Limiting width and height
        4. Content Overflow and Clipping
          1. Overflow
          2. Overflow clipping
          3. Element clipping
        5. Element Visibility
      2. Relative Positioning
      3. Absolute Positioning
      4. Fixed Positioning
      5. Stacking Positioned Elements
      6. Summary
    11. 10. CSS2: A Look Ahead
      1. Changes from CSS1
        1. Additions and Changes to the display Property
        2. More Inheritance
      2. CSS2 Selectors
        1. Basic Selectors
          1. Universal selector
          2. Child selector
          3. Adjacent-sibling selector
        2. Attribute Selectors
          1. Attribute matching
          2. Value matching
          3. Matching single attribute values
          4. Simulating class and ID
          5. Matching hyphenated values
        3. More Pseudo-Classes and Pseudo-Elements
          1. :hover
          2. :focus
          3. :lang
          4. :first-child
          5. Miscellaneous pseudo-elements and pseudo-classes
      3. Fonts and Text
        1. New Font Properties
        2. text-shadow
      4. Generated Content
        1. Automatic Numbering
        2. Markers
      5. Adapting to the Environment
        1. Cursors
        2. Colors
        3. Outlines
      6. Borders
      7. Tables
      8. Media Types and @-rules
        1. Paged Media
        2. The Spoken Word
      9. Summary
    12. 11. CSS in Action
      1. Conversion Projects
        1. Case 1: Consistent Look and Feel
        2. Case 2: Library Catalog System Interface
        3. Case 3: Putting a Magazine Article Online
          1. Cleaning up
      2. Tips & Tricks
        1. Making Styles Work
        2. Hiding Styles with @import
        3. Fighting Margin Problems with @import
        4. Styling Common Elements
        5. Getting Full Content Backgrounds in Navigator
        6. The Incredible Shrinking Text!
        7. Preserving Boldness
        8. Floating Text Elements in Internet Explorer
        9. Drop Caps With and Without :first-letter
        10. Disappearing Styles
        11. Serving CSS Up Correctly
    13. A. CSS Resources
      1. General Information
        1. CSS Recommendations
        2. W3C CSS Activity Page
        3. W3C CSS Test Suite
        4. Error Checkers
          1. W3C CSS Validator
          2. WDG CSScheck
      2. Tips, Pointers, and Other Practical Advice
        1. Style Sheets Reference Guide (SSRG)
        2. CSS Pointers Group (CPG)
        3. WSP CSS Samurai Reports
          1. Agitprop
      3. Online Communities
        1. comp.infosystems.www.authoring.stylesheets
        2. www-style@w3.org
      4. Bug Reporting
    14. B. HTML 2.0 Style Sheet
    15. C. CSS1 Properties
      1. :active
      2. :first-letter
      3. :first-line
      4. !important
      5. :link
      6. :visited
      7. background
      8. background-attachment
      9. background-color
      10. background-image
      11. background-position
      12. background-repeat
      13. border
      14. border-bottom
      15. border-bottom-width
      16. border-color
      17. border-left
      18. border-left-width
      19. border-right
      20. border-right-width
      21. border-style
      22. border-top
      23. border-top-width
      24. border-width
      25. clear
      26. color
      27. display
      28. float
      29. font
      30. font-family
      31. font-size
      32. font-style
      33. font-variant
      34. font-weight
      35. height
      36. letter-spacing
      37. line-height
      38. list-style
      39. list-style-image
      40. list-style-position
      41. list-style-type
      42. margin
      43. margin-bottom
      44. margin-left
      45. margin-right
      46. margin-top
      47. padding
      48. padding-bottom
      49. padding-left
      50. padding-right
      51. padding-top
      52. text-align
      53. text-decoration
      54. text-indent
      55. text-transform
      56. vertical-align
      57. white-space
      58. width
      59. word-spacing
    16. D. CSS Support Chart
      1. Notes
    17. Index
    18. Colophon