CSS Cookbook

CSS Cookbook

Chapter 1. General
Section 1.0. Introduction
  Recipe 1.1. Using CSS with HTML
  Recipe 1.2. Using Different Selectors to Apply Styles
  Recipe 1.3. Determining When to Use Class and ID Selectors
  Recipe 1.4. Understanding CSS Properties
  Recipe 1.5. Understanding the Box Model
  Recipe 1.6. Understanding DOCTYPES and Effects on Browser Layout
  Recipe 1.7. Associating Styles to a Web Page
  Recipe 1.8. How to Use Different Types of Style Sheets
  Recipe 1.9. Adding Comments Within CSS
  Recipe 1.10. Organizing the Contents of a Style Sheet
  Recipe 1.11. Organizing Style Sheet Files
  Recipe 1.12. Working with Shorthand Properties
  Recipe 1.13. Setting up an Alternate Style Sheet
  Recipe 1.14. Using Floats with Images
  Recipe 1.15. Using Absolute Positioning
  Recipe 1.16. Using Relative Positioning
  Recipe 1.17. Using CSS in Adobe Dreamweaver
  Recipe 1.18. Using CSS in Microsoft Expression Web Designer

Chapter 2. Web Typography
Section 2.0. Introduction
  Recipe 2.1. Specifying Fonts
  Recipe 2.2. Specifying Font Measurements and Sizes
  Recipe 2.3. Gaining More Control over Font Sizes
  Recipe 2.4. Enforcing Font Sizes
  Recipe 2.5. Centering Text
  Recipe 2.6. Setting Text to Be Justified
  Recipe 2.7. Removing Space Between Headings and Paragraphs
  Recipe 2.8. Setting a Simple Initial Cap
  Recipe 2.9. Setting a Larger, Centered Initial Cap
  Recipe 2.10. Setting an Initial Cap with Decoration (Imagery)
  Recipe 2.11. Creating a Heading with Stylized Text
  Recipe 2.12. Creating a Heading with Stylized Text and Borders
  Recipe 2.13. Stylizing a Heading with Text and an Image
  Recipe 2.14. Creating a Pull Quote with HTML Text
  Recipe 2.15. Creating a Pull Quote with Borders
  Recipe 2.16. Creating a Pull Quote with Images
  Recipe 2.17. Setting the Indent in the First Line of a Paragraph
  Recipe 2.18. Setting the Indent of Entire Paragraphs
  Recipe 2.19. Creating a Hanging Indent
  Recipe 2.20. Styling the First Line of a Paragraph
  Recipe 2.21. Styling the First Line of a Paragraph with an Image
  Recipe 2.22. Creating a Highlighted Text Effect
  Recipe 2.23. Changing Line Spacing
  Recipe 2.24. Adding a Graphic Treatment to HTML Text
  Recipe 2.25. Placing Shadow Behind Text
  Recipe 2.26. Adjusting the Spacing Between Letters and Words

Chapter 3. Images
Section 3.0. Introduction
  Recipe 3.1. Placing a Border Around an Image
  Recipe 3.2. Removing Borders Set on Images by Default in Some Browsers
  Recipe 3.3. Setting a Background Image
  Recipe 3.4. Creating a Line of Background Images
  Recipe 3.5. Placing a Background Image on a Web Page
  Recipe 3.6. Using Multiple Background Images on One Selector
  Recipe 3.7. Creating a Stationary Background Image
  Recipe 3.8. Overlaying HTML Text on an Image
  Recipe 3.9. Replacing HTML Text with an Image
  Recipe 3.10. Replacing HTML Text with Flash Text
  Recipe 3.11. Using Multiple PNGs with Transparency
  Recipe 3.12. Building a Panoramic Image Presentation
  Recipe 3.13. Combining Different Image Formats
  Recipe 3.14. Rounding Corners with Fixed-Width Columns
  Recipe 3.15. Rounding Corners (Sliding Doors Technique)
  Recipe 3.16. Rounding Corners (Mountaintop Technique)
  Recipe 3.17. Rounding Corners with JavaScript
  Recipe 3.18. Placing a Drop Shadow Behind an Image
  Recipe 3.19. Placing a Smooth Drop Shadow Behind an Image
  Recipe 3.20. Making Images Scalable
  Recipe 3.21. Making Word Balloons
  Recipe 3.22. Hindering People from Stealing Your Images
  Recipe 3.23. Inserting Reflections on Images Automatically
  Recipe 3.24. Using Image Sprites

Chapter 4. Page Elements
Section 4.0. Introduction
  Recipe 4.1. Eliminating Page Margins
  Recipe 4.2. Coloring the Scrollbar
  Recipe 4.3. Techniques for Centering Elements on a Web Page
  Recipe 4.4. Placing a Page Border
  Recipe 4.5. Customizing a Horizontal Rule
  Recipe 4.6. Adding a Lightbox

Chapter 5. Lists
Section 5.0. Introduction
  Recipe 5.1. Changing the Format of a List
  Recipe 5.2. Writing Cross-Browser Indentation in Lists
  Recipe 5.3. Place Dividers Between List Items
  Recipe 5.4. Creating Custom Text Markers for Lists
  Recipe 5.5. Creating Custom Image Markers for Lists
  Recipe 5.6. Inserting Large Custom Image Markers for Lists
  Recipe 5.7. Making a List Presentation Rich with Imagery
  Recipe 5.8. Creating Inline Lists
  Recipe 5.9. Making Hanging Indents in a List
  Recipe 5.10. Moving the Marker Inside the List

Chapter 6. Links and Navigation
Section 6.0. Introduction
  Recipe 6.1. Removing Underlines from Links (and Adding Other Decorations)
  Recipe 6.2. Changing Link Colors
  Recipe 6.3. Changing Link Colors in Different
Sections of a Page
  Recipe 6.4. Placing an Icon at the End of the Link
  Recipe 6.5. Changing Cursors
  Recipe 6.6. Creating Rollovers Without JavaScript
  Recipe 6.7. Creating Text Navigation Menus and Rollovers
  Recipe 6.8. Building Horizontal Navigation Menus
  Recipe 6.9. Building a Navigation Menu with Access Keys
  Recipe 6.10. Creating Breadcrumb Navigation
  Recipe 6.11. Creating Image-Based Rollovers
  Recipe 6.12. Creating Collapsible Menus
  Recipe 6.13. Creating Contextual Menus
  Recipe 6.14. Making Tool Tips with the Title Attribute
  Recipe 6.15. Designing a Dynamic Visual Menu
  Recipe 6.16. Apply Styles Dynamically to a Web Page

Chapter 7. Forms
Section 7.0. Introduction
  Recipe 7.1. Modifying the Spacing Around a Form
  Recipe 7.2. Setting Styles for Input Elements
  Recipe 7.3. Applying Different Styles to Different Input Elements in the Same Form
  Recipe 7.4. Setting Styles for textarea Elements
  Recipe 7.5. Setting Styles for Select and Option Elements
  Recipe 7.6. Creating a Macintosh-Styled Search Field
  Recipe 7.7. Styling Form Buttons
  Recipe 7.8. Creating an Image Submit Button
  Recipe 7.9. Setting Up a Submit-Once-Only Button
  Recipe 7.10. Creating a Submit Button That Looks Like HTML Text
  Recipe 7.11. Making an HTML Text Link Operate Like a Submit Button
  Recipe 7.12. Designing a Web Form Without Tables
  Recipe 7.13. Designing a Two Column Form Without Tables
  Recipe 7.14. Highlighting Form Fields
  Recipe 7.15. Integrating Form Feedback with a Form
  Recipe 7.16. Styling Access Keys in Web Forms
  Recipe 7.17. Grouping Common Form Elements
  Recipe 7.18. Entering Data into a Form Like a Spreadsheet
  Recipe 7.19. Sample Design: A Login Form
  Recipe 7.20. Sample Design: A Registration Form

Chapter 8. Tables
Section 8.0. Introduction
  Recipe 8.1. Setting the Cell Spacing
  Recipe 8.2. Setting the Borders and Cell Padding
  Recipe 8.3. Setting the Style for Caption
  Recipe 8.4. Setting the Styles Within Table Cells
  Recipe 8.5. Setting Styles for Table Header Elements
  Recipe 8.6. Removing Gaps from Images Placed in Table Cells
  Recipe 8.7. Eliminating Gaps Between Table Cells
  Recipe 8.8. Creating Alternating Background Colors in Table Rows
  Recipe 8.9. Adding a Highlighting Effect on a Table Row
  Recipe 8.10. Sample Design: An Elegant Calendar

Chapter 9. Page Layouts
Section 9.0. Introduction
  Recipe 9.1. Building a One-Column Layout
  Recipe 9.2. Building a Two-Column Layout
  Recipe 9.3. Building a Two-Column Layout with Fixed-Width Columns
  Recipe 9.4. Creating a Flexible Multicolumn Layout with Floats
  Recipe 9.5. Creating a Fixed-Width Multicolumn Layout with Floats
  Recipe 9.6. Creating a Flexible Multicolumn Layout with Positioning
  Recipe 9.7. Creating a Fixed-Width Multicolumn Layout with Positioning
  Recipe 9.8. Using Floats to Display Columns in Any Order
  Recipe 9.9. Designing an Asymmetric Layout

Chapter 10. Print
Section 10.0. Introduction
  Recipe 10.1. Creating a Printer-Friendly Page
  Recipe 10.2. Making a Web Form Print-Ready
  Recipe 10.3. Displaying URIs After Links
  Recipe 10.4. Inserting Special Characters Before Links
  Recipe 10.5. Sample Design: A Printer-Friendly Page with CSS

Chapter 11. Hacks, Workarounds, and Troubleshooting
Section 11.0. Introduction
  Recipe 11.1. Isolating Styles for Netscape Navigator 4.x
  Recipe 11.2. Delivering Specific Styles to Internet Explorer 5.x for Windows
  Recipe 11.3. Removing Web Page Flicker in Internet Explorer 5.x for Windows
  Recipe 11.4. Keeping Background Images Stationary in Internet Explorer 6 for Windows
  Recipe 11.5. Using Internet Explorer for Windows' Conditional Comments to Deliver Styles
  Recipe 11.6. Keeping CSS Rules from Internet Explorer 5 for Macintosh
  Recipe 11.7. Setting Up an Intelligent Hack Management System
  Recipe 11.8. Diagnosing CSS Bugs and Browser Issues
  Recipe 11.9. Testing a Site Design on More Than One Platform with Only One Computer
  Recipe 11.10. Installing More Than One Version of Internet Explorer for Windows on a Computer
  Recipe 11.11. Testing a Web Site with a Text Browser

Chapter 12. Designing with CSS
Section 12.0. Introduction
  Recipe 12.1. Enlarging Text Excessively
  Recipe 12.2. Creating Unexpected Incongruity
  Recipe 12.3. Combining Unlike Elements to Create Contrast
  Recipe 12.4. Leading the Eye with Contrast
  Recipe 12.5. Checking for Enough Color Contrast
  Recipe 12.6. Emphasizing a Quotation

Appendix A. Resources
  - General HTML and CSS Instruction
  - Design Resources
  - Discussion Groups
  - References
  - Tools

Appendix B. CSS 2.1 Properties and Proprietary Extensions

Appendix C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements

Appendix D. Styling of Form Elements
  - Checkboxes
  - File Input
  - Radio Buttons
  - Text Fields
  - Multiple Options
  - Select Element
  - Submit Button
  - Textarea Element

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.