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 OReilly Media, Inc. , 1005 Gravenstein Highway North, Sebastopol, CA 95472.
OReilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com .
- Editor: Meg Foley
- Production Editors: Colleen Lobner and Colleen Cole
- Proofreader: Amanda Kersey
- Indexer: Angela Howard
- Interior Designer: David Futato
- Cover Designer: Karen Montgomery
- Illustrator: Rebecca Demarest
- May 2000: First Edition
- March 2004: Second Edition
- November 2006: Third Edition
- November 2017: Fourth Edition
Revision History for the Fourth Edition
- 2017-10-10: First Release
- 2017-11-17: Second Release
- 2018-08-10: Third Release
- 2019-06-21: Fourth Release
See http://oreilly.com/catalog/errata.csp?isbn=9781449393199 for release details.
The OReilly logo is a registered trademark of OReilly Media, Inc. CSS: The Definitive Guide, the cover image, and related trade dress are trademarks of OReilly 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
[GP]
Dedication
To Kat, Carolyn, Rebecca, and Joshua.
E.M.
To Amie.
E.W.
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 youll 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
to see how some of these are modified):
ItalicIndicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width
Used for program listings, as well as within paragraphs to refer to program elements 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 determined by context.
Tip
This element signifies a tip or suggestion.
Note
This element signifies a general note.
Warning
This element indicates a warning or caution.
Value Syntax Conventions
Throughout this book, there are boxes that break down a given CSS propertys details, including what values are permitted. These have been reproduced practically verbatim 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 following:
Value: #
Value:
Value: ? [ / ]?
Value: [ | thick
| thin
]{1,4}
Any italicized words between < and > give a type of value, or a reference to another propertys values. For example, the property font
accepts values that originally belong to the property font-family
. This is denoted by using the text . Similarly, if a value type like a color is permitted, it will be represented using .
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.
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 conjunction 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