Pro CSS Techniques: Real World CSS Techniques for Real World CSS Professionals

Description

Pro CSS Techniques is the ultimate CSS book for the modern web developer. If you've already got web design and development basics under your belt, but want to take your knowledge to the next level and unleash the full power of CSS in your web sites, then this is the book for you. It is a collection of proven CSS techniques that you can use daily to get the most out of the time you spend on your projects, from start to finish.

Every topic is presented in an informative tutorial style, with each point backed up by several real-world examples and case studies. The authors cover all the essential areas of CSS development, like browser support (including IE7), hacks and filters, code management, advanced layouts and styling, typography, and much more. CSS levels 1, 2, and 3 are given a full treatment. The book also includes several reference sections that allow you to look up details quickly and easily.

The book aims to help you in four areas: maintainability, compatibility, reusability, and practicality. You'll be able to keep your code organized and easy to maintain, avoiding browser issues before they crop up (or hacking around them when absolutely necessary). You'll learn to get the most out of your styles with inheritance, and by using techniques you can build on. And you'll learn to use what works in the real world, without getting too caught up in ideals, because you can always optimize later.

CONTENTS:

About the Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
About the Tech Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
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
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

CHAPTER 2 The Language of Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Adding Style to Your (X)HTML Document. . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
The Tag. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Using Multiple Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
The style Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Creating a Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Element Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Class Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
ID Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
vii
(X)HTML's Family Tree. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
CHAPTER 3 Specificity and the Cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Selectors: Simple and Combined . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Universal Star Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Element Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Descendant, Child, and Adjacent Sibling Selectors . . . . . . . . . . . . . . 30
Pseudo-Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Link and Dynamic Pseudo-Classes:
A LoVe/HAte Relationship . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Pseudo-Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
The Cascade: Calculating Specificity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
How the CSS 2.1 Specification Describes the Cascade . . . . . . . . . . 37
Translating the Spec . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Keeping Score . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
A Series of Basic Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Understanding the Scoring. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
How the Cascade, Inline Styles, and
!important Affect Our Scoring. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Real-World Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Other Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Dealing with Older Desktop Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Graded Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
On Choosing a Development Browser . . . . . . . . . . . . . . . . . . . . . . . . . 69
Browsers for the Mobile Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

CHAPTER 5 Managing CSS Files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Style Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
The Path to Your CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Using Multiple Files As One Style Sheet. . . . . . . . . . . . . . . . . . . . . . . . 74
Conventions for class and id Names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Formatting CSS Declarations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
One Line vs. One Property Per Line . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Beyond Organized: Ordering Your Properties . . . . . . . . . . . . . . . . . . . 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

CHAPTER 6 Hacks and Workarounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Using a Standards First Approach. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Leave IE/Win for Last, Then Hack Like a Surgeon . . . . . . . . . . . . . . . 86
Wait, You Forgot a Few Browsers!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
To Hack or Not to Hack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
So When Should You Use a Hack? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
No Need to Get Dramatic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Keep Hacks Separated and Commented. . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
IE Conditional Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Gotta Keep 'Em Separated . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
You Might Not Even Need a Hack!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Hmm, What Does This Bit of Code Do? . . . . . . . . . . . . . . . . . . . . . . . . 89
A Few Good Hacks (and Workarounds) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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? . . . . . . . . . . 111
The Fixed-Width Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
The Liquid Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Elastic Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Resolution-Dependent Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Two Columns or Three? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Changing Layouts at the Flick of a Switch . . . . . . . . . . . . . . . . . . . . . . . . . 135
Switching the Design to a Splash Page . . . . . . . . . . . . . . . . . . . . . . . 141
Switching to a Section Entry Page . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Faux Columns: Using Background Images to Suggest Columns. . . . . . . 145
Faux Columns to the Rescue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Scalable Text + Fixed Background Widths = Trouble . . . . . . . . . . . 147
Fixed-Width Layout: Column Resizes with Font Resize. . . . . . . . . . 147
Managing Floats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Adding in the Reflection Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Disabling the Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Adding Site Search and Sitewide Header Links . . . . . . . . . . . . . . . . 168
Floating the Links into Place . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Positioning the Search Box. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Creating CSS-Based Tabbed Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Creating the Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Positioning the Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Styling the Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Breadcrumb Trails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Showing the Hierarchy of the Breadcrumb Trail. . . . . . . . . . . . . . . . 175
Styling the Hierarchical Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Images and Hover Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
The Simple Image Swap. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Avoiding Divitis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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

CHAPTER 9 Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Typeface Classification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Serif (font-family: serif;) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Sans Serif (font-family: sans-serif;) . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Monospace (font-family: monospace;). . . . . . . . . . . . . . . . . . . . . . . . 193
Cursive (font-family: cursive;) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Fantasy (font-family: fantasy;) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Typeface Selection with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Using Generic Font Families. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Using a Specific Typeface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
The Typeface Problem on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
The Microsoft Vista Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Font Weights. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Assigning font-weight with Keywords . . . . . . . . . . . . . . . . . . . . . . . . 200
Assigning font-weight with Numerical Values . . . . . . . . . . . . . . . . . 200
bolder and lighter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
The Final Word on Font Weights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Sizing Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Absolute-Size Keywords. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Headings and Subheads. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Header Margins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Image Replacement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Complete Example. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

CHAPTER 10 Styling Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Table Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
The caption Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
The th Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
The abbr Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
The scope Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Assigning scope in Complex Tables . . . . . . . . . . . . . . . . . . . . . . . . . . 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. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Applying Basic Styling to the Form. . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Intermediate Form Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Aligning Labels and Their Fields in the Middle . . . . . . . . . . . . . . . . . 249
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

CHAPTER 12 Styling Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
The Basic List. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Removing Browser Default Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Flattening the List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Custom Bullets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Styled Ordered Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Custom Bullets with Background Images . . . . . . . . . . . . . . . . . . . . . 261
Right-Aligned Bullets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Specifying the Media Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Adding a media Attribute to the link Element . . . . . . . . . . . . . . . . . . 279
Adding a media Attribute to the @import Statement. . . . . . . . . . . . 279
Adding the Media to Specific Selectors within
a Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Creating a Print Style Sheet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
What Do You Put in a Print CSS File? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Resetting Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Hiding Navigation and Other Interactive Elements. . . . . . . . . . . . . . 283
Correcting Minor Issues Inherited from the
Screen Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Tips for Even Better Printed Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Things to Watch Out For . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Checking Your Page Width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Printing Errors with CSS Positioning. . . . . . . . . . . . . . . . . . . . . . . . . . 286
Getting Feedback About Your Funny Printouts . . . . . . . . . . . . . . . 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

CHAPTER 14 Everything Falls Apart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
What to Do When You Don't Know What Went Wrong . . . . . . . . . . . . . . . . 293
Useful Browser Add-ons and Utilities . . . . . . . . . . . . . . . . . . . . . . . . . 294
Validate Markup and Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Disable Styles in Chunks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Disable Hacks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Create Minimal Test Cases to Simplify Problems . . . . . . . . . . . . . . . 299
Common CSS Mistakes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Specificity Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Image Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Link Order (LoVe/HAte) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Clear All Floats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Common CSS Bugs (in IE) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Doubled Float-Margin Bug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Three-Pixel Jog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Absolute Positioning in a Relative Container. . . . . . . . . . . . . . . . . . . 306
Whitespace Bug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Solving Problems in the Real World: A Walkthrough . . . . . . . . . . . . . . . . . 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
URLs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Properties That Accept Multiple Instances . . . . . . . . . . . . . . . . . . . . 325
Inherit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

CSS Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Typefaces, Text Color, Text Size, and Similar Properties . . . . . . . . . 326
Type Spacing and Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Positioning. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Background Colors, Images, and Similar Properties . . . . . . . . . . . . 340
Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Tables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Generated Content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
cursor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354

APPENDIX C Browser Grading Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Margin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Dimension. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
List and Marker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Classification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Pseudo-Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Pseudo-Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361