Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Pro CSS Techniques
Jeff Croft, Ian Lloyd, and Dan Rubin
732X00FMFINAL.qxd 11/1/06 3:08 PM Page i
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Pro CSS Techniques
Copyright © 2006 by Jeff Croft, Ian Lloyd, and Dan Rubin
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval
system, without the prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 978-1-59059-732-3
ISBN-10 (pbk): 1-59059-732-X
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence
of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark
owner, with no intention of infringement of the trademark.
Lead Editor: Chris Mills
Technical Reviewer: Wilson Miner
Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Gennick,
Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Dominic Shakeshaft, Jim Sumser,
Keir Thomas, Matt Wade
Project Manager: Beth Christmas
Copy Edit Manager: Nicole Flores
Copy Editor: Liz Welch
Assistant Production Director: Kari Brooks-Copony
Production Editor: Katie Stence
Compositor and Artist: Kinetic Publishing Services, LLC
Proofreader: Lori Bring
Indexer: Broccoli Information Management
Cover Designer: Kurt Krames
Manufacturing Director: Tom Debolski

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
■
CHAPTER 2 The Language of Style Sheets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
■
CHAPTER 3 Specificity and the Cascade
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
■
CHAPTER 4 The Browsers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
■
CHAPTER 5 Managing CSS Files
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
■
CHAPTER 6 Hacks and Workarounds
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
■
CHAPTER 7 CSS Layouts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
■
CHAPTER 8 Creating Common Page Elements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
■
CHAPTER 9 Typography
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
■
CHAPTER 10 Styling Tables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
■
CHAPTER 11 Styling Forms

Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv
■
CHAPTER 1
The Promise of CSS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
The Advantages of Using CSS for Style
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Semantic (X)HTML: Markup with Meaning
. . . . . . . . . . . . . . . . . . . . . . . . . . . 2
What Is Semantic Markup?
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
How Does Writing Semantic Markup Help You
in the Real World?
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Creating Semantically Rich (X)HTML Markup
. . . . . . . . . . . . . . . . . . . . 4
Avoiding Nonstructural Tags
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Avoiding “Divitis” and “Classitis”
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Choosing Your Markup Language and DOCTYPE
. . . . . . . . . . . . . . . . . . . . . . 7
HTML vs. XHTML: Why the Decision
Does—and Doesn’t—Matter
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
DOCTYPE: The Most Underappreciated Tag of All
. . . . . . . . . . . . . . . . . 8
The Three Layers of a Modern Web Document
. . . . . . . . . . . . . . . . . . . . . . . 9

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Descendant Selectors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Child Selectors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Adjacent Sibling Selectors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Attribute Selectors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Presence of an Attribute
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Exact Attribute Value
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Partial Attribute Values
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Particular Attribute Selector
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Pseudo-Classes and Pseudo-Elements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Pseudo-Classes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Pseudo-Elements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Daisy-Chaining Selectors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Grouping Selectors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Summary
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
■

Understanding the Scoring
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
How the Cascade, Inline Styles, and
!important Affect Our Scoring
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Real-World Examples
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Summary
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
■
CONTENTSviii
732X00FMFINAL.qxd 11/1/06 3:08 PM Page viii
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
■
CHAPTER 4
The Browsers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
A Little History
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
The Standards Movement
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
The Current (Desktop) Browser Landscape
. . . . . . . . . . . . . . . . . . . . . . . . . 60
Firefox
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Safari
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Opera
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Internet Explorer

. . . . . . . . . . . . . . . . . . . 76
Saving Time with Shorthand
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Grouping and Notating CSS Rules with Comments
. . . . . . . . . . . . . . . . . . . 78
CSS Comment Syntax
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Code Notations
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Comments for Metadata
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Comments for “Code Glossaries”
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Comments for Grouping
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Ordering CSS Rules
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
General to Specific
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
By Order in Which They Appear
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
By Page or Section of the Site
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Creating a Reusable Framework
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
The Mass Reset
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Summary
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
■

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
May I Have the Envelope Please?
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Filters: The Sophisticated, High-Society Hacks
. . . . . . . . . . . . . . . . . . 96
IE 7 “Fixes” You Need to Be Aware Of
. . . . . . . . . . . . . . . . . . . . . . . . . 97
Hacking a Real-World Layout
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
The Layout
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
The Hack
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
A Sample Layout That Doesn’t Need Hacks
. . . . . . . . . . . . . . . . . . . . . . . . 100
The Design
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
The Markup
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
The Style Sheet
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Adjusting for IE 6
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Summary
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
■
CHAPTER 7
CSS Layouts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
The Never-Ending Debate: What’s the Perfect Page Width?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Floating Nearly Everything
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Using Easy Clearing
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Using overflow to Control Floats
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Negativity Is Good for You
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Flexibility of CSS Layouts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Practical Layout Examples
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Style Switchers: Giving the User Control
. . . . . . . . . . . . . . . . . . . . . . 160
Summary
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
■
CHAPTER 8
Creating Common Page Elements
. . . . . . . . . . . . . . . . . . . . . . . . 163
Styling a Page Header
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Using a Small Logo
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Mixing and Matching Foreground and Background Images
. . . . . . 164
Positioning the Logo and Tagline
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Adding the Background Image

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Sprites: Using One Image for All States
. . . . . . . . . . . . . . . . . . . . . . . 179
Remote Image Swaps
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Remote Image Swapping and Sprites Combined
. . . . . . . . . . . . . . . 181
Rounded-Corner Boxes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Creating a Fixed-Width Rounded Box
. . . . . . . . . . . . . . . . . . . . . . . . . 183
Creating a Rounded Box That Scales
. . . . . . . . . . . . . . . . . . . . . . . . . 185
Making the Background Images
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Conclusion
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
■
CONTENTS xi
732X00FMFINAL.qxd 11/1/06 3:08 PM Page xi
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
■
CHAPTER 9
Typography
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Typeface Classification
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Serif (font-family: serif;)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Sans Serif (font-family: sans-serif;)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Relative-Size Keywords
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Using Pixels to Size Text
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Using Percentages and Ems to Size Text
. . . . . . . . . . . . . . . . . . . . . . 204
Richard Rutter’s 62.5 Percent Hack
. . . . . . . . . . . . . . . . . . . . . . . . . . 204
Font Styles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Transforming Text
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Font Variants
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Setting Blocks of Text
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Line Length
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Leading (or line-height)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Kerning
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Text Alignment and Justification
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Block Paragraphs vs. Traditional Paragraphs
. . . . . . . . . . . . . . . . . . 209
Indicating New Paragraphs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Setting Quotations

. . . . . . . . . . . . . . . . . . . . . . . . . . 222
The thead, tfoot, and tbody Elements
. . . . . . . . . . . . . . . . . . . . . . . . . 223
Columns
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
The summary Attribute
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
All Marked Up
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Adding Style
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Table Borders
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Zebra Tables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Styling the Caption
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Ideas for Going Further
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Summary
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
■
CHAPTER 11
Styling Forms
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Styling Form Widgets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Laying Out Forms
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Semantic (X)HTML for Forms

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Vertical Navigation Links
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Padding Out the Links
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Link Hover Behavior
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
The Complete Page
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Titling and Hiding Groups of Links
. . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Using Contextual Selectors to Show Location
. . . . . . . . . . . . . . . . . . . . . . 271
Styling Definition Lists
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Example 1: Schedule of Events
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Example 2: A Critique of Goods
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Summary
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
■
CHAPTER 13
Styling for Print and Other Media
. . . . . . . . . . . . . . . . . . . . . . . . . 277
Introducing Media Types
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
The Useful Media Types
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
The Not-So-Useful Media Types

. . . . . . . . . . . . . . . 287
Advanced Print CSS Techniques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Inserting URLS in Printed Pages
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Selective Printing Using the DOM and CSS
. . . . . . . . . . . . . . . . . . . . 289
Style Sheets for Other Media Types
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
The Projection Media Type
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
The Aural Media Type
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
The Handheld Media Type
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
The All Media Type
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Summary
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
■
CONTENTSxiv
732X00FMFINAL.qxd 11/1/06 3:08 PM Page xiv
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
■
CHAPTER 14
Everything Falls Apart
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
What to Do When You Don’t Know What Went Wrong
. . . . . . . . . . . . . . . . 293
Useful Browser Add-ons and Utilities

. . . . . . . . . . . . . . . . . 308
Creating the Layout
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Getting It Right in Firefox
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Woe Is IE
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Adding the Subnav
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Why You Shouldn’t Group Your Hacks
. . . . . . . . . . . . . . . . . . . . . . . . . 321
Summary
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
■
APPENDIX A
CSS Reference
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
CSS Units, Keywords, and Other Property Values
. . . . . . . . . . . . . . . . . . . 323
Factors and Integers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Colors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Fonts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Length
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Percentages
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Position Keywords

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Printing
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
■
APPENDIX B
CSS Specificity Chart
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Element Selectors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Descendant, Child, and Adjacent Sibling Selectors
. . . . . . . . . . . . . . . . . . 352
Attribute Selectors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Pseudo-Class Selectors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Pseudo-Elements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
■
APPENDIX C
Browser Grading Chart
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Background
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Border
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Margin
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Padding
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Dimension

designer at World Online, Jeff works on such award-winning standards-
based sites as and . Jeff also runs
a popular blog and personal site at , where he writes
about many topics, including modern web and graphic design.
In addition to his work with World Online, Jeff has worked at two major
universities in an effort to bring web standards to the education sector, and
he has completed many freelance and contract jobs for various clients.
When he’s not hunched over a computer, Jeff enjoys photography, music, film, television,
and a good night out on the town.
■
IAN LLOYD runs Accessify.com, a site dedicated to promoting web accessi-
bility and providing tools for web developers. His personal site, Blog
Standard Stuff, ironically, has nothing to do with standards for blogs (it’s
a play on words), although there is an occasional standards-related gem to
be found there.
Ian works full-time for Nationwide Building Society, where he tries his
hardest to influence standards-based design (“to varying degrees!”). He is
a member of the Web Standards Project, contributing to the Accessibility
Task Force. Web standards and accessibility aside, he enjoys writing about his trips abroad and
recently took a year off from work and all things web but then ended up writing more in his year
off than he ever had before. He finds most of his time being taken up by a demanding old lady
(relax, it’s only his old Volkswagen camper van).
Ian is married to Manda and lives in the oft-mocked town of Swindon (where the “boring
lot” in the UK version of The Office are from) next to a canal that the locals like to throw shop-
ping carts into for fun.
Ian is the author of Build Your Own Web Site the Right Way with HTML & CSS (SitePoint,
2006), which teaches web standards–based design to the complete beginner. He has also been
technical editor on a number of other books published by Apress, friends of ED, and SitePoint.
■
DAN RUBIN spends his days blending music, design, typography, and web

732X00FMFINAL.qxd 11/1/06 3:08 PM Page xix
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.