4t
h
Ed
iti
on

CSS

The Definitive Guide
VISUAL PRESENTATION FOR THE WEB

Eric A. Meyer & Estelle Weyl



FOURTH EDITION

CSS: The Definitive Guide
Visual Presentation for the Web

Eric A. Meyer and Estelle Weyl

Beijing

Boston Farnham Sebastopol

Tokyo


CSS: The Definitive 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 ( For more information, contact our corporate/insti‐
tutional sales department: 800-998-9938 or

Editor: Meg Foley
Production Editors: Colleen Lobner and Colleen Cole
Proofreader: Amanda Kersey
Indexer: Angela Howard
May 2000:
March 2004:
November 2006:
November 2017:

Interior Designer: David Futato
Cover Designer: Karen Montgomery
Illustrator: Rebecca Demarest

First Edition
Second Edition
Third Edition
Fourth Edition

Revision History for the Fourth Edition
2017-10-10:
2017-11-17:

First Release

Second Release

See for release details.
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. CSS: The Definitive Guide, the cover
image, and related trade dress are trademarks of O’Reilly Media, Inc.
While the publisher and the authors have used good faith efforts to ensure that the information and
instructions contained in this work are accurate, the publisher and the authors disclaim all responsibility
for errors or omissions, including without limitation responsibility for damages resulting from the use of
or reliance on this work. Use of the information and instructions contained in this work is at your own
risk. If any code samples or other technology this work contains or describes is subject to open source
licenses or the intellectual property rights of others, it is your responsibility to ensure that your use
thereof complies with such licenses and/or rights.

978-1-449-39319-9
[M]


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

Elements
Replaced and Nonreplaced Elements
Element Display Roles
Bringing CSS and HTML Together
The link Tag
The style Element
The @import Directive
HTTP Linking
Inline Styles
Stylesheet Contents
Markup
Rule Structure
Vendor prefixing
Whitespace Handling
CSS Comments
Media Queries
Usage
Simple Media Queries
Media Types
Media Descriptors
Media Feature Descriptors and Value Types
Feature Queries
Summary

1
3
3
3
7
8

12
13
14
15
16
16
16
17
18
19
20
20
21
21
22
24
25
28

v


2. Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Basic Style Rules
Element Selectors
Declarations and Keywords
Grouping
Grouping Selectors
Grouping Declarations
Grouping Everything

New Elements in Old Browsers
Class and ID Selectors
Class Selectors
Multiple Classes
ID Selectors
Deciding Between Class and ID
Attribute Selectors
Simple Attribute Selectors
Selection Based on Exact Attribute Value
Selection Based on Partial Attribute Values
A Particular Attribute Selection Type
The Case Insensitivity Identifier
Using Document Structure
Understanding the Parent-Child Relationship
Descendant Selectors
Selecting Children
Selecting Adjacent Sibling Elements
Selecting Following Siblings
Pseudo-Class Selectors
Combining Pseudo-Classes
Structural Pseudo-Classes
Dynamic Pseudo-Classes
UI-State Pseudo-Classes
The :target Pseudo-Class
The :lang Pseudo-Class
The Negation Pseudo-Class
Pseudo-Element Selectors
Styling the First Letter
Styling the First Line
Restrictions on ::first-letter and ::first-line

Styling (or Creating) Content Before and After Elements
Summary

vi

|

Table of Contents

29
30
31
33
34
35
37
38
38
39
41
43
44
45
45
46
48
48
53
54
54

56
59
60
62
63
63
64
76
81
87
88
89
92
92
93
94
95
95


3. Specificity and the Cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Specificity
Declarations and Specificity
Universal Selector Specificity
ID and Attribute Selector Specificity
Inline Style Specificity
Importance
Inheritance
The Cascade
Sorting by Weight and Origin

Sorting by Specificity
Sorting by Order
Non-CSS Presentational Hints
Summary

97
99
101
101
101
102
103
106
107
108
109
111
111

4. Values and Units. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Keywords, Strings, and Other Text Values
Keywords
Strings
URLs
Images
Identifiers
Numbers and Percentages
Integers
Numbers
Percentages

Fractions
Distances
Absolute Length Units
Resolution Units
Relative Length Units
Calculation values
Attribute Values
Color
Named Colors
Colors by RGB and RGBa
Colors by HSL and HSLa
Color Keywords
Angles
Time and Frequency
Position
Custom Values

113
113
116
117
119
119
119
120
120
120
121
121
121

124
125
130
131
132
132
133
138
141
142
143
143
144

Table of Contents

|

vii


5. Fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Font Families
Using Generic Font Families
Specifying a Font Family
Using @font-face
Required Descriptors
Other Font Descriptors
Combining Descriptors
Font Weights

How Weights Work
Getting Bolder
Lightening Weights
The font-weight descriptor
Font Size
Absolute Sizes
Relative Sizes
Percentages and Sizes
Font Size and Inheritance
Using Length Units
Automatically Adjusting Size
Font Style
The font-style Descriptor
Font Stretching
The font-stretch Descriptor
Font Kerning
Font Variants
Level 3 Values
Font Features
The font-feature-settings Descriptor
Font Synthesis
The font Property
Adding the Line Height
Using Shorthands Properly
Using System Fonts
Font Matching
Summary

149
151

152
154
155
160
163
166
167
170
172
173
174
175
177
178
179
182
183
185
187
188
190
191
192
193
195
197
197
199
201
202

202
203
205

6. Text Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Indentation and Inline Alignment
Indenting Text
Text Alignment
Aligning the Last Line

viii

|

Table of Contents

207
208
211
215


Inline Alignment
The Height of Lines
Vertically Aligning Text
Word Spacing and Letter Spacing
Word Spacing
Letter Spacing
Spacing and Alignment
Text Transformation

Text Decoration
Weird Decorations
Text Rendering
Text Shadows
Handling Whitespace
Setting Tab Sizes
Wrapping and Hyphenation
Wrapping Text
Writing Modes
Setting Writing Modes
Changing Text Orientation
Declaring Direction
Summary

216
216
220
226
226
228
229
230
232
234
236
237
239
242
243
248

249
249
253
254
256

7. Basic Visual Formatting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Basic Boxes
A Quick Refresher
The Containing Block
Altering Element Display
Changing Roles
Block Boxes
Horizontal Formatting
Horizontal Properties
Using auto
More Than One auto
Negative Margins
Percentages
Replaced Elements
Vertical Formatting
Vertical Properties
Percentage Heights
Auto Heights
Collapsing Vertical Margins
Negative Margins and Collapsing

257
258
259

260
261
263
265
266
268
269
270
272
273
274
275
276
278
279
281

Table of Contents

|

ix


List Items
Inline Elements
Line Layout
Basic Terms and Concepts
Inline Formatting
Inline Nonreplaced Elements

Building the Boxes
Vertical Alignment
Managing the line-height
Scaling Line Heights
Adding Box Properties
Changing Breaking Behavior
Glyphs Versus Content Area
Inline Replaced Elements
Adding Box Properties
Replaced Elements and the Baseline
Inline-Block Elements
Flow Display
Contents Display
Other Display Values
Computed Values
Summary

283
285
285
287
289
290
290
293
295
297
298
301
302

303
304
305
308
310
312
312
313
313

8. Padding, Borders, Outlines, and Margins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Basic Element Boxes
Width and Height
Padding
Replicating Values
Single-Side Padding
Percentage Values and Padding
Padding and Inline Elements
Padding and Replaced Elements
Borders
Borders with Style
Border Widths
Border Colors
Shorthand Border Properties
Global Borders
Borders and Inline Elements
Rounding Border Corners
Image Borders
Outlines


x

|

Table of Contents

315
316
318
320
322
323
325
327
328
329
333
337
339
341
342
344
352
369


Outline Styles
Outline Width
Outline Color
How They Are Different

Margins
Length Values and Margins
Percentages and Margins
Single-Side Margin Properties
Margin Collapsing
Negative Margins
Margins and Inline Elements
Summary

370
371
372
374
375
377
378
379
379
381
383
385

9. Colors, Backgrounds, and Gradients. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Colors
Foreground Colors
Affecting Borders
Affecting Form Elements
Inheriting Color
Backgrounds
Background Colors

Clipping the Background
Background Images
Background Positioning
Changing the Positioning Box
Background Repeating (or Lack Thereof)
Getting Attached
Sizing Background Images
Bringing It All Together
Multiple Backgrounds
Gradients
Linear Gradients
Radial Gradients
Manipulating Gradient Images
Repeating Gradients
Box Shadows
Summary

387
388
390
391
392
392
393
396
399
404
414
417
428

433
442
444
450
451
466
478
481
485
488

10. Floating and Shapes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
Floating
Floated Elements
Floating: The Details

489
490
492

Table of Contents

|

xi


Applied Behavior
Floats, Content, and Overlapping
Clearing

Float Shapes
Creating a Shape
Shaping with Image Transparency
Adding a Shape Margin
Summary

499
503
504
508
509
521
522
524

11. Positioning. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525
Basic Concepts
Types of Positioning
The Containing Block
Offset Properties
Width and Height
Setting Width and Height
Limiting Width and Height
Content Overflow and Clipping
Overflow
Element Visibility
Absolute Positioning
Containing Blocks and Absolutely Positioned Elements
Placement and Sizing of Absolutely Positioned Elements
Auto-edges

Placing and Sizing Nonreplaced Elements
Placing and Sizing Replaced Elements
Placement on the Z-Axis
Fixed Positioning
Relative Positioning
Sticky Positioning
Summary

525
525
526
527
530
530
532
534
534
536
537
537
540
541
543
547
550
553
555
557
561


12. Flexible Box Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563
Flexbox Fundamentals
A Simple Example
Flex Containers
The flex-direction Property
Other Writing Directions
Wrapping Flex Lines
Defining Flexible Flows
flex-wrap Continued
Arranging Flex Items

xii

|

Table of Contents

563
565
569
570
574
576
578
584
586


Flex Container
Justifying Content

justify-content Examples
Aligning Items
Start, End, and Center Alignment
Baseline Alignment
Additional Notes
The align-self Property
Aligning Content
Flex Items
What Are Flex Items?
Flex Item Features
Minimum Widths
Flex-Item–Specific Properties
The flex Property
The flex-grow Property
Growth Factors and the flex Property
The flex-shrink Property
Proportional Shrinkage Based on Width and Shrink Factor
Differing Bases
Responsive Flexing
The flex-basis Property
The content Keyword
Automatic Flex Basis
Default Values
Length Units
Zero Basis
The flex Shorthand
Common Flex Values
The order property
Tabbed Navigation Revisited


587
587
594
596
599
601
602
602
604
609
609
611
613
614
614
616
619
623
626
628
630
633
634
635
636
637
642
643
643
648

650

13. Grid Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655
Creating a Grid Container
Basic Grid Terminology
Placing Grid Lines
Fixed-Width Grid Tracks
Flexible Grid Tracks
Fitting Track Contents
Repeating Grid Lines
Grid Areas
Attaching Elements to the Grid

655
658
660
662
666
674
676
680
686

Table of Contents

|

xiii



Using Column and Row Lines
Row and Column Shorthands
The Implicit Grid
Error Handling
Using Areas
Grid Item Overlap
Grid Flow
Automatic Grid Lines
The grid Shorthand
Subgrids
Opening Grid Spaces
Grid Gutters (or Gaps)
Grid Items and the Box Model
Aligning and Grids
Aligning and Justifying Individual Items
Aligning and Justifying All Items
Layering and Ordering
Summary

687
692
694
697
698
701
702
708
710
713
714

714
716
721
722
723
727
729

14. Table Layout in CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 731
Table Formatting
Visually Arranging a Table
Table Display Values
Anonymous Table Objects
Table Layers
Captions
Table Cell Borders
Separated Cell Borders
Collapsing Cell Borders
Table Sizing
Width
Height
Alignment
Summary

731
731
733
738
742
744

745
746
749
754
755
761
762
766

15. Lists and Generated Content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 767
Lists
Types of Lists
List Item Images
List-Marker Positions
List Styles in Shorthand
List Layout

xiv

|

Table of Contents

767
768
771
774
775
776



Generated Content
Inserting Generated Content
Specifying Content
Counters
Defining Counting Patterns
Fixed Counting Patterns
Cyclic Counting Patterns
Symbolic Counting Patterns
Alphabetic Counting Patterns
Numeric Counting Patterns
Additive Counting Patterns
Extending Counting Patterns
Speaking Counting Patterns
Summary

779
780
783
788
796
798
800
803
806
807
812
814
815
817


16. Transforms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 819
Coordinate Systems
Transforming
The Transform Functions
More Transform Properties
Moving the Origin
Choosing a 3D Style
Changing Perspective
Dealing with Backfaces
Summary

819
823
827
841
842
845
847
852
854

17. Transitions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 855
CSS Transitions
Transition Properties
Limiting Transition Effects by Property
Setting Transition Duration
Altering the Internal Timing of Transitions
Delaying Transitions
The transition Shorthand

In Reverse: Transitioning Back to Baseline
Animatable Properties and Values
How Property Values Are Interpolated
Fallbacks: Transitions Are Enhancements
Printing Transitions

855
857
861
867
869
875
878
880
884
885
888
889

18. Animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 891
Defining Keyframes

892

Table of Contents

|

xv



Setting Up Keyframe Animations
Naming Your Animation
Keyframe Selectors
Omitting from and to Values
Repeating Keyframe Properties
Animatable Properties
Nonanimatable Properties That Aren’t Ignored
Scripting @keyframes Animations
Animating Elements
Naming Animations
Defining Animation Lengths
Declaring Animation Iterations
Setting an Animation Direction
Delaying Animations
Animation Events
Changing the Internal Timing of Animations
Setting the Animation Play State
Animation Fill Modes
Bringing It All Together
Animation, Specificity, and Precedence Order
Specificity and !important
Animation Order
Animation Iteration and display: none;
Animation and the UI Thread
Seizure and Vestibular Disorders
Animation Events and Prefixing
animationstart
animationend
animationiteration

Printing Animations

893
894
894
895
897
897
899
899
900
901
904
905
907
909
911
920
932
933
935
939
939
939
940
940
941
942
942
942

943
943

19. Filters, Blending, Clipping, and Masking. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 945
CSS Filters
Basic Filters
Color Filtering
Brightness, Contrast, and Saturation
SVG Filters
Compositing and Blending
Blending Elements
Darken, Lighten, Difference, and Exclusion
Multiply, Screen, and Overlay
Hard and Soft Light

xvi

| Table of Contents

945
946
948
949
951
952
952
953
955
956



Color Dodge and Burn
Hue, Saturation, Luminosity, and Color
Blending Backgrounds
Blending in Isolation
Clipping and Masking
Clipping
Clip Shapes
Clip Boxes
Clip Filling Rules
Masks
Defining a Mask
Changing the Mask’s Mode
Sizing and Repeating Masks
Positioning Masks
Clipping and Compositing Masks
Bringing It All Together
Mask Types
Border-image Masking
Object Fitting and Positioning

957
959
960
963
964
965
966
967
970

971
972
974
976
979
980
984
985
986
987

20. Media-Dependent Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 991
Defining Media-Dependent Styles
Basic Media Queries
Complex Media Queries
Paged Media
Print Styles
Summary

991
991
994
1002
1002
1016

A. Animatable Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1017
B. Basic Property Reference. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1025
C. Color Equivalence Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1035
Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1039


Table of Contents

|

xvii



Preface

If you are a web designer or document author interested in sophisticated page styling,
improved accessibility, and saving time and effort, this book is for you. All you really
need to know before starting the book is HTML 4.0. The better you know HTML, the
better prepared you’ll be, but it is not a requirement. You will need to know very little
else to follow this book.
This fourth edition of the book was finished in mid-2017 and does its best to reflect
the state of CSS at that time. The assumption is that anything covered in detail either
had wide browser support at the time of writing or was known to be coming soon
after publication. CSS features which were still being developed, or were known to
have support dropping soon, are not covered here.

Conventions Used in This Book
The following typographical conventions are used in this book (but make sure to read
through the subsection “Value Syntax Conventions” on page xx to see how some of
these are modified):
Italic
Indicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width


Used for program listings, as well as within paragraphs to refer to program ele‐
ments such as variable or function names, databases, data types, environment
variables, statements, and keywords.
Constant width bold

Shows commands or other text that should be typed literally by the user.
Constant width italic

Shows text that should be replaced with user-supplied values or by values deter‐
mined by context.
xix


This element signifies a tip or suggestion.

This element signifies a general note.

This element indicates a warning or caution.

Value Syntax Conventions
Throughout this book, there are boxes that break down a given CSS property’s details,
including what values are permitted. These have been reproduced practically verba‐
tim from the CSS specifications, but some explanation of the syntax is in order.
Throughout, the allowed values for each property are listed with a syntax like the fol‐
lowing:
Value: <family-name>#
Value: <url> ‖ <color>
Value: <url>? <color> [ / <color> ]?
Value: [ <length> | thick | thin ]{1,4}
Any italicized words between “<” and “>” give a type of value, or a reference to

another property’s values. For example, the property font accepts values that origi‐
nally belong to the property font-family. This is denoted by using the text <fontfamily>. Similarly, if a value type like a color is permitted, it will be represented using
<color>.
Any words presented in constant width are keywords that must appear literally,
without quotes. The forward slash (/) and the comma (,) must also be used literally.
There are a number of ways to combine components of a value definition:
• Two or more keywords strung together with only space separating them means
that all of them must occur in the given order. For example, help me would mean
that the property must use those keywords in that order.
xx

|

Preface


• If a vertical bar separates alternatives (X | Y), then any one of them must occur,
but only one. Given “[ X | Y | Z ]”, then any one of X, Y, or Z is permitted.
• A vertical double bar (X ‖ Y) means that X, Y, or both must occur, but they may
appear in any order. Thus: X, Y, X Y, and Y X are all valid interpretations.
• A double ampersand (X && Y) means both X and Y must occur, though they
may appear in any order. Thus: X Y or Y X are both valid interpretations.
• Brackets ([…]) are for grouping things together. Thus “[please ‖ help ‖ me] do
this” means that the words please, help, and me can appear in any order,
though each appear only once. do this must always appear, with those words in
that order. Some examples: please help me do this, help me please do
this, me please help do this.
Every component or bracketed group may (or may not) be followed by one of these
modifiers:
• An asterisk (*) indicates that the preceding value or bracketed group is repeated

zero or more times. Thus, “bucket*” means that the word bucket can be used
any number of times, including zero. There is no upper limit defined on the
number of times it can be used.
• A plus (+) indicates that the preceding value or bracketed group is repeated one
or more times. Thus, “mop+” means that the word mop must be used at least once,
and potentially many more times.
• An octothorpe (#) indicates that the preceding value or bracketed group is
repeated one or more times, separated by commas as needed. Thus, “floor#” can
be floor, floor, floor, floor, and so on. This is most often used in conjunc‐
tion with bracketed groups or value types.
• A question mark (?) indicates that the preceding value or bracketed group is
optional. For example, “[pine tree]?” means that the words pine tree need not
be used (although they must appear in that order if they are used).
• An exclamation point (!) indicates that the preceding value or bracketed group is
required, and thus must result in at least one value, even if the syntax would seem
to indicate otherwise. For example, “[ what? is? happening? ]!” must be at least
one of the three terms marked optional.
• A pair of numbers in curly braces ({M,N}) indicates that the preceding value or
bracketed group is repeated at least M and at most N times. For example, ha{1,3}
means that there can be one, two, or three instances of the word ha.

Preface

|

xxi


The following are some examples:
give ‖ me ‖ liberty


At least one of the three words must be used, and they can be used in any order.
For example, give liberty, give me, liberty me give, and give me liberty
are all valid interpretations.

[ I | am ]? the ‖ walrus
Either the word I or am may be used, but not both, and use of either is optional.
In addition, either the or walrus, or both, must follow in any order. Thus you
could construct I the walrus, am walrus the, am the, I walrus, walrus the,
and so forth.
koo+ ka-choo

One or more instances of koo must be followed by ka-choo. Therefore koo koo
ka-choo, koo koo koo ka-choo, and koo ka-choo are all legal. The number of
koos is potentially infinite, although there are bound to be implementationspecific limits.

I really{1,4}? [ love | hate ] [ Microsoft | Netscape | Opera | Safari | Chrome ]

The all-purpose web designer’s opinion-expresser. This can be interpreted as I
love Netscape, I really love Microsoft, and similar expressions. Anywhere
from zero to four reallys may be used, though they may not be separated by
commas. You also get to pick between love and hate, which really seems like
some sort of metaphor.

It’s a [ mad ]# world

This gives the opportunity to put in as many comma-separated mads as possible,
with a minimum of one mad. If there is only one mad, then no comma is added.
Thus: It’s a mad world and It’s a mad, mad, mad, mad, mad world are
both valid results.


[ [ Alpha ‖ Baker ‖ Cray ], ]{2,3} and Delphi
Two to three of Alpha, Baker, and Delta must be followed by and Delphi. One
possible result would be Cray, Alpha, and Delphi. In this case, the comma is
placed because of its position within the nested bracket groups. (Some older ver‐
sions of CSS enforced comma-separation this way, instead of via the # modifier.)

Using Code Examples
Whenever you come across an icon that looks like , it means there is an associated
code example. Live examples are available at If
you are reading this book on a device with an internet connection, you can click the
icon to go directly to a live version of the code example referenced.
xxii

|

Preface


Supplemental material—in the form of the HTML, CSS, and image files that were
used to produce nearly all of the figures in this book—is available for download at
Please be sure to read the repository’s
README.md file for any notes regarding the contents of the repository.
This book is here to help you get your job done. In general, if example code is offered
with this book, you may use it in your programs and documentation. You do not
need to contact us for permission unless you’re reproducing a significant portion of
the code. For example, writing a program that uses several chunks of code from this
book does not require permission. Selling or distributing a CD-ROM of examples
from O’Reilly books does require permission. Answering a question by citing this
book and quoting example code does not require permission. Incorporating a signifi‐

cant amount of example code from this book into your product’s documentation does
require permission.
We appreciate, but do not require, attribution. An attribution usually includes the
title, author, publisher, and ISBN. For example: “CSS: The Definitive Guide by Eric A.
Meyer and Estelle Weyl (O’Reilly). Copyright 2018 Eric Meyer, Estelle Weyl,
978-1-449-39319-9.”
If you feel your use of code examples falls outside fair use or the permission given
above, feel free to contact us at

O’Reilly Safari
Safari (formerly Safari Books Online) is a membership-based
training and reference platform for enterprise, government,
educators, and individuals.
Members have access to thousands of books, training videos, Learning Paths, interac‐
tive tutorials, and curated playlists from over 250 publishers, including O’Reilly
Media, Harvard Business Review, Prentice Hall Professional, Addison-Wesley Profes‐
sional, Microsoft Press, Sams, Que, Peachpit Press, Adobe, Focal Press, Cisco Press,
John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe
Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, and
Course Technology, among others.
For more information, please visit />
Preface

|

xxiii