Stylin' with CSS

Table of Contents

1. Introduction •  xii
2. Chapter 1 : XHTML: Giving Structure to Content • 2
   1. Web Standards • 4
      1. Even Today, IDWIMIE • 4
      2. Content, Structure, and Presentation • 5
   2. The Times They Are A-Changing • 7
      1. The Way We Were… • 7
      2. The Future Just Happened • 9
   3. XHTML and How To Write It • 10
      1. XHTML—The Rules • 11
      2. An XHTML Template • 16
      3. Marking Up Your Content • 18
      4. Document Flow—Block and Inline Elements • 18
      5. Document Hierarchy: Meet the XHTML Family • 24
3. Chapter 2 : How CSS Works • 26
   1. The Three Ways to Style Your Document • 28
      1. Inline Styles • 28
      2. Embedded Styles • 29
      3. Linked Styles • 30
   2. Anatomy of a CSS Rule • 32
   3. Writing CSS Rules • 33
   4. Targeting Tags Within the Document Hierarchy • 34
      1. Using Contextual Selectors • 34
      2. Working with Child Selectors • 38
      3. Adding Classes and IDs • 39
      4. Introducing IDs • 43
      5. The Difference Between IDs and Classes • 44
      6. Specialized Selectors • 45
      7. Summary of Selectors • 48
   5. Pseudo-Classes • 49
      1. Anchor Link Pseudo-Classes • 49
      2. Other Useful Pseudo-Classes • 51
   6. Pseudo-Elements • 52
   7. Inheritance • 54
   8. The Cascade • 55
      1. Sources of Styles • 55
      2. The Cascade Rules • 56
   9. Rule Declarations • 60
      1. Numerical Values • 60
      2. Color Values • 63
4. Chapter 3 : Stylin’ Fonts and Text • 66
   1. Specifying Fonts in CSS • 68
      1. Introducing Font Collections • 69
   2. Exploring Font Families • 71
      1. Using Embedded Styles (for Now) • 73
      2. Setting the Font Family for the Entire Page • 74
   3. Sizing Fonts • 76
      1. Inherited Styles in Nested Tags • 79
   4. Font Properties • 81
      1. Font-Style Property • 81
      2. Font-Weight Property • 82
      3. Font-Variant Property • 83
      4. The Font Property Shorthand • 84
   5. Text Properties • 84
      1. Text-Indent Property • 86
      2. Letter-Spacing Property • 88
      3. Word-Spacing Property • 89
      4. Text-Decoration Property • 90
      5. Text-Align Property • 91
      6. Line-Height Property • 92
      7. Text-Transform Property • 93
      8. Vertical-Align Property • 94
   6. Using Font and Text Styles • 96
5. Chapter 4 : Positioning Elements • 100
   1. Understanding the Box Model • 102
      1. The Box Border • 103
      2. The Box Padding • 106
      3. The Box Margins • 106
      4. Collapsing Margins • 108
   2. How Big Is a Box? • 109
   3. Floating and Clearing • 114
      1. The Float Property • 114
      2. The Clear Property • 116
   4. The Position Property • 120
      1. Static Positioning • 120
      2. Relative Positioning • 121
      3. Absolute Positioning • 122
      4. Fixed Positioning • 123
      5. Positioning Context • 124
   5. The Display Property • 127
   6. Positioning/Display Example • 128
6. Chapter 5 : Basic Page Layout • 134
   1. Some Multi-Column Layouts • 136
   2. Introducing Stylib—the Stylin’ Library • 139
   3. Width Matters • 139
   4. Floated Versus Absolutely-Positioned Layouts • 140
      1. A Simple Two-Column Fixed-Width Layout • 141
      2. Know Your Inner Div • 146
      3. Prevent Unwanted Overflow • 146
      4. Freely Style Your Inner Divs • 147
      5. Styling the Text • 147
   5. A Simple Two-Column Liquid Layout • 147
      1. Use a Little Constraint • 149
      2. To Float or Not to Float? • 150
   6. A Three-Column Fixed-Width Layout • 151
   7. A Three-Column Liquid Layout • 155
   8. Making All the Columns the Same Length • 159
      1. Faux Columns • 160
      2. Programmatically Extend Columns (and Round Their Corners!) • 164
   9. An Absolutely-Positioned Layout • 168
7. Chapter 6 : Designing Interface Components • 174
   1. Styling Tables • 176
   2. Styling Forms • 189
      1. How Forms Work • 189
      2. Form Markup • 190
      3. Form Styling • 198
   3. Styling Lists and Menus • 205
      1. Lists • 205
      2. Creating CSS-Based Menus • 217
8. Chapter 7 : Building Web Pages • 230
   1. The Stylin’ Site • 232
   2. Setting Up the Folder Structure • 234
   3. Creating the Site Architecture • 236
      1. Copy the Required CSS Files from the Library • 239
      2. The @import Rule • 239
      3. The Text and Colors Style Sheet • 243
      4. The Page Markup • 248
      5. The Background Images • 251
      6. The Drop-Down Menus • 254
      7. The Transparent Sidebar Panel • 257
      8. Adding the Registration Form • 262
      9. Styling the Text • 265
   4. Conclusion • 271
9. Appendix A : XHTML Tags • 272
10. Appendix B : CSS Properties • 276
11. Index • 290

Back to Top