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 (http://oreilly.com/safari) For more information, contact our corporate/insti‐ tutional 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 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 http://oreilly.com/catalog/errata.csp?isbn=9781449393199 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 CSS and Documents 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 3 12 13 14 15 16 16 16 17 18 19 20 20 21 21 22 24 25 28 v 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 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 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 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 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 Text Properties 207 Indentation and Inline Alignment Indenting Text Text Alignment Aligning the Last Line viii | Table of Contents 207 208 211 215 ... developments such as the CSS- based redesign of Wired magazine and the CSS Zen Garden, CSS began to catch on Before all that happened, though, the CSS Working Group had finalized the CSS2 specification... in Figure 1-5 is the loading of the external sheet2 .css via the @import declaration Imports must be placed at the beginning of the stylesheet that contains them, but they are otherwise unconstrained... learning how to write CSS in detail, we need to look at how one can associate CSS with a document After all, without tying the two together, there’s no way for the CSS to affect the document We’ll