Stylin’ with CSS

The Blog and Books of Charles Wyke-Smith

Stylin’ with CSS–Table of Contents

Stylin' cover
  1. Introduction • x
  2. Chapter 1 : HTML Markup and Document Structure • 1
    1. The Basics of Markup • 2
      1. Enclosing Tags for Text • 2
      2. Non-Enclosing Tags for Referenced Content • 3
      3. Attributes • 4
      4. Headings and Paragraphs • 5
      5. Compound Elements • 5
      6. About Nested Tags • 6
    1. Anatomy of an HTML Document • 7
      1. An HTML Template • 7
      2. Block and Inline Elements • 10
      3. Nested Elements • 16
    2. The Document Object Model • 20
    3. Summary • 22
  3. Chapter 2 : How CSS Works • 23
    1. The Anatomy of a CSS Rule • 24
      1. CSS Rule Naming Conventions • 26
    2. Contextual Selectors • 28
    3. Specialized Contextual Selectors • 32
      1. Child Selector > • 32
      2. Adjacent Sibling Selector + • 33
      3. General Sibling Selector • 33
      4. The Universal Selector * • 34
    4. IDs and Classes • 35
      1. The Class Attribute • 35
      2. The ID Attribute • 38
      3. When to Use an ID and When to Use a Class • 39
      4. IDs and Classes Summary • 41
    5. Attribute Selectors • 41
      1. The Attribute Name Selector • 41
      2. The Attribute Value Selector • 42
      3. Summary of Attribute Selectors • 42
    6. Pseudo-Classes • 43
      1. UI Pseudo-Classes • 43
      2. Structural Pseudo-Classes • 46
    7. Pseudo-Elements • 47
    8. Inheritance • 49
    9. The Cascade • 50
      1. Sources of Styles • 50
      2. The Cascade Rules • 52
      3. Calculating Specificity • 53
    10. Rule Declarations • 55
      1. Word Values • 55
      2. Numerical Values • 56
      3. Color Values • 57
    11. Summary • 61
  4. Chapter 3 : Positioning Elements • 62
    1. Understanding the Box Model • 62
      1. Box Border • 63
      2. Box Padding • 66
      3. Box Margin • 67
      4. Collapsing Margins • 68
      5. Setting Units for Margins • 69
    2. How Big Is a Box? • 70
    3. Floating and Clearing • 75
      1. The Float Property • 76
      2. Three Ways to Enclose Floated Elements • 78
    4. The Position Property • 85
      1. Static Positioning • 86
      2. Relative Positioning • 87
      3. Absolute Positioning • 87
      4. Fixed Positioning • 89
      5. Positioning Context • 90
    5. The Display Property • 92
    6. Backgrounds • 93
      1. CSS Background Properties • 94
      2. Background Color • 95
      3. Background Image • 95
      4. Background Repeat • 96
      5. Background Position • 97
      6. Background Size • 99
      7. Background Attachment • 100
      8. Background Shorthand • 101
      9. Other CSS3 Background Properties • 101
      10. Multiple Background Images • 102
      11. Background Gradients • 104
    7. Summary • 107
  5. Chapter 4 : Stylin’ Fonts and Text • 108
    1. Fonts • 108
      1. Font-Family Property • 109
      2. Font-Size Property • 112
      3. Font-Style Property • 115
      4. Font-Weight Property • 116
      5. Font-Variant Property • 116
      6. Font Property • 117
    2. Text Properties • 117
      1. Text-Indent Property • 118
      2. Letter-Spacing Property • 119
      3. Word-Spacing Property • 121
      4. Text-Decoration Property • 122
      5. Text-Align Property • 122
      6. Line-Height Property • 123
      7. Text-Transform Property • 124
      8. Vertical-Align Property • 125
    3. Web Fonts Demystified • 126
      1. Hosted Font Libraries • 127
      2. Packaged @font-face Kit • 128
      3. Generated @font-face Kit • 130
    4. Stylin’ Text • 130
      1. Basic Text Layout • 131
      2. Stylin’ Text on a Grid • 135
      3. An Exercise in Classic Typography • 141
    5. Summary • 150
  6. Chapter 5 : Page Layouts • 151
    1. Basic Layout Concepts • 151
      1. Layout Height and Layout Width • 152
    2. Creating Columns • 153
      1. Setting Padding and Borders on Columns • 161
    3. Three-Column, Fluid Center Layouts • 172
      1. A Three-Column, Fluid Center Layout with Negative Margins • 172
      2. A Three-Column, Fluid Center Layout with CSS3 Table Properties • 177
    4. A Multi-Row, Multi-Column Layout • 179
      1. Real-World CSS Selectors • 182
      2. Inner Divs in Action • 184
    5. Summary • 185
  7. Chapter 6 : Interface Components • 186
    1. Creating Navigation Menus • 186
      1. A Vertical Menu • 186
      2. A Horizontal Menu • 189
      3. Drop-Down Menus • 191
    2. Forms • 201
      1. The HTML Elements of a Form • 201
      2. Form Markup Strategies • 209
      3. Styling the Form • 210
      4. A Search Form • 221
    3. A Popup Overlay • 224
      1. Stacking Context and z-index • 227
    4. Summary • 230
  8. Chapter 7 : A CSS3-Enhanced Web Page • 231
    1. Structuring the Page • 231
      1. Planning the HTML • 232
    2. Styling the Header • 236
      1. The Title • 237
      2. The Search Form • 239
      3. The Menu • 242
    3. The Feature Area • 249
      1. Styling the Sign-In Form • 253
      2. The Blog Links • 258
    4. The Book Area • 260
    5. The Footer • 268
    6. Summary • 271
  9. Chapter 8 : Responsive Design • 272
    1. Large Layouts on Small Devices • 272
    2. Media Queries • 274
      1. The @media Rule • 274
      2. The Link Tag Media Attribute • 276
      3. About Breakpoints • 277
      4. The Viewport Meta Tag • 278
    3. Optimizing the Layout for Tablets • 278
    4. Optimizing the Layout for Smartphones • 282
      1. Fine-Tuning for Portrait Format • 285
    5. Finishing Touches • 287
      1. The Scaling Bug in Safari Mobile • 287
      2. Making the Drop-Down Menus Work on Touch Screens • 288
    6. Conclusion • 290
  10. Appendix • 291
  11. Index • 299
Back to Top