com and iHealthfocus.com.
In 1986, he started PRINTZ Electronic Design, which was the ?¬? rst
all-computerized design house in San Francisco. Charles has worked
as a Web design consultant for such companies as Wells Fargo, ESPN
Videogames, and the University of California, San Francisco. An
accomplished speaker and instructor, he has taught multimedia and
interface design and spoken at many industry conferences.
Charles lives in Charleston, SC, with his wife, Beth, and two
daughters. In his spare time, he composes and records music in
his home studio.
Photo ??“ Lowell Downey,
Art and Clarity, Napa, CA
Contents
Introduction ??? xii
CHAPTER 1 : XHTML: GIVING STRUCTURE TO CONTENT ??? 2
Web Standards ??? 4
Even Today, IDWIMIE ??? 4
Content, Structure, and Presentation ??? 5
The Times They Are A-Changing ??? 7
The Way We Were... ??? 7
The Future Just Happened ??? 9
XHTML and How To Write It ??? 10
XHTML??”The Rules ??? 11
An XHTML Template ??? 16
Marking Up Your Content ??? 18
Document Flow??”Block and Inline Elements ??? 18
Document Hierarchy: Meet the XHTML Family ??? 24
CHAPTER 2 : HOW CSS WORKS ??? 26
The Three Ways to Style Your Document ??? 28
Inline Styles ??? 28
Embedded Styles ??? 29
Linked Styles ??? 30
Anatomy of a CSS Rule ??? 32
Writing CSS Rules ??? 33
Targeting Tags Within the Document Hierarchy ??? 34
Using Contextual Selectors ??? 34
Working with Child Selectors ??? 38
Adding Classes and IDs ??? 39
Introducing IDs ??? 43
The Difference Between IDs and Classes ??? 44
Specialized Selectors ??? 45
Summary of Selectors ??? 48
Pseudo-Classes ??? 49
Anchor Link Pseudo-Classes ??? 49
Other Useful Pseudo-Classes ??? 51
ix
Pseudo-Elements ??? 52
Inheritance ??? 54
The Cascade ??? 55
Sources of Styles ??? 55
The Cascade Rules ??? 56
Rule Declarations ??? 60
Numerical Values ??? 60
Color Values ??? 63
CHAPTER 3: STYLIN??™ FONTS AND TEXT ??? 66
Specifying Fonts in CSS ??? 68
Introducing Font Collections ??? 69
Exploring Font Families ??? 71
Using Embedded Styles (for Now) ??? 73
Setting the Font Family for the Entire Page ??? 74
Sizing Fonts ??? 76
Inherited Styles in Nested Tags ??? 79
Font Properties ??? 81
Font-Style Property ??? 81
Font-Weight Property ??? 82
Font-Variant Property ??? 83
The Font Property Shorthand ??? 84
Text Properties ??? 84
Text-Indent Property ??? 86
Letter-Spacing Property ??? 88
Word-Spacing Property ??? 89
Text-Decoration Property ??? 90
Text-Align Property ??? 91
Line-Height Property ??? 92
Text-Transform Property ??? 93
Vertical-Align Property ??? 94
Using Font and Text Styles ??? 96
CONTENTS
STYLIN??™ WITH CSS x
CHAPTER 4 : POSITIONING ELEMENTS ??? 100
Understanding the Box Model ??? 102
The Box Border ??? 103
The Box Padding ??? 106
The Box Margins ??? 106
Collapsing Margins ??? 108
How Big Is a Box? ??? 109
Floating and Clearing ??? 114
The Float Property ??? 114
The Clear Property ??? 116
The Position Property ??? 120
Static Positioning ??? 120
Relative Positioning ??? 121
Absolute Positioning ??? 122
Fixed Positioning ??? 123
Positioning Context ??? 124
The Display Property ??? 127
Positioning/Display Example ??? 128
CHAPTER 5 : BASIC PAGE LAYOUT ??? 134
Some Multi-Column Layouts ??? 136
Introducing Stylib??”the Stylin??™ Library ??? 139
Width Matters ??? 139
Floated Versus Absolutely-Positioned Layouts ??? 140
A Simple Two-Column Fixed-Width Layout ??? 141
Know Your Inner Div ??? 146
Prevent Unwanted Over?¬‚ ow ??? 146
Freely Style Your Inner Divs ??? 147
Styling the Text ??? 147
A Simple Two-Column Liquid Layout ??? 147
Use a Little Constraint ??? 149
To Float or Not To Float? ??? 150
A Three-Column Fixed-Width Layout ??? 151
A Three-Column Liquid Layout ??? 155
xi
Making All the Columns the Same Length ??? 159
Faux Columns ??? 160
Programmatically Extend Columns (and Round Their
Corners!) ??? 164
An Absolutely-Positioned Layout ??? 168
CHAPTER 6 : DESIGNING INTERFACE COMPONENTS ??? 174
Styling Tables ??? 176
Styling Forms ??? 189
How Forms Work ??? 189
Form Markup ??? 190
Form Styling ??? 198
Styling Lists and Menus ??? 205
Lists ??? 205
Creating CSS-Based Menus ??? 217
CHAPTER 7 : BUILDING WEB PAGES ??? 230
The Stylin??™ Site ??? 232
Setting Up the Folder Structure ??? 234
Creating the Site Architecture ??? 236
Copy the Required CSS Files from the Library ??? 239
The @import Rule ??? 239
The Text and Colors Style Sheet ??? 243
The Page Markup ??? 248
The Background Images ??? 251
The Drop-Down Menus ??? 254
The Transparent Sidebar Panel ??? 257
Adding the Registration Form ??? 262
Styling the Text ??? 265
Conclusion ??? 271
APPENDIX A : XHTML TAGS ??? 272
APPENDIX B : CSS PROPERTIES ??? 276
INDEX ??? 290
CONTENTS
Introduction
It??™s hard to believe it??™s been over three years since I wrote the ?¬? rst
edition of Stylin??™ with CSS.
Pages:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25