O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

CSS Cookbook, 2nd 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. A Note Regarding Supplemental Files
  2. Dedication
  3. 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
  4. 1. General
    1. Introduction
    2. Using CSS with HTML
    3. Using Different Selectors to Apply Styles
    4. Determining When to Use Class and ID Selectors
    5. Understanding CSS Properties
    6. Understanding the Box Model
    7. Understanding DOCTYPES and Effects on Browser Layout
    8. Associating Styles to a Web Page
    9. How to Use Different Types of Style Sheets
    10. Adding Comments Within CSS
    11. Organizing the Contents of a Style Sheet
    12. Organizing Style Sheet Files
    13. Working with Shorthand Properties
    14. Setting up an Alternate Style Sheet
    15. Using Floats with Images
    16. Using Absolute Positioning
    17. Using Relative Positioning
    18. Using CSS in Adobe Dreamweaver
    19. Using CSS in Microsoft Expression Web Designer
  5. 2. Web Typography
    1. Introduction
    2. Specifying Fonts
    3. Specifying Font Measurements and Sizes
    4. Gaining More Control over Font Sizes
    5. Enforcing Font Sizes
    6. Centering Text
    7. Setting Text to Be Justified
    8. Removing Space Between Headings and Paragraphs
    9. Setting a Simple Initial Cap
    10. Setting a Larger, Centered Initial Cap
    11. Setting an Initial Cap with Decoration (Imagery)
    12. Creating a Heading with Stylized Text
    13. Creating a Heading with Stylized Text and Borders
    14. Stylizing a Heading with Text and an Image
    15. Creating a Pull Quote with HTML Text
    16. Creating a Pull Quote with Borders
    17. Creating a Pull Quote with Images
    18. Setting the Indent in the First Line of a Paragraph
    19. Setting the Indent of Entire Paragraphs
    20. Creating a Hanging Indent
    21. Styling the First Line of a Paragraph
    22. Styling the First Line of a Paragraph with an Image
    23. Creating a Highlighted Text Effect
    24. Changing Line Spacing
    25. Adding a Graphic Treatment to HTML Text
    26. Placing Shadow Behind Text
    27. Adjusting the Spacing Between Letters and Words
  6. 3. Images
    1. Introduction
    2. Placing a Border Around an Image
    3. Removing Borders Set on Images by Default in Some Browsers
    4. Setting a Background Image
    5. Creating a Line of Background Images
    6. Placing a Background Image on a Web Page
    7. Using Multiple Background Images on One Selector
    8. Creating a Stationary Background Image
    9. Overlaying HTML Text on an Image
    10. Replacing HTML Text with an Image
    11. Replacing HTML Text with Flash Text
    12. Using Multiple PNGs with Transparency
    13. Building a Panoramic Image Presentation
    14. Combining Different Image Formats
    15. Rounding Corners with Fixed-Width Columns
    16. Rounding Corners (Sliding Doors Technique)
    17. Rounding Corners (Mountaintop Technique)
    18. Rounding Corners with JavaScript
    19. Placing a Drop Shadow Behind an Image
    20. Placing a Smooth Drop Shadow Behind an Image
    21. Making Images Scalable
    22. Making Word Balloons
    23. Hindering People from Stealing Your Images
    24. Inserting Reflections on Images Automatically
    25. Using Image Sprites
  7. 4. Page Elements
    1. Introduction
    2. Eliminating Page Margins
    3. Coloring the Scrollbar
    4. Techniques for Centering Elements on a Web Page
    5. Placing a Page Border
    6. Customizing a Horizontal Rule
    7. Adding a Lightbox
  8. 5. Lists
    1. Introduction
    2. Changing the Format of a List
    3. Writing Cross-Browser Indentation in Lists
    4. Place Dividers Between List Items
    5. Creating Custom Text Markers for Lists
    6. Creating Custom Image Markers for Lists
    7. Inserting Large Custom Image Markers for Lists
    8. Making a List Presentation Rich with Imagery
    9. Creating Inline Lists
    10. Making Hanging Indents in a List
    11. Moving the Marker Inside the List
  9. 6. Links and Navigation
    1. Introduction
    2. Removing Underlines from Links (and Adding Other Decorations)
    3. Changing Link Colors
    4. Changing Link Colors in Different Sections of a Page
    5. Placing an Icon at the End of the Link
    6. Changing Cursors
    7. Creating Rollovers Without JavaScript
    8. Creating Text Navigation Menus and Rollovers
    9. Building Horizontal Navigation Menus
    10. Building a Navigation Menu with Access Keys
    11. Creating Breadcrumb Navigation
    12. Creating Image-Based Rollovers
    13. Creating Collapsible Menus
    14. Creating Contextual Menus
    15. Making Tool Tips with the Title Attribute
    16. Designing a Dynamic Visual Menu
    17. Apply Styles Dynamically to a Web Page
  10. 7. Forms
    1. Introduction
    2. Modifying the Spacing Around a Form
    3. Setting Styles for Input Elements
    4. Applying Different Styles to Different Input Elements in the Same Form
    5. Setting Styles for textarea Elements
    6. Setting Styles for Select and Option Elements
    7. Creating a Macintosh-Styled Search Field
    8. Styling Form Buttons
    9. Creating an Image Submit Button
    10. Setting Up a Submit-Once-Only Button
    11. Creating a Submit Button That Looks Like HTML Text
    12. Making an HTML Text Link Operate Like a Submit Button
    13. Designing a Web Form Without Tables
    14. Designing a Two Column Form Without Tables
    15. Highlighting Form Fields
    16. Integrating Form Feedback with a Form
    17. Styling Access Keys in Web Forms
    18. Grouping Common Form Elements
    19. Entering Data into a Form Like a Spreadsheet
    20. Sample Design: A Login Form
    21. Sample Design: A Registration Form
  11. 8. Tables
    1. Introduction
    2. Setting the Cell Spacing
    3. Setting the Borders and Cell Padding
    4. Setting the Style for Caption
    5. Setting the Styles Within Table Cells
    6. Setting Styles for Table Header Elements
    7. Removing Gaps from Images Placed in Table Cells
    8. Eliminating Gaps Between Table Cells
    9. Creating Alternating Background Colors in Table Rows
    10. Adding a Highlighting Effect on a Table Row
    11. Sample Design: An Elegant Calendar
  12. 9. Page Layouts
    1. Introduction
    2. Building a One-Column Layout
    3. Building a Two-Column Layout
    4. Building a Two-Column Layout with Fixed-Width Columns
    5. Creating a Flexible Multicolumn Layout with Floats
    6. Creating a Fixed-Width Multicolumn Layout with Floats
    7. Creating a Flexible Multicolumn Layout with Positioning
    8. Creating a Fixed-Width Multicolumn Layout with Positioning
    9. Using Floats to Display Columns in Any Order
    10. Designing an Asymmetric Layout
  13. 10. Print
    1. Introduction
    2. Creating a Printer-Friendly Page
    3. Making a Web Form Print-Ready
    4. Displaying URIs After Links
    5. Inserting Special Characters Before Links
    6. Sample Design: A Printer-Friendly Page with CSS
  14. 11. Hacks, Workarounds, and Troubleshooting
    1. Introduction
    2. Isolating Styles for Netscape Navigator 4.x
    3. Delivering Specific Styles to Internet Explorer 5.x for Windows
    4. Removing Web Page Flicker in Internet Explorer 5.x for Windows
    5. Keeping Background Images Stationary in Internet Explorer 6 for Windows
    6. Using Internet Explorer for Windows’ Conditional Comments to Deliver Styles
    7. Keeping CSS Rules from Internet Explorer 5 for Macintosh
    8. Setting Up an Intelligent Hack Management System
    9. Diagnosing CSS Bugs and Browser Issues
    10. Testing a Site Design on More Than One Platform with Only One Computer
    11. Installing More Than One Version of Internet Explorer for Windows on a Computer
    12. Testing a Web Site with a Text Browser
  15. 12. Designing with CSS
    1. Introduction
    2. Enlarging Text Excessively
    3. Creating Unexpected Incongruity
    4. Combining Unlike Elements to Create Contrast
    5. Leading the Eye with Contrast
    6. Checking for Enough Color Contrast
    7. Emphasizing a Quotation
  16. A. Resources
    1. General HTML and CSS Instruction
    2. Design Resources
    3. Discussion Groups
    4. References
    5. Tools
  17. B. CSS 2.1 Properties and Proprietary Extensions
  18. C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements
  19. 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
  20. Index
  21. Colophon
  22. Copyright