HTML Utopia: Designing Without Tables Using CSS

Rachel Andrew and Dan Shafer’s book is a comprehensive guide to learning and applying the principles of CSS to your Website.

This book will teach you how to…

• Appreciate why maintaining tables is a nightmare and how CSS can help
• Understand when to use CSS and when not to use CSS
• Build robust, flexible two- and three-column layouts using CSS positioning.
• Easily build both fixed-width and liquid page layouts
• Reap the benefits of inheritance in CSS
• Style text and other content using CSS
• Make the most of other non-obvious uses of CSS
• Use CSS to achieve maximum Web Accessibility
• Design sites that are standards compliant
• Accommodate older Browsers
• And much more...

Plus, it also comes with a sophisticated sample website styled and layed out completely with CSS and a FREE download of the site and all of its code.

And on top of this ‘HTML Utopia: Designing Without Tables Using CSS, 2nd Edition’ also includes the most complete CSS Property Reference of any book ever written about CSS - with over 150 CSS properties described.

0. Preface
   • Who Should Read this Book?
   • What’s in this Book?
   • The Book’s Web Site
     • The Code Archive
     • Updates and Errata
   • The SitePoint Forums
   • The SitePoint Newsletters
   • Your Feedback
   • Acknowledgements
1. Getting the Lay of the Land
   • CSS in Context
   • The Basic Purpose of CSS
   • Why Most—but Not All—Tables Are Bad
     • Tables Mean Long Load Times
     • Use of Transparent Images Slows us Down
     • Maintaining Tables is a Nightmare
     • Tables Cause Accessibility Issues
     • When it’s Okay to Use a Table
   • What is CSS, Really?
   • Parts of a CSS Rule
   • Types of CSS Rules
     • Which Properties can CSS Rules Affect?
     • Which Elements can CSS Affect?
     • Where can CSS Styles be Defined?
   • A Simple Example
   • Summary
2. Putting CSS into Perspective
   • What can CSS Do?
     • Color and CSS
     • Fonts and CSS
     • Dynamic Pseudo-classes and CSS
     • Images and CSS
     • Multiple Style Sheets, Users, and CSS
   • Advantages of CSS Design
     • Increased Stylistic Control
     • Centralized Design Information
     • Semantic Content Markup
     • Accessibility
     • Standards Compliance
   • Browser Support for CSS
   • Summary
3. Digging Below the Surface
   • Applying CSS to HTML Documents
   • Using Shorthand Properties
   • How Inheritance Works in CSS
   • Selectors and the Structure of CSS Rules
     • Universal Selector
     • Element Type Selector
     • Class Selector
     • ID Selector
     • Pseudo-element Selector
     • Pseudo-class Selector
     • Descendant Selector
     • Parent-child Selector
     • Adjacent Selector
     • Attribute Selectors
     • Selector Grouping
   • Expression Measurements
     • Absolute Values
     • Relative Values
   • CSS Comments
   • Summary
4. Validation and Backward Compatibility
   • Validating your CSS
   • Adjusting for Backward Compatibility
     • Browsers that Do Not Support CSS
     • Browsers with Poor or Badly Implemented CSS Support
     • Bugs in Modern Browsers
   • Keep the Quirks: DOCTYPE Switching
   • Summary
5. Splashing Around a Bit of Color
   • Who’s in Charge?
   • Color in CSS
     • How to Specify Colors
     • Selecting and Combining Colors
     • Setting body Color
     • Transparency, Color, and User Overrides
   • Interesting Uses of Color
     • Warnings and Cautions
     • Coloring Alternate Rows and Adding Cell Borders in Data Tables
   • Background Images
   • Summary
6. Working with Fonts
   • How CSS Deals with Fonts
   • The font-family Property
     • Generic Fonts
   • The font-size Property
     • HTML Sizes vs CSS Sizes
     • Variability across Browsers and Platforms
     • Relative to what?
   • Other Font Properties
     • The font-style Property
     • The font-variant Property
     • The font-weight Property
   • The font Shorthand Property
   • Standard and Nonstandard Font Families
     • Specifying Font Lists
     • Using Nonstandard and Downloadable Fonts
   • Summary
7. Text Effects and the Cascade
   • Using the span Element
   • Text Alignment as a Design Technique
     • Text Alignment in CSS vs HTML
     • Moving from Crowded to Airy Design Using Alignment
   • First-line Indentation
   • Horizontal and Vertical Spacing
     • The line-height Property
     • The letter-spacing and word-spacing Properties
   • Text Decorations
   • Styling Hyperlinks
   • Styling Lists with CSS
     • The list-style-type Property
     • The list-style-position Property
     • The list-style-image Property
   • Cascading and Inheritance
     • Basic Principles of Cascading
     • Sort Order
     • Specificity
     • Origin
     • Weight
   • Summary
8. Simple CSS Layout
   • The Layout
   • Creating the Document
     • The Header
     • The Main Content Section
     • The Sidebar
   • Positioning the Page Elements
     • The display Property
     • Absolute, Relative, and Positioning Contexts
     • The Box Model
     • Margin Properties
     • Margins, Padding, and Lists
     • Border Properties
   • Constructing the Layout
     • The Header Area
     • The Content Area
     • Repositioning the Sidebar
   • Summary
9. Three-column Layouts
   • Adding a Third Column
     • The Markup
     • Positioning the Sidebar
   • Adding a Footer
   • The float Property
     • How Does it Work?
   • Putting float into Practice in our Layout
   • Achieving Full-height Columns
   • The Content Order Problem
     • Other Layout Methods
   • Summary
10. Fixed-width Layouts
    • The Layout
    • Creating the Document
    • Centering the Content Area
      • The Header Area
    • The Content
    • The Table
    • Multiple-column Fixed-width Layouts
      • Positioned Columns
      • Floated Columns
    • “Zoom” Layouts
      • Creating the Style Sheet
      • Attaching Alternate Style Sheets
    • Summary

1. CSS Miscellany
   • At-rules
   • Aural Style Sheets
   • CSS and JavaScript
2. CSS Color Reference
3. CSS Property Reference
   • azimuth
   • background
   • background-attachment
   • background-color
   • background-image
   • background-position
   • background-position-x, background-position-y
   • background-repeat
   • behavior
   • border
   • border-bottom, border-left, border-right, border-top
   • border-bottom-color, border-left-color, border-right-color, border-top-color
   • border-bottom-style, border-left-style, border-right-style, border-top-style
   • border-bottom-width, border-left-width, border-right-width, border-top-width
   • border-collapse
   • border-color
   • border-spacing
   • border-style
   • border-width
   • bottom
   • caption-side
   • clear
   • clip
   • color
   • content
   • counter-increment
   • counter-reset
   • cue
   • cue-after, cue-before
   • cursor
   • direction
   • display
   • elevation
   • empty-cells
   • filter
   • float
   • font
   • font-family
   • font-size
   • font-size-adjust
   • font-stretch
   • font-style
   • font-variant
   • font-weight
   • height
   • ime-mode
   • layout-flow
   • layout-grid
   • layout-grid-char
   • layout-grid-line
   • layout-grid-mode
   • layout-grid-type
   • left
   • letter-spacing
   • line-break
   • line-height
   • list-style
   • list-style-image
   • list-style-position
   • list-style-type
   • margin
   • margin-bottom, margin-left, margin-right, margin-top
   • marker-offset
   • marks
   • max-height, min-height
   • max-width, min-width
   • -moz-border-radius
   • -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright
   • -moz-opacity
   • orphans
   • outline
   • outline-color
   • outline-style
   • outline-width
   • overflow
   • overflow-x, overflow-y
   • padding
   • padding-bottom, padding-left, padding-right, padding-top
   • page
   • page-break-after
   • page-break-before
   • page-break-inside
   • pause
   • pause-after, pause-before
   • pitch
   • pitch-range
   • play-during
   • position
   • quotes
   • richness
   • right
   • ruby-align
   • ruby-overhang
   • ruby-position
   • scrollbar-base-color
   • scrollbar-element-color
   • size
   • speak
   • speak-header
   • speak-numeral
   • speak-punctuation
   • speech-rate
   • stress
   • table-layout
   • text-align
   • text-align-last
   • text-autospace
   • text-decoration
   • text-indent
   • text-justify
   • text-kashida-space
   • text-overflow
   • text-transform
   • text-underline-position
   • top
   • unicode-bidi
   • vertical-align
   • visibility
   • voice-family
   • volume
   • white-space
   • widows
   • width
   • word-break
   • word-spacing
   • word-wrap
   • writing-mode
   • z-index
   • zoom