This book is aimed at people who need to work with CSS: web designers and developers who’ve seen the cool CSS designs out there, but are short on the time to wade through masses of theory and debate in order to create a site. Each problem is solved with a working solution that can be implemented as it is or used as a springboard to creativity. As a whole, this book isn’t a tutorial.While Chapter 1 covers the very basics of CSS, and the early chapters cover simpler techniques than those that follow, you’ll find the examples easier to grasp if you have a basic grounding in CSS.
Author(s): Rachel Andrew
Edition: Fourth Edition
Publisher: SitePoint
Year: 2012
Language: English
Pages: 400
Front Cover......Page 1
Summary of Contents......Page 2
The CSS3 Anthology......Page 3
Biographies......Page 5
Table of Contents......Page 7
Who Should Read This Book......Page 13
What’s in This Book......Page 14
The Code Archive......Page 15
The SitePoint Podcast......Page 16
Markup Samples......Page 17
Tips, Notes, and Warnings......Page 19
Making a Start with CSS......Page 21
How do I define styles with CSS?......Page 22
Inline Styles......Page 23
External Stylesheets......Page 24
CSS Syntax......Page 26
Type Selectors......Page 27
Class Selectors......Page 28
Descendant Selectors......Page 29
Child Selectors......Page 30
Adjacent Selectors......Page 31
Links......Page 32
Last Child......Page 33
Only Child......Page 34
First Letter......Page 35
Before......Page 36
Attribute Selectors......Page 37
Vendor-specific Extensions......Page 38
How does the browser decide which styles to apply?......Page 40
A Decent Selection......Page 42
Text Styling and Other Basics......Page 43
Discussion......Page 44
Points and Picas......Page 46
Pixels......Page 47
Exes......Page 48
Absolute-size Keywords......Page 49
Relative-size Keywords......Page 50
Discussion......Page 51
Relative Sizing and Inheritance......Page 52
Solution......Page 53
Discussion......Page 54
Solution......Page 56
Ordering Pseudo-class Declarations......Page 58
Solution......Page 59
Solution......Page 61
Discussion......Page 62
Solution......Page 63
Solution......Page 64
How do I remove the large gap between an h1 element and the following paragraph?......Page 66
Using an Adjacent Selector......Page 67
Solution......Page 69
How do I alter the line height (leading) of my text?......Page 70
Solution......Page 71
Solution......Page 72
Discussion......Page 73
How do I indent text?......Page 74
A One-liner......Page 75
Solution......Page 76
Solution......Page 77
Discussion......Page 78
Solution......Page 79
Discussion......Page 80
Solution......Page 81
Discussion......Page 82
Solution......Page 83
Discussion......Page 84
Solution......Page 85
How do I remove the indented left-hand margin from a list?......Page 86
Discussion......Page 87
Solution......Page 88
Solution......Page 89
Solution......Page 90
Discussion......Page 91
Solution......Page 92
Browser Compatibility for Fonts You Can Upload to Your Server......Page 93
If Your Font is not Licensed for Web Use......Page 94
Working with Style......Page 95
Solution......Page 97
Solution......Page 100
Discussion......Page 102
Solution......Page 103
Solution......Page 105
Keywords......Page 106
Percentage Values......Page 107
Solution......Page 108
Discussion......Page 109
Solution......Page 110
Solution......Page 113
Discussion......Page 115
Combining the Two Approaches......Page 116
Solution......Page 117
Solution......Page 119
Discussion......Page 120
Solution......Page 122
Discussion......Page 125
HSLA Color......Page 127
Solution......Page 128
Discussion......Page 129
How do I create rounded corners on an element?......Page 130
Discussion......Page 131
Solution......Page 132
Discussion......Page 134
If You Set a Foreground Color, You Need to Set a Background Color, and Vice Versa......Page 135
Backgrounds Should Only Be Decorative......Page 136
In the Picture?......Page 137
Navigation......Page 139
Solution......Page 140
Discussion......Page 141
Solution......Page 145
Discussion......Page 146
Solution......Page 147
Discussion......Page 150
Solution......Page 153
Discussion......Page 155
Solution......Page 158
Discussion......Page 160
Solution......Page 163
Discussion......Page 165
Solution......Page 166
Solution......Page 168
Discussion......Page 169
Solution......Page 172
Discussion......Page 174
Using Opacity for Rollover Effects......Page 177
Solution......Page 178
Discussion......Page 181
Solution......Page 185
Discussion......Page 188
Navigating Your Way to Success......Page 194
Tabular Data......Page 195
Discussion......Page 196
How do I make my tabular data accessible?......Page 197
The caption element......Page 199
How do I add a border to a table?......Page 200
Discussion......Page 202
Solution......Page 205
How do I display spreadsheet data in an attractive and usable way?......Page 206
Solution......Page 207
Discussion......Page 208
Solution......Page 211
How do I change a row's background color when the mouse hovers over it?......Page 215
Discussion......Page 216
Solution......Page 217
Discussion......Page 218
How do I display a calendar using CSS?......Page 220
Solution......Page 221
Discussion......Page 225
How do I create a pricing table?......Page 233
Solution......Page 234
Discussion......Page 238
Tables Topped......Page 242
Forms and User Interfaces......Page 243
Solution......Page 244
Discussion......Page 246
Solution......Page 250
Discussion......Page 252
Solution......Page 253
What additional elements and attributes are part of the HTML5 forms spec?......Page 255
Solution......Page 256
Discussion......Page 258
Can we style the validation messages using CSS?......Page 259
Form Input Types......Page 260
Solution......Page 262
Discussion......Page 266
Solution......Page 268
Discussion......Page 272
Solution......Page 279
Discussion......Page 282
Solution......Page 284
Required fields......Page 285
You’ve Got Form......Page 286
Cross-browser Techniques......Page 287
Solution......Page 288
Solution......Page 289
Support Doesn’t Mean “Looks the Same”......Page 290
Solution......Page 294
Discussion......Page 297
Discussion......Page 299
How do I achieve rounded corners in browsers without support for border-radius?......Page 300
Solution......Page 301
Discussion......Page 303
Solution......Page 304
Fixing the Lack of min-height Support in IE6......Page 305
Adding Position: Relative to Elements......Page 306
Solution......Page 307
Discussion......Page 308
Virtual Machines on OS X......Page 309
Browser “Snapshot” Tools......Page 310
Discussion......Page 312
Solution......Page 313
What do I do if I hit a CSS issue I’m unable to fix?......Page 314
Isolate the Problem......Page 315
Ask for Help......Page 316
Solution......Page 318
All Users Catered For......Page 319
Solution......Page 321
Solution......Page 322
Inline Elements......Page 325
Solution......Page 326
Discussion......Page 331
Solution......Page 334
Discussion......Page 337
How do I stop the next item floating up once I’ve floated an element?......Page 338
Solution......Page 339
Solution......Page 340
Discussion......Page 344
Solution......Page 346
Solution......Page 347
Discussion......Page 350
Positioned: Absolutely......Page 355
CSS for Layout......Page 357
Solution......Page 358
Discussion......Page 363
How do I create a two-column layout with a footer?......Page 367
Solution......Page 368
Discussion......Page 372
Clearing Inside Containers......Page 374
Floating the Outer Container......Page 375
Clearfix Hack......Page 376
Solution......Page 377
Solution......Page 380
Discussion......Page 383
How do I create a design that works well on mobile devices?......Page 386
Solution......Page 387
Discussion......Page 391
Adding Some Device-specific Fixes......Page 396
Solution......Page 397
Discussion......Page 401
Solution......Page 402
Discussion......Page 413
Solution......Page 421
Discussion......Page 424
Flexible Box Layout Module......Page 426
CSS Multicolumn Layout Module......Page 427
A Design for Life......Page 428
Index......Page 429
CSS Quiz......Page 441
Friends of SitePoint......Page 442
Back Cover......Page 443
