Pro CSS and HTML Design Patterns 1590598040, 9781590598047

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