The CSS Anthology

Rachel Andrew9780980576801, 0980576806

A practical guide on CSS (Cascading Style Sheets) for professionals and novices, that can be used both as a tutorial and read cover-to-cover or as a handy and practical reference book to common problems, solutions and effects. The Question and Answer format makes it easy for readers to solve their problems and learn more about common pitfalls and workarounds. CSS has been growing steadily in its adoption as a technology. CSS gives the developer complete control over how an HTML page looks without using cumbersome HTML tags- truly separating content from presentation

---

Table of contents :
The CSS Anthology……Page 3
Preface……Page 15
What’s Covered in This Book?……Page 16
The Code Archive……Page 17
Your Feedback……Page 18
Acknowledgements……Page 19
The Problem with HTML……Page 21
Defining Styles with CSS……Page 22
CSS Selectors……Page 25
Pseudo-Class Selectors……Page 26
Class Selectors……Page 27
Contextual Selectors……Page 28
Summary……Page 29
How do I replace font tags with CSS?……Page 31
The Units of Font Sizing……Page 32
Pixels……Page 33
Ems……Page 34
Absolute Keywords……Page 36
Relative Keywords……Page 37
Relative Sizing and Inheritance……Page 38
Discussion……Page 40
Solution……Page 41
Discussion……Page 42
When is Removing Underlines a Bad Idea?……Page 43
Solution……Page 44
Solution……Page 47
Solution……Page 49
Solution……Page 50
Solution……Page 52
How do I highlight text on the page without using font tags?……Page 53
Solution……Page 54
Solution……Page 55
Solution……Page 56
Solution……Page 57
Solution……Page 58
Discussion……Page 59
Solution……Page 60
Solution……Page 61
Discussion……Page 62
Solution……Page 63
Discussion……Page 64
Solution……Page 66
Solution……Page 67
Discussion……Page 68
How do I add comments to my CSS file?……Page 69
Solution……Page 70
Summary……Page 71
How do I add a border to images?……Page 73
Solution……Page 74
Solution……Page 76
Discussion……Page 77
Solution……Page 79
Keywords……Page 80
Unit Values……Page 81
Solution……Page 82
Solution……Page 83
Discussion……Page 84
How do I place text on top of an image?……Page 86
Discussion……Page 87
How do I add more than one background image to my document?……Page 88
Summary……Page 89
Navigation……Page 91
Solution……Page 92
Discussion……Page 94
How do I style a structural list as a navigation menu?……Page 97
Solution……Page 98
Discussion……Page 99
Solution……Page 102
Can I use CSS and lists to create a navigation system with sub-navigation?……Page 103
Solution……Page 104
Discussion……Page 105
Solution……Page 109
Discussion……Page 110
Solution……Page 112
Discussion……Page 114
Solution……Page 115
Discussion……Page 118
Solution……Page 123
Discussion……Page 124
Solution……Page 125
Discussion……Page 127
Summary……Page 129
Tabular Data……Page 131
Discussion……Page 132
Solution……Page 133
The caption Tag……Page 135
The th Tag……Page 136
Solution……Page 137
Discussion……Page 138
How do I stop spaces appearing between the cells of my table when I’ve added borders using CSS?……Page 139
Solution……Page 140
Solution……Page 141
Discussion……Page 142
Solution……Page 145
Solution……Page 148
Using JavaScript to Change Classes……Page 149
How do I display a calendar using CSS?……Page 151
Solution……Page 152
Discussion……Page 156
Summary……Page 163
Forms and User Interfaces……Page 165
Solution……Page 166
Discussion……Page 168
Solution……Page 170
Discussion……Page 171
Solution……Page 173
Solution……Page 174
Solution……Page 175
Discussion……Page 177
How do I lay out a two-column form using CSS instead of a table?……Page 178
Discussion……Page 180
Solution……Page 183
Discussion……Page 186
Solution……Page 189
Discussion……Page 190
Solution……Page 191
I have a form that allows users to enter data as if into a spreadsheet. How do I style this with CSS?……Page 193
Discussion……Page 197
Solution……Page 200
Discussion……Page 201
Summary……Page 202
Browser and Device Support……Page 203
I only have access to one operating system. How can I test in more of these browsers?……Page 204
Solution……Page 205
VMWare……Page 206
Dual Booting with Another Operating System……Page 207
Wine……Page 208
Solution……Page 209
Discussion……Page 210
Solution……Page 211
How do I test my site in a text-only browser?……Page 212
Discussion……Page 213
How do I hide CSS from Netscape 4?……Page 215
Discussion……Page 216
Solution……Page 218
Solution……Page 223
Solution……Page 225
The Box Model Hack……Page 226
The High Pass Filter……Page 229
Discussion……Page 230
Commenting Hacks……Page 231
Solution……Page 232
Discussion……Page 235
Solution……Page 237
Some of my content is appearing and disappearing in Internet Explorer 6! What should I do?……Page 240
Isolating the Problem……Page 241
Searching the Web……Page 243
Solution……Page 245
Solution……Page 246
Discussion……Page 247
Solution……Page 249
Discussion……Page 252
Creating the Print Styles……Page 254
Some browsers allow users to choose a style sheet. How do I add alternate style sheets to my site?……Page 257
Solution……Page 258
Discussion……Page 260
Solution……Page 261
Discussion……Page 264
Solution……Page 265
Discussion……Page 268
Summary……Page 270
CSS Positioning and Layout……Page 271
Can I make an inline element display as if it were block-level, and vice-versa?……Page 272
Solution……Page 273
Discussion……Page 274
Solution……Page 275
Discussion……Page 278
Solution……Page 279
Discussion……Page 280
How do I stop the next element moving up when I use float?……Page 282
Solution……Page 283
Discussion……Page 284
How do I align my logo and strapline to the left and right without using a table?……Page 287
Solution……Page 288
Discussion……Page 289
Solution……Page 292
Discussion……Page 294
How do I center a block on the page?……Page 297
Solution……Page 298
How do I create a liquid, two-column layout with the menu on the left, and the content on the right?……Page 299
Solution……Page 300
Discussion……Page 303
Size and Position the Menu……Page 304
Positioning the Content……Page 305
Solution……Page 307
Solution……Page 308
Discussion……Page 314
How do I create a three-column CSS layout?……Page 320
Solution……Page 321
Discussion……Page 324
An Alternative Method for Three-Column Layouts……Page 327
How do I add a footer that works well, using CSS?……Page 333
Solution……Page 334
Discussion……Page 337
How do I display a thumbnail gallery without using a table?……Page 340
Solution……Page 341
Discussion……Page 342
Summary……Page 346
Experimentation, Browser Specific CSS, and Future Techniques……Page 347
Solution……Page 348
Discussion……Page 349
Solution……Page 350
Discussion……Page 352
Solution……Page 355
The Style Sheet……Page 357
The Document……Page 358
Can I create a page footer that remains fixed in position, like a frame, using CSS?……Page 359
Solution……Page 360
Discussion……Page 363
Solution……Page 367
Discussion……Page 369
Solution……Page 373
Discussion……Page 375
How do I create cross-browser, rounded corners using CSS?……Page 376
Solution……Page 377
Discussion……Page 379
Rounded Corners Using Images……Page 381
How do I make elements translucent both in Mozilla-based browsers, and in Internet Explorer?……Page 383
Solution……Page 384
Discussion……Page 385
Solution……Page 387
Discussion……Page 388
Solution……Page 389
Discussion……Page 390
Solution……Page 391
Discussion……Page 393
Solution……Page 395
Summary……Page 396
Index……Page 397