Cover image for CSS Cookbook, Second Edition

Book description

As the industry standard method for enriching the presentation of HTML-based web pages, Cascading Style Sheets (CSS) allow you to give web pages more structure and a more sophisticated look. But first, you have to get past CSS theory and resolve real-world problems.

For those all-too-common dilemmas that crop up with each project, CSS Cookbook provides hundreds of practical examples with CSS code recipes that you can use immediately to format your web pages. Arranged in a quick-lookup format for easy reference, the second edition has been updated to explain the unique behavior of the latest browsers: Microsoft's IE 7 and Mozilla's Firefox 1.5. Also, the book has been expanded to cover the interaction of CSS and images and now includes more recipes for beginning CSS users. The explanation that accompanies each recipe enables you to customize the formatting for your specific needs. With topics that range from basic web typography and page layout to techniques for formatting lists, forms, and tables, this book is a must-have companion, regardless of your experience with Cascading Style Sheets.

Table of Contents

  1. CSS Cookbook
  2. A Note Regarding Supplemental Files
  3. Dedication
  4. Preface
    1. Audience
    2. Assumptions This Book Makes
    3. Contents of This Book
    4. Conventions Used in This Book
    5. Using Code Examples
    6. How to Contact Us
    7. Safari Enabled
    8. Acknowledgments
  5. 1. General
    1. Introduction
    2. Using CSS with HTML
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    3. Using Different Selectors to Apply Styles
      1. Problem
      2. Solution
      3. Discussion
        1. Type selectors
        2. Class selectors
        3. ID selectors
        4. Descendant selectors
        5. Child selectors
        6. Universal selectors
        7. Adjacent sibling selectors
        8. Attribute selectors
        9. Pseudo-classes
        10. Pseudo-elements
      4. See Also
    4. Determining When to Use Class and ID Selectors
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    5. Understanding CSS Properties
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    6. Understanding the Box Model
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    7. Understanding DOCTYPES and Effects on Browser Layout
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    8. Associating Styles to a Web Page
      1. Problem
      2. Solution
      3. Discussion
        1. When to use inline styles
        2. When to use internal style sheets
      4. See Also
    9. How to Use Different Types of Style Sheets
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    10. Adding Comments Within CSS
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    11. Organizing the Contents of a Style Sheet
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    12. Organizing Style Sheet Files
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    13. Working with Shorthand Properties
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    14. Setting up an Alternate Style Sheet
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    15. Using Floats with Images
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    16. Using Absolute Positioning
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    17. Using Relative Positioning
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    18. Using CSS in Adobe Dreamweaver
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    19. Using CSS in Microsoft Expression Web Designer
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
  6. 2. Web Typography
    1. Introduction
    2. Specifying Fonts
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    3. Specifying Font Measurements and Sizes
      1. Problem
      2. Solution
      3. Discussion
        1. Length units
        2. Relative units
        3. Setting the size of fonts to zero or a negative value
      4. See Also
    4. Gaining More Control over Font Sizes
      1. Problem
      2. Solution
      3. Discussion
        1. Using pixels
        2. Accessibility and web typography
        3. Using font keywords
        4. Using em units to control type
      4. See Also
    5. Enforcing Font Sizes
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    6. Centering Text
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    7. Setting Text to Be Justified
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    8. Removing Space Between Headings and Paragraphs
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    9. Setting a Simple Initial Cap
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    10. Setting a Larger, Centered Initial Cap
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    11. Setting an Initial Cap with Decoration (Imagery)
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    12. Creating a Heading with Stylized Text
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    13. Creating a Heading with Stylized Text and Borders
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    14. Stylizing a Heading with Text and an Image
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    15. Creating a Pull Quote with HTML Text
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    16. Creating a Pull Quote with Borders
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    17. Creating a Pull Quote with Images
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    18. Setting the Indent in the First Line of a Paragraph
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    19. Setting the Indent of Entire Paragraphs
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    20. Creating a Hanging Indent
      1. Problem
      2. Solution
      3. Discussion
        1. Hanging indents safely
        2. The paired hanging indent
      4. See Also
    21. Styling the First Line of a Paragraph
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    22. Styling the First Line of a Paragraph with an Image
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    23. Creating a Highlighted Text Effect
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    24. Changing Line Spacing
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    25. Adding a Graphic Treatment to HTML Text
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    26. Placing Shadow Behind Text
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    27. Adjusting the Spacing Between Letters and Words
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
  7. 3. Images
    1. Introduction
    2. Placing a Border Around an Image
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    3. Removing Borders Set on Images by Default in Some Browsers
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    4. Setting a Background Image
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    5. Creating a Line of Background Images
      1. Problem
      2. Solution
      3. See Also
    6. Placing a Background Image on a Web Page
      1. Solution
      2. Discussion
      3. See Also
    7. Using Multiple Background Images on One Selector
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    8. Creating a Stationary Background Image
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    9. Overlaying HTML Text on an Image
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    10. Replacing HTML Text with an Image
      1. Problem
      2. Solution
      3. Discussion
        1. Origin of the image replacement method
        2. Problem with the FIR method
        3. Phark image replacement method
        4. CSS 3 approach to image replacement
      4. See Also
    11. Replacing HTML Text with Flash Text
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    12. Using Multiple PNGs with Transparency
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    13. Building a Panoramic Image Presentation
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    14. Combining Different Image Formats
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    15. Rounding Corners with Fixed-Width Columns
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    16. Rounding Corners (Sliding Doors Technique)
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    17. Rounding Corners (Mountaintop Technique)
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    18. Rounding Corners with JavaScript
      1. Problem
      2. Solution
      3. Discussion
        1. Different colors
        2. Different sizes
        3. Different elements
        4. Specific corners
      4. See Also
    19. Placing a Drop Shadow Behind an Image
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    20. Placing a Smooth Drop Shadow Behind an Image
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    21. Making Images Scalable
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    22. Making Word Balloons
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    23. Hindering People from Stealing Your Images
      1. Problem
      2. Solution
      3. Discussion
        1. Microsoft’s Image toolbar
        2. No images are safe
      4. See Also
    24. Inserting Reflections on Images Automatically
      1. Problem
      2. Solution
      3. Discussion
        1. Customization features
        2. Known browser issues
      4. See Also
    25. Using Image Sprites
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
  8. 4. Page Elements
    1. Introduction
    2. Eliminating Page Margins
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    3. Coloring the Scrollbar
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    4. Techniques for Centering Elements on a Web Page
      1. Problem
      2. Solution
      3. Discussion
        1. Tables
        2. Images
        3. Vertical centering
      4. See Also
    5. Placing a Page Border
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    6. Customizing a Horizontal Rule
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    7. Adding a Lightbox
      1. Problem
      2. Solution
      3. Discussion
        1. Setting up the files
        2. Making a slideshow
        3. Known browser issues
      4. See Also
  9. 5. Lists
    1. Introduction
    2. Changing the Format of a List
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    3. Writing Cross-Browser Indentation in Lists
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    4. Place Dividers Between List Items
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    5. Creating Custom Text Markers for Lists
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    6. Creating Custom Image Markers for Lists
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    7. Inserting Large Custom Image Markers for Lists
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    8. Making a List Presentation Rich with Imagery
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    9. Creating Inline Lists
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    10. Making Hanging Indents in a List
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    11. Moving the Marker Inside the List
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
  10. 6. Links and Navigation
    1. Introduction
    2. Removing Underlines from Links (and Adding Other Decorations)
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    3. Changing Link Colors
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    4. Changing Link Colors in Different Sections of a Page
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    5. Placing an Icon at the End of the Link
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    6. Changing Cursors
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    7. Creating Rollovers Without JavaScript
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    8. Creating Text Navigation Menus and Rollovers
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    9. Building Horizontal Navigation Menus
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    10. Building a Navigation Menu with Access Keys
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    11. Creating Breadcrumb Navigation
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    12. Creating Image-Based Rollovers
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    13. Creating Collapsible Menus
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    14. Creating Contextual Menus
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    15. Making Tool Tips with the Title Attribute
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    16. Designing a Dynamic Visual Menu
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    17. Apply Styles Dynamically to a Web Page
      1. Problem
      2. Solution
      3. Discussion
        1. Pure CSS collapsible menus
      4. See Also
  11. 7. Forms
    1. Introduction
    2. Modifying the Spacing Around a Form
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    3. Setting Styles for Input Elements
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    4. Applying Different Styles to Different Input Elements in the Same Form
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    5. Setting Styles for textarea Elements
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    6. Setting Styles for Select and Option Elements
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    7. Creating a Macintosh-Styled Search Field
      1. Problem
      2. Solution
      3. Discussion
        1. Search field attributes
        2. Best practices
      4. See Also
    8. Styling Form Buttons
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    9. Creating an Image Submit Button
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    10. Setting Up a Submit-Once-Only Button
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    11. Creating a Submit Button That Looks Like HTML Text
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    12. Making an HTML Text Link Operate Like a Submit Button
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    13. Designing a Web Form Without Tables
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    14. Designing a Two Column Form Without Tables
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    15. Highlighting Form Fields
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    16. Integrating Form Feedback with a Form
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    17. Styling Access Keys in Web Forms
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    18. Grouping Common Form Elements
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    19. Entering Data into a Form Like a Spreadsheet
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    20. Sample Design: A Login Form
    21. Sample Design: A Registration Form
  12. 8. Tables
    1. Introduction
    2. Setting the Cell Spacing
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    3. Setting the Borders and Cell Padding
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    4. Setting the Style for Caption
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    5. Setting the Styles Within Table Cells
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    6. Setting Styles for Table Header Elements
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    7. Removing Gaps from Images Placed in Table Cells
      1. Problem
      2. Solution
      3. Discussion
        1. Using Document Type Definitions
      4. See Also
    8. Eliminating Gaps Between Table Cells
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    9. Creating Alternating Background Colors in Table Rows
      1. Problem
      2. Solution
      3. Discussion
        1. Using JavaScript
        2. Using server-side solutions
      4. See Also
    10. Adding a Highlighting Effect on a Table Row
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    11. Sample Design: An Elegant Calendar
  13. 9. Page Layouts
    1. Introduction
    2. Building a One-Column Layout
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    3. Building a Two-Column Layout
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    4. Building a Two-Column Layout with Fixed-Width Columns
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    5. Creating a Flexible Multicolumn Layout with Floats
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    6. Creating a Fixed-Width Multicolumn Layout with Floats
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    7. Creating a Flexible Multicolumn Layout with Positioning
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    8. Creating a Fixed-Width Multicolumn Layout with Positioning
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    9. Using Floats to Display Columns in Any Order
      1. Problem
      2. Solution
      3. Discussion
        1. The markup
        2. Defining the columns
        3. Creating whitespace
        4. Adjusting the order of columns
        5. Page layout algorithm
        6. Faking columns
        7. An alternative solution
      4. See Also
    10. Designing an Asymmetric Layout
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
  14. 10. Print
    1. Introduction
    2. Creating a Printer-Friendly Page
      1. Problem
      2. Solution
      3. Discussion
        1. Using @import when assigning media types
        2. Using @media when assigning media types
      4. See Also
    3. Making a Web Form Print-Ready
      1. Problem
      2. Solution
      3. Discussion
        1. Using attribute selectors to differentiate form elements
        2. Adding user friendliness
      4. See Also
    4. Displaying URIs After Links
      1. Problem
      2. Solution
      3. Discussion
        1. Placing the domain name before absolute links
      4. See Also
    5. Inserting Special Characters Before Links
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    6. Sample Design: A Printer-Friendly Page with CSS
      1. Setting the Page for Black-and-White Printing
      2. Designing the Main Heading
      3. Styling the Article Header and Byline
      4. Gaining Attention Through the Teaser
      5. Displaying URIs After Links
      6. Finishing with the Footer
  15. 11. Hacks, Workarounds, and Troubleshooting
    1. Introduction
    2. Isolating Styles for Netscape Navigator 4.x
      1. Problem
      2. Solution
      3. Discussion
        1. Caio hack
        2. @media workaround
        3. Descendant selectors
      4. See Also
    3. Delivering Specific Styles to Internet Explorer 5.x for Windows
      1. Problem
      2. Solution
      3. Discussion
        1. Star HTML hack
        2. Another approach: Tantek’s box model hack
      4. See Also
    4. Removing Web Page Flicker in Internet Explorer 5.x for Windows
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    5. Keeping Background Images Stationary in Internet Explorer 6 for Windows
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    6. Using Internet Explorer for Windows’ Conditional Comments to Deliver Styles
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    7. Keeping CSS Rules from Internet Explorer 5 for Macintosh
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    8. Setting Up an Intelligent Hack Management System
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    9. Diagnosing CSS Bugs and Browser Issues
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    10. Testing a Site Design on More Than One Platform with Only One Computer
      1. Problem
        1. Solution
        2. If you own a PC
        3. If you own a Macintosh
        4. If you own a Linux Workstation
      2. Discussion
      3. See Also
    11. Installing More Than One Version of Internet Explorer for Windows on a Computer
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    12. Testing a Web Site with a Text Browser
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
  16. 12. Designing with CSS
    1. Introduction
    2. Enlarging Text Excessively
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    3. Creating Unexpected Incongruity
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    4. Combining Unlike Elements to Create Contrast
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    5. Leading the Eye with Contrast
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    6. Checking for Enough Color Contrast
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
    7. Emphasizing a Quotation
      1. Problem
      2. Solution
      3. Discussion
      4. See Also
  17. A. Resources
    1. General HTML and CSS Instruction
      1. Dave Shea’s Roadmap to Standards Essay
      2. Web Page for Designers’ CSS Tutorial
      3. Community MX’s Basics of CSS Positioning
      4. CSS Float Property Tutorial
      5. CSS Selectors Tutorial
    2. Design Resources
      1. A List Apart: CSS Topics
      2. BlueRobot.com Layout Reservoir
      3. CSS-Edge
      4. CSS Zen Garden
      5. Glish.com CSS Layout Techniques
      6. Microformats
      7. Real World Style
      8. SimpleQuizes
      9. Typetester
    3. Discussion Groups
      1. Babble List
      2. css-discuss
      3. Usenet Stylesheets Newsgroup
      4. www-style (W3C Style Mailing List)
    4. References
      1. CSS Browser Support Charts
      2. W3C’s Recommended DTDs
      3. W3C’s CSS Page
      4. CSS 2.1 Specification
      5. HTML 4.01 Specification
      6. XHTML 1.0 Specification
    5. Tools
      1. BrowserCam
      2. iCapture
      3. SelectORacle
      4. W3C CSS Validator
      5. W3C HTML Validator
      6. Web Developer Browser Extension
      7. Xyle Scope
  18. B. CSS 2.1 Properties and Proprietary Extensions
  19. C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements
  20. D. Styling of Form Elements
    1. Checkboxes
    2. File Input
    3. Radio Buttons
    4. Text Fields
    5. Multiple Options
    6. Select Element
    7. Submit Button
    8. Textarea Element
  21. Index
  22. Colophon
  23. Copyright