CSS: The Definitive Guide: Visual Presentation for the Web

1088 Pages·2017·73.43 MB·English

by  Eric A. Meyer

C SS
The Defnitive Guide
VISUAL PRESENTATION FOR THE WEB
Eric A. Meyer & Estelle Weyl
4th Edition
FOURTH EDITION
CSS: The Defnitive Guide
Visual Presentation for the Web
Eric A. Meyer and Estelle Weyl
Beijing Boston Farnham Sebastopol Tokyo
CSS: The Defnitive Guide
by Eric A. Meyer and Estelle Weyl
Copyright © 2018 Eric Meyer, Estelle Weyl. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are
also available for most titles (http://oreilly.com/safari). For more information, contact our corporate/insti‐
tutional sales department: 800-998-9938 or
To Kat, Carolyn, Rebecca, and Joshua.
—E.M.
To Amie.
—E.W.
Table of Contents
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
1. CSS and Documents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
A Brief History of (Web) Style 1
Elements 3
Replaced and Nonreplaced Elements 3
Element Display Roles 3
Bringing CSS and HTML Together 7
The link Tag 8
The style Element 12
The @import Directive 13
HTTP Linking 14
Inline Styles 15
Stylesheet Contents 16
Markup 16
Rule Structure 16
Vendor prefixing 17
Whitespace Handling 18
CSS Comments 19
Media Queries 20
Usage 20
Simple Media Queries 21
Media Types 21
Media Descriptors 22
Media Feature Descriptors and Value Types 24
Feature Queries 25
Summary 28
v
2. Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Basic Style Rules 29
Element Selectors 30
Declarations and Keywords 31
Grouping 33
Grouping Selectors 34
Grouping Declarations 35
Grouping Everything 37
New Elements in Old Browsers 38
Class and ID Selectors 38
Class Selectors 39
Multiple Classes 41
ID Selectors 43
Deciding Between Class and ID 44
Attribute Selectors 45
Simple Attribute Selectors 45
Selection Based on Exact Attribute Value 46
Selection Based on Partial Attribute Values 48
A Particular Attribute Selection Type 48
The Case Insensitivity Identifier 53
Using Document Structure 54
Understanding the Parent-Child Relationship 54
Descendant Selectors 56
Selecting Children 59
Selecting Adjacent Sibling Elements 60
Selecting Following Siblings 62
Pseudo-Class Selectors 63
Combining Pseudo-Classes 63
Structural Pseudo-Classes 64
Dynamic Pseudo-Classes 76
UI-State Pseudo-Classes 81
The :target Pseudo-Class 87
The :lang Pseudo-Class 88
The Negation Pseudo-Class 89
Pseudo-Element Selectors 92
Styling the First Letter 92
Styling the First Line 93
Restrictions on ::first-letter and ::first-line 94
Styling (or Creating) Content Before and After Elements 95
Summary 95
vi | Table of Contents
3. Specifcity and the Cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Specificity 97
Declarations and Specificity 99
Universal Selector Specificity 101
ID and Attribute Selector Specificity 101
Inline Style Specificity 101
Importance 102
Inheritance 103
The Cascade 106
Sorting by Weight and Origin 107
Sorting by Specificity 108
Sorting by Order 109
Non-CSS Presentational Hints 111
Summary 111
4. Values and Units. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Keywords, Strings, and Other Text Values 113
Keywords 113
Strings 116
URLs 117
Images 119
Identifiers 119
Numbers and Percentages 119
Integers 120
Numbers 120
Percentages 120
Fractions 121
Distances 121
Absolute Length Units 121
Resolution Units 124
Relative Length Units 125
Calculation values 130
Attribute Values 131
Color 132
Named Colors 132
Colors by RGB and RGBa 133
Colors by HSL and HSLa 138
Color Keywords 141
Angles 142
Time and Frequency 143
Position 143
Custom Values 144
Table of Contents | vii
5. Fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Font Families 149
Using Generic Font Families 151
Specifying a Font Family 152
Using @font-face 154
Required Descriptors 155
Other Font Descriptors 160
Combining Descriptors 163
Font Weights 166
How Weights Work 167
Getting Bolder 170
Lightening Weights 172
The font-weight descriptor 173
Font Size 174
Absolute Sizes 175
Relative Sizes 177
Percentages and Sizes 178
Font Size and Inheritance 179
Using Length Units 182
Automatically Adjusting Size 183
Font Style 185
The font-style Descriptor 187
Font Stretching 188
The font-stretch Descriptor 190
Font Kerning 191
Font Variants 192
Level 3 Values 193
Font Features 195
The font-feature-settings Descriptor 197
Font Synthesis 197
The font Property 199
Adding the Line Height 201
Using Shorthands Properly 202
Using System Fonts 202
Font Matching 203
Summary 205
6. Text Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Indentation and Inline Alignment 207
Indenting Text 208
Text Alignment 211
Aligning the Last Line 215
viii | Table of Contents