Table of Contents | CSS Cookbook, 2nd Edition

CSS Cookbook
By Christopher Schmitt
...............................................
Publisher: O'Reilly
Pub Date: October 01, 2006
ISBN-10: 0-596-52741-1
ISBN-13: 978-0-596-52741-9
Pages: 528

Table of Contents | Index

Preface

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

Colophon

Index