You are previewing HTML Utopia: Designing Without Tables Using CSS.
O'Reilly logo
HTML Utopia: Designing Without Tables Using CSS

Book Description

This book is for Web Developers who want to develop or migrate existing websites from using table-based layouts to using Cascading Style Sheets, which allows for faster page downloads, easier maintainence, faster Website re-designs and better search engine optimization.

HTML Utopia covers all aspects of using Cascading Style Sheets in Web Development, and is a must-read for Web Developers designing new sites or upgrading existing ones to use CSS layouts.

This book includes one of the most comprehensive CSS2 references on the market. Jeffrey Zeldman, web design guru and co-founder of the Web Standards Project says about this book "After reading this book, you will not only understand how to use CSS to emulate old-school, table driven web layouts, you will be creating Web sites that would be impossible to design using traditional methods".

Table of Contents

  1. Dedication
  2. About the Author
    1. Dan Shafer
    2. About the Technical Editor
    3. About SitePoint
    4. Notice of Rights
    5. Notice of Liability
    6. Trademark Notice
  3. Preface
    1. Who Should Read This Book?
    2. The Book's Website
    3. The SitePoint Forums
    4. The SitePoint Newsletters
    5. Your Feedback
    6. Acknowledgements
  4. Introduction to CSS
    1. Getting the Lay of the Land
      1. CSS in Context
      2. The Basic Purpose of CSS
      3. Why Most—But Not All—Tables Are Bad
      4. What Is CSS, Really?
      5. Parts of a CSS Rule
      6. Types of CSS Rules
      7. Why Bother?
      8. Summary
    2. Putting CSS Into Perspective
      1. What is CSS Good For?
      2. What CSS Alone Can't Do For You
      3. CSS and Web Accessibility
      4. CSS and the Ever-Shifting World of Browsers
      5. Summary
    3. Digging Below The Surface
      1. Applying CSS to HTML Documents
      2. Using Shorthand Properties
      3. How Inheritance Works in CSS
      4. Selectors and Structure of CSS Rules
      5. Expressing Measurements
      6. CSS Comments
      7. Summary
  5. Page Layout with CSS
    1. CSS Web Site Design
      1. Advantages of CSS Design
      2. CSS Success Stories
      3. Our Sample Site: Footbag Freaks
      4. Summary
    2. Building the Skeleton
      1. Enumerating Design Types
      2. The CSS Box Model
      3. The display Property
      4. CSS Positioning Basics
      5. Basic Three-Column Layout
      6. Summary
    3. Putting Things in Their Place
      1. More on Positioning Page Blocks
      2. Perfecting Multi-Column Layout
      3. The z-Index Property and Overlapping Content
      4. CSS Layout in Practice: Footbag Freaks
      5. Summary
  6. Styling Text and other Content with CSS
    1. Splashing Around a Bit of Color
      1. Who's in Charge Here?
      2. Color in CSS
      3. Interesting Uses of Color
      4. Summary
    2. Making Fonts Consistent
      1. How CSS Deals With Fonts
      2. The font-family Property
      3. The font-size Property
      4. Other Font Properties
      5. The font Shorthand Property
      6. Standard and Nonstandard Font Families
      7. Summary
    3. Text Effects and the Cascade
      1. Using the span Element
      2. Text Alignment as a Design Technique
      3. First-Line Indentation
      4. Horizontal and Vertical Spacing
      5. Text Decorations
      6. Shadowed Text Without Graphics
      7. Styling Hyperlinks
      8. Styling Lists with CSS
      9. Cascading and Inheritance
      10. Summary
    4. Adding Graphics to the Design
      1. Alignment of Images and Text
      2. Clipping HTML Content
      3. Summary
  7. Non-Obvious Uses of CSS
    1. Improving the User Experience
      1. Basic List Styling With CSS
      2. Enhancing the Look of the Menu
      3. Creating a Submenu within the Main Menu
      4. Modifying the Cursor on the Fly
      5. Using a Background Image as a Fixed Canvas
      6. Summary
    2. Validation and Backward Compatibility
      1. Validating Your CSS
      2. Adjusting for Backward Compatibility
      3. Keep the Quirks: DOCTYPE Switching
      4. Summary
  8. CSS Miscellany
    1. At-Rules
    2. Aural Style Sheets
    3. CSS and JavaScript
  9. CSS Property Reference
    1. azimuth
    2. background
    3. background-attachment
    4. background-color
    5. background-image
    6. background-position
    7. background-position-x, background-position-y
    8. background-repeat
    9. behavior
    10. border
    11. border-bottom, border-left, border-right, border-top
    12. border-bottom-color, border-left-color, border-right-color, border-top-color
    13. border-bottom-style, border-left-style, border-right-style, border-top-style
    14. border-bottom-width, border-left-width, border-right-width, border-top-width
    15. border-collapse
    16. border-color
    17. border-spacing
    18. border-style
    19. border-width
    20. bottom
    21. caption-side
    22. clear
    23. clip
    24. color
    25. content
    26. counter-increment
    27. counter-reset
    28. cue
    29. cue-after, cue-before
    30. cursor
    31. direction
    32. display
    33. elevation
    34. empty-cells
    35. filter
    36. float
    37. font
    38. font-family
    39. font-size
    40. font-size-adjust
    41. font-stretch
    42. font-style
    43. font-variant
    44. font-weight
    45. height
    46. ime-mode
    47. layout-flow
    48. layout-grid
    49. layout-grid-char
    50. layout-grid-line
    51. layout-grid-mode
    52. layout-grid-type
    53. layer-background-color
    54. layer-background-image
    55. left
    56. letter-spacing
    57. line-break
    58. line-height
    59. list-style
    60. list-style-image
    61. list-style-position
    62. list-style-type
    63. margin
    64. margin-bottom, margin-left, margin-right, margin-top
    65. marker-offset
    66. marks
    67. max-height, min-height
    68. max-width, min-width
    69. -moz-border-radius
    70. -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright
    71. -moz-opacity
    72. orphans
    73. outline
    74. outline-color
    75. outline-style
    76. outline-width
    77. overflow
    78. overflow-x, overflow-y
    79. padding
    80. padding-bottom, padding-left, padding-right, padding-top
    81. page
    82. page-break-after
    83. page-break-before
    84. page-break-inside
    85. pause
    86. pause-after, pause-before
    87. pitch
    88. pitch-range
    89. play-during
    90. position
    91. quotes
    92. richness
    93. right
    94. ruby-align
    95. ruby-overhang
    96. ruby-position
    97. scrollbar-base-color
    98. scrollbar-element-color
    99. size
    100. speak
    101. speak-header
    102. speak-numeral
    103. speak-punctuation
    104. speech-rate
    105. stress
    106. table-layout
    107. text-align
    108. text-align-last
    109. text-autospace
    110. text-decoration
    111. text-indent
    112. text-justify
    113. text-kashida-space
    114. text-overflow
    115. text-shadow
    116. text-transform
    117. text-underline-position
    118. top
    119. unicode-bidi
    120. vertical-align
    121. visibility
    122. voice-family
    123. volume
    124. white-space
    125. widows
    126. width
    127. word-break
    128. word-spacing
    129. word-wrap
    130. writing-mode
    131. z-index
    132. zoom
  10. Recommended Resources
    1. Books
    2. Useful Websites and Pages
  11. CSS Color Reference
  12. Index