Stylin’ with CSS: A Designer’s Guide, Second Edition

Table of contents

1. Copyright
   1. Dedication
2. Acknowledgements
3. About the Author
4. Introduction
   1. Reuse and DRY
   2. Master the Key Techniques
   3. Use the Right Tools
   4. Only Four Browsers Matter
   5. Download My Code, Don’t Retype It
   6. ... and Don’t Forget to Write
5. 1. XHTML: Giving Structure to Content
   1. Web Standards
      1. Even Today, IDWIMIE
      2. Content, Structure, and Presentation
   2. The Times They Are A-Changing
      1. The Way We Were...
      2. The Future Just Happened
   3. XHTML and How To Write It
      1. XHTML—The Rules
      2. An XHTML Template
      3. Marking Up Your Content
      4. Document Flow—Block and Inline Elements
         1. A Simple Example of XHTML Markup
         2. The Browser’s Internal Style Sheet
         3. A More Structured XHTML Page
      5. Document Hierarchy: Meet the XHTML Family
6. 2. How CSS Works
   1. The Three Ways to Style Your Document
      1. Inline Styles
      2. Embedded Styles
      3. Linked Styles
   2. Anatomy of a CSS Rule
   3. Writing CSS Rules
   4. Targeting Tags Within the Document Hierarchy
      1. Using Contextual Selectors
      2. Working with Child Selectors
      3. Adding Classes and IDs
         1. Simple Use of a Class
         2. Contextual Class Selectors
         3. Multiple Classes
      4. Introducing IDs
      5. The Difference Between IDs and Classes
      6. Specialized Selectors
         1. The Universal Selector
         2. The Adjacent Sibling Selector
         3. Attribute Selectors
      7. Summary of Selectors
   5. Pseudo-Classes
      1. Anchor Link Pseudo-Classes
      2. Other Useful Pseudo-Classes
         1. :First-Child
         2. :Focus
   6. Pseudo-Elements
   7. Inheritance
   8. The Cascade
      1. Sources of Styles
      2. The Cascade Rules
   9. Rule Declarations
      1. Numerical Values
      2. Color Values
7. 3. Stylin’ Fonts and Text
   1. Specifying Fonts in CSS
      1. Introducing Font Collections
   2. Exploring Font Families
      1. Using Embedded Styles (for Now)
      2. Setting the Font Family for the Entire Page
   3. Sizing Fonts
      1. Inherited Styles in Nested Tags
   4. Font Properties
      1. Font-Style Property
      2. Font-Weight Property
      3. Font-Variant Property
      4. The Font Property Shorthand
   5. Text Properties
      1. Text-Indent Property
      2. Letter-Spacing Property
      3. Word-Spacing Property
      4. Text-Decoration Property
      5. Text-Align Property
      6. Line-Height Property
      7. Text-Transform Property
      8. Vertical-Align Property
   6. Using Font and Text Styles
8. 4. Positioning Elements
   1. Understanding the Box Model
      1. The Box Border
      2. The Box Padding
      3. The Box Margins
      4. Collapsing Margins
   2. How Big Is a Box?
      1. Creating a Single Column with Contained Elements
   3. Floating and Clearing
      1. The Float Property
      2. The Clear Property
   4. The Position Property
      1. Static Positioning
      2. Relative Positioning
      3. Absolute Positioning
      4. Fixed Positioning
      5. Positioning Context
   5. The Display Property
   6. Positioning/Display Example
9. 5. Basic Page Layout
   1. Some Multi-Column Layouts
   2. Introducing Stylib—the Stylin’ Library
   3. Width Matters
   4. Floated Versus Absolutely-Positioned Layouts
      1. A Simple Two-Column Fixed-Width Layout
      2. Know Your Inner Div
      3. Prevent Unwanted Overflow
      4. Freely Style Your Inner Divs
      5. Styling the Text
   5. A Simple Two-Column Liquid Layout
      1. Use a Little Constraint
      2. To Float or Not To Float?
   6. A Three-Column Fixed-Width Layout
   7. A Three-Column Liquid Layout
   8. Making All the Columns the Same Length
      1. Faux Columns
         1. Two-Column Liquid Layout with Faux Columns
         2. Three-Column Liquid Layout with Faux Columns
      2. Programmatically Extend Columns (and Round Their Corners!)
   9. An Absolutely-Positioned Layout
10. 6. Designing Interface Components
    1. Styling Tables
    2. Styling Forms
       1. How Forms Work
       2. Form Markup
          1. The Form Element
          2. Form Controls
          3. The Text Input Control
          4. The Password Input Control
          5. The Textarea Input Control
          6. The Radio Button Input
          7. The Checkbox Input Control
          8. The Select Control
          9. The Submit Button Input Control
       3. Form Styling
          1. Tiny Sign-in Form
    3. Styling Lists and Menus
       1. Lists
          1. Styling Lists
          2. Converting the List into a Menu
          3. Basic Link Styling
       2. Creating CSS-Based Menus
          1. A Drop-Down Menu Tutorial
          2. Creating the Drop-Downs on the Menu
11. 7. Building Web Pages
    1. The Stylin’ Site
    2. Setting Up the Folder Structure
    3. Creating the Site Architecture
       1. Copy the Required CSS Files from the Library
       2. The @import Rule
       3. The Text and Colors Style Sheet
       4. The Page Markup
       5. The Background Images
       6. The Drop-Down Menus
          1. Transparency on the Drop-Downs
       7. The Transparent Sidebar Panel
          1. Adjusting the Left Column Width
          2. Adding the Transparent Background Graphic to the Column
       8. Adding the Registration Form
       9. Styling the Text
          1. The Header
          2. The Content Area
          3. The Right Promo Column
          4. The Footer
    4. Conclusion
12. A. XHTML Tags
13. B. CSS Properties