You are previewing Pro CSS and HTML Design Patterns.
O'Reilly logo
Pro CSS and HTML Design Patterns

Book Description

Pro CSS and HTML Design Patterns is a reference book and a cookbook on how to style web pages using CSS and XHTML. It contains 350 ready–to–use patterns (CSS and XHTML code snippets) you can copy and paste into your code. Each pattern can be combined with other patterns to create an unlimited number of solutions.

Each pattern works reliably in all major browsers without the need for browser hacks.

The book's layout, with a pattern's example on the left page and its explanation on the right, makes it easy to find a pattern and study it without having to flip between pages. The book is also readable from cover to cover, with topics building carefully upon previous topics.

A software developer can use this book to learn CSS for the first time. A designer familiar with CSS can use this book to master CSS and XHTML. If you are completely new to coding or completely new to CSS and XHTML, you may want to read an introductory book on CSS and XHTML first.

You can interact with all the examples in the book at www.cssDesignPatterns.com.

Table of Contents

  1. Title Page
  2. Dedication
  3. Contents at a Glance
  4. Contents
  5. About the Author
  6. About the Technical Reviewer
  7. Acknowledgments
  8. Introduction
    1. Audience
    2. Innovations
    3. Conventions
    4. Using This Book
    5. Companion Web Site
    6. How This Book Is Structured
    7. Downloading the Code
    8. Using the Code
    9. Errata
    10. Contacting the Author
  9. CHAPTER 1: Design Patterns: Making CSS Easy!
    1. Design Patterns—Structured Recipes
    2. Using Design Patterns
    3. Using Stylesheets
    4. CSS Syntax
    5. Using Cascade Order
    6. Simplifying the Cascade
    7. CSS and HTML Links
    8. CSS Properties
    9. CSS Properties and Values: Common
    10. CSS Properties and Values: Content
    11. CSS Properties and Values: Layout
    12. CSS Properties and Values: Specialized
    13. Selectors
    14. Flexible Units of Measure
    15. Fixed Units of Measure
    16. Ratios Between Units of Measure at 96 dpi
    17. Typical font-size Values at 96 dpi
    18. Troubleshooting CSS
    19. Normalized Stylesheet
  10. CHAPTER 2: HTML Design Patterns
    1. Chapter Outline
    2. HTML Structure
    3. XHTML
    4. DOCTYPE
    5. Header Elements
    6. Conditional Stylesheet
    7. Structural Block Elements
    8. Terminal Block Elements
    9. Multi-purpose Block Elements
    10. Inline Elements
    11. Class and ID Attributes
    12. HTML Whitespace
  11. CHAPTER 3: CSS Selectors and Inheritance
    1. Chapter Outline
    2. Type, Class, and ID Selectors
    3. Position and Group Selectors
    4. Attribute Selectors
    5. Pseudo-element Selectors
    6. Pseudo-class Selectors
    7. Subclass Selector
    8. Inheritance
    9. Visual Inheritance
  12. CHAPTER 4: Box Models
    1. Chapter Outline
    2. Display
    3. Box Model
    4. Inline Box
    5. Inline-block Box
    6. Block Box
    7. Table Box
    8. Absolute Box
    9. Floated Box
  13. CHAPTER 5: Box Model Extents
    1. Chapter Outline
    2. Width
    3. Height
    4. Sized
    5. Shrinkwrapped
    6. Stretched
  14. CHAPTER 6: Box Model Properties
    1. Chapter Outline
    2. Margin
    3. Border
    4. Padding
    5. Background
    6. Overflow
    7. Visibility
    8. Page Break
  15. CHAPTER 7: Positioning Models
    1. Chapter Outline
    2. Positioning Models
    3. Positioned
    4. Closest Positioned Ancestor
    5. Stacking Context
    6. Atomic
    7. Static
    8. Absolute
    9. Fixed
    10. Relative
    11. Float and Clear
    12. Relative Float
  16. CHAPTER 8: Positioning: Indented, Offset, and Aligned
    1. Chapter Outline
    2. Indented
    3. Offset Static
    4. Offset or Indented Static Table
    5. Offset Float
    6. Offset Absolute and Offset Fixed
    7. Offset Relative
    8. Aligned Static Inline
    9. Aligned and Offset Static Block
    10. Aligned and Offset Static Table
    11. Aligned and Offset Absolute
    12. Aligned-center Absolute
    13. Aligned Outside
  17. CHAPTER 9: Positioning: Advanced
    1. Chapter Outline
    2. Left Aligned
    3. Left Offset
    4. Right Aligned
    5. Right Offset
    6. Center Aligned
    7. Center Offset
    8. Top Aligned
    9. Top Offset
    10. Bottom Aligned
    11. Bottom Offset
    12. Middle Aligned
    13. Middle Offset
  18. CHAPTER 10: Styling Text
    1. Font
    2. Highlight
    3. Text Decoration
    4. Text Shadow
    5. Text Replacement
    6. Invisible Text
    7. Screenreader-only
  19. CHAPTER 11: Spacing Content
    1. Spacing
    2. Blocked
    3. Nowrap
    4. Preserved
    5. Code
    6. Padded Content
    7. Inline Spacer
    8. Inline Decoration
    9. Linebreak
    10. Inline Horizontal Rule
  20. CHAPTER 12: Aligning Content
    1. Text Indent
    2. Hanging Indent
    3. Horizontal-aligned Content
    4. Vertical-aligned Content
    5. Vertical-offset Content
    6. Subscript and Superscript
    7. Nested Alignment
    8. Advanced Alignment Example
  21. CHAPTER 13: Blocks
    1. Chapter Outline
    2. Structural Meaning
    3. Visual Structure
    4. Section
    5. Lists
    6. Background Bulleted
    7. Inlined
    8. Collapsed Margins
    9. Run-in
    10. Horizontal Rule
    11. Block Spacer
    12. Block Space Remover
    13. Left Marginal
    14. Right Marginal
  22. CHAPTER 14: Images
    1. Chapter Outline
    2. Image
    3. Image Map
    4. Fade-out
    5. Semi-transparent
    6. Replaced Text
    7. Content over Image
    8. Content over Background Image
    9. CSS Sprite
    10. Basic Shadowed Image
    11. Shadowed Image
    12. Rounded Corners
    13. Image Example
  23. CHAPTER 15: Tables
    1. Chapter Outline
    2. Table
    3. Row and Column Groups
    4. Table Selectors
    5. Separated Borders
    6. Collapsed Borders
    7. Styled Collapsed Borders
    8. Hidden and Removed Cells
    9. Removed and Hidden Rows and Columns
    10. Vertical-aligned Data
    11. Striped Tables
    12. Tabled, Rowed, and Celled
    13. Table Layout
  24. CHAPTER 16: Column Layout
    1. Table Layout Models
    2. Using Column Layouts
    3. Chapter Outline
    4. Column Width
    5. Shrinkwrapped Columns
    6. Sized Columns
    7. Content-proportioned Columns
    8. Size-proportioned Columns
    9. Percentage-proportioned Columns
    10. Inverse-proportioned Columns
    11. Equal Content-sized Columns
    12. Equal-sized Columns
    13. Undersized Columns
    14. Flex Columns
    15. Mixed Column Layouts
  25. CHAPTER 17: Layouts
    1. Chapter Outline
    2. Fluid Layout Overview
    3. Outside-in Box
    4. Floating Section
    5. Float Divider
    6. Fluid Layout
    7. Opposing Floats
    8. Event Styling
    9. Rollup
    10. Tab Menu
    11. Tabs
    12. Flyout Menu
    13. Button
    14. Layout Links
    15. Layout Example
  26. CHAPTER 18: Drop Caps
    1. Chapter Outline
    2. Aligned Drop Cap
    3. First-letter Drop Cap
    4. Hanging Drop Cap
    5. Padded Graphical Drop Cap
    6. Floating Drop Cap
    7. Floating Graphical Drop Cap
    8. Marginal Drop Cap
    9. Marginal Graphical Drop Cap
  27. CHAPTER 19: Callouts and Quotes
    1. Chapter Outline
    2. Left Floating Callout
    3. Right Floating Callout
    4. Center Callout
    5. Left Marginal Callout
    6. Right Marginal Callout
    7. Block Quote
    8. Inline Block Quote
    9. Inline Quote
  28. CHAPTER 20: Alerts
    1. Chapter Outline
    2. JavaScript Alert
    3. Tooltip Alert
    4. Popup Alert
    5. Alert
    6. Inline Alert
    7. Hanging Alert
    8. Graphical Alert
    9. Run-in Alert
    10. Floating Alert
    11. Left Marginal Alert
    12. Right Marginal Alert
  29. Index