CSS Cookbook | O'Reilly Media

Tell a friend

CSS Cookbook, Second Edition By Christopher Schmitt
October 2006
Pages: 538

| Table of Contents | Index | Colophon

Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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

Appendix A Resources
1. General HTML and CSS Instruction
2. Design Resources
3. Discussion Groups
4. References
5. 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
1. Checkboxes
2. File Input
3. Radio Buttons
4. Text Fields
5. Multiple Options
6. Select Element
7. Submit Button
8. Textarea Element
Colophon

Return to CSS Cookbook

Table of Contents

Chapter 1 General

Introduction

Using CSS with HTML

Using Different Selectors to Apply Styles

Determining When to Use Class and ID Selectors

Understanding CSS Properties

Understanding the Box Model

Understanding DOCTYPES and Effects on Browser Layout

Associating Styles to a Web Page

How to Use Different Types of Style Sheets

Adding Comments Within CSS

Organizing the Contents of a Style Sheet

Organizing Style Sheet Files

Working with Shorthand Properties

Setting up an Alternate Style Sheet

Using Floats with Images

Using Absolute Positioning

Using Relative Positioning

Using CSS in Adobe Dreamweaver

Using CSS in Microsoft Expression Web Designer

Chapter 2 Web Typography

Introduction

Specifying Fonts

Specifying Font Measurements and Sizes

Gaining More Control over Font Sizes

Enforcing Font Sizes

Centering Text

Setting Text to Be Justified

Removing Space Between Headings and Paragraphs

Setting a Simple Initial Cap

Setting a Larger, Centered Initial Cap

Setting an Initial Cap with Decoration (Imagery)

Creating a Heading with Stylized Text

Creating a Heading with Stylized Text and Borders

Stylizing a Heading with Text and an Image

Creating a Pull Quote with HTML Text

Creating a Pull Quote with Borders

Creating a Pull Quote with Images

Setting the Indent in the First Line of a Paragraph

Setting the Indent of Entire Paragraphs

Creating a Hanging Indent

Styling the First Line of a Paragraph

Styling the First Line of a Paragraph with an Image

Creating a Highlighted Text Effect

Changing Line Spacing

Adding a Graphic Treatment to HTML Text

Placing Shadow Behind Text

Adjusting the Spacing Between Letters and Words

Chapter 3 Images

Introduction

Placing a Border Around an Image

Removing Borders Set on Images by Default in Some Browsers

Setting a Background Image

Creating a Line of Background Images

Placing a Background Image on a Web Page

Using Multiple Background Images on One Selector

Creating a Stationary Background Image

Overlaying HTML Text on an Image

Replacing HTML Text with an Image

Replacing HTML Text with Flash Text

Using Multiple PNGs with Transparency

Building a Panoramic Image Presentation

Combining Different Image Formats

Rounding Corners with Fixed-Width Columns

Rounding Corners (Sliding Doors Technique)

Rounding Corners (Mountaintop Technique)

Rounding Corners with JavaScript

Placing a Drop Shadow Behind an Image

Placing a Smooth Drop Shadow Behind an Image

Making Images Scalable

Making Word Balloons

Hindering People from Stealing Your Images

Inserting Reflections on Images Automatically

Using Image Sprites

Chapter 4 Page Elements

Introduction

Eliminating Page Margins

Coloring the Scrollbar

Techniques for Centering Elements on a Web Page