📄 Page
1
Modern CSS Master the Key Concepts of CSS for Modern Web Development — Second Edition — Joe Attardi
📄 Page
2
Modern CSS Master the Key Concepts of CSS for Modern Web Development Second Edition Joe Attardi
📄 Page
3
Modern CSS: Master the Key Concepts of CSS for Modern Web Development, Second Edition ISBN-13 (pbk): 979-8-8688-1726-7 ISBN-13 (electronic): 979-8-8688-1727-4 https://doi.org/10.1007/979-8-8688-1727-4 Copyright © 2025 by Joe Attardi This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Anandadeep Roy Editorial Assistant: Jessica Vakkili Cover designed by eStudioCalamar The cover image is from Pixabay.com Distributed to the book trade worldwide by Springer Science+Business Media New York, 1 New York Plaza, New York, NY 10004. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com. Apress Media, LLC is a Delaware LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail booktranslations@springernature.com; for reprint, paperback, or audio rights, please e-mail bookpermissions@springernature.com. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub. For more detailed information, please visit https://www.apress.com/gp/services/ source-code. If disposing of this product, please recycle the paper Joe Attardi Billerica, MA, USA
📄 Page
4
To Liz and Benjamin
📄 Page
5
v Table of Contents About the Author �����������������������������������������������������������������������������������������������������xv About the Technical Reviewer �������������������������������������������������������������������������������xvii Acknowledgments ��������������������������������������������������������������������������������������������������xix Introduction ������������������������������������������������������������������������������������������������������������xxi Chapter 1: Introduction to CSS ��������������������������������������������������������������������������������� 1 Anatomy of a CSS Rule ����������������������������������������������������������������������������������������������������������������� 1 Rule Syntax ������������������������������������������������������������������������������������������������������������������������������ 1 Property Conflicts �������������������������������������������������������������������������������������������������������������������� 2 Comments ������������������������������������������������������������������������������������������������������������������������������� 3 At-Rules ����������������������������������������������������������������������������������������������������������������������������������� 3 How CSS Is Used ��������������������������������������������������������������������������������������������������������������������������� 4 Inline Styles ����������������������������������������������������������������������������������������������������������������������������� 4 Internal Stylesheets ����������������������������������������������������������������������������������������������������������������� 4 External Stylesheets ���������������������������������������������������������������������������������������������������������������� 5 Browser Support ��������������������������������������������������������������������������������������������������������������������������� 6 Web Resources ����������������������������������������������������������������������������������������������������������������������������� 6 CanIUse�com ���������������������������������������������������������������������������������������������������������������������������� 7 MDN Web Docs ������������������������������������������������������������������������������������������������������������������������ 7 How CSS Works in the Browser ���������������������������������������������������������������������������������������������������� 7 The Document Object Model (DOM)����������������������������������������������������������������������������������������� 7 The CSS Object Model (CSSOM) ���������������������������������������������������������������������������������������������� 9 The Render Tree ��������������������������������������������������������������������������������������������������������������������� 10 Layout and Paint �������������������������������������������������������������������������������������������������������������������� 11 Summary������������������������������������������������������������������������������������������������������������������������������������� 11
📄 Page
6
vi Chapter 2: CSS Rules and Selectors ����������������������������������������������������������������������� 13 Basic Selector Types ������������������������������������������������������������������������������������������������������������������� 13 The Universal Selector ����������������������������������������������������������������������������������������������������������� 13 Element Selectors ����������������������������������������������������������������������������������������������������������������� 14 ID Selectors ��������������������������������������������������������������������������������������������������������������������������� 14 Class Selectors ���������������������������������������������������������������������������������������������������������������������� 15 Attribute Selectors ����������������������������������������������������������������������������������������������������������������� 15 Compound Selectors ������������������������������������������������������������������������������������������������������������������� 16 Multiple Independent Selectors �������������������������������������������������������������������������������������������������� 17 Selector Combinators������������������������������������������������������������������������������������������������������������������ 17 Descendant Combinator �������������������������������������������������������������������������������������������������������� 17 Child Combinator ������������������������������������������������������������������������������������������������������������������� 18 Subsequent Sibling Combinator �������������������������������������������������������������������������������������������� 18 Next Sibling Combinator �������������������������������������������������������������������������������������������������������� 19 Using Multiple Combinators �������������������������������������������������������������������������������������������������� 19 Pseudo-classes ��������������������������������������������������������������������������������������������������������������������������� 20 Interaction State �������������������������������������������������������������������������������������������������������������������� 20 Document Structure �������������������������������������������������������������������������������������������������������������� 21 Negating a Selector ��������������������������������������������������������������������������������������������������������������� 22 The :has Pseudo-class ���������������������������������������������������������������������������������������������������������� 22 The :is Pseudo-class ������������������������������������������������������������������������������������������������������������� 24 Pseudo-elements ������������������������������������������������������������������������������������������������������������������������ 25 Specificity ����������������������������������������������������������������������������������������������������������������������������������� 26 Specificity Rankings �������������������������������������������������������������������������������������������������������������� 27 Calculating Specificity ����������������������������������������������������������������������������������������������������������� 28 The Escape Hatch: !important ����������������������������������������������������������������������������������������������� 29 Nesting CSS Rules ���������������������������������������������������������������������������������������������������������������������� 30 Summary������������������������������������������������������������������������������������������������������������������������������������� 32 Table of ConTenTs
📄 Page
7
vii Chapter 3: Basic CSS Concepts ������������������������������������������������������������������������������ 33 The Box Model ���������������������������������������������������������������������������������������������������������������������������� 33 Box Sizing ������������������������������������������������������������������������������������������������������������������������������ 36 Aspect Ratio �������������������������������������������������������������������������������������������������������������������������� 38 Block and Inline Elements ����������������������������������������������������������������������������������������������������������� 39 Block Elements ���������������������������������������������������������������������������������������������������������������������� 39 Inline Elements ���������������������������������������������������������������������������������������������������������������������� 40 Inline-Block Elements ������������������������������������������������������������������������������������������������������������ 44 CSS Units ������������������������������������������������������������������������������������������������������������������������������������ 45 The px Unit ���������������������������������������������������������������������������������������������������������������������������� 46 The em Unit ��������������������������������������������������������������������������������������������������������������������������� 46 The rem Unit �������������������������������������������������������������������������������������������������������������������������� 47 Viewport Units: vw and vh ����������������������������������������������������������������������������������������������������� 47 The % Unit ����������������������������������������������������������������������������������������������������������������������������� 48 Other Units ����������������������������������������������������������������������������������������������������������������������������� 48 No Units ��������������������������������������������������������������������������������������������������������������������������������� 48 Functions ������������������������������������������������������������������������������������������������������������������������������������ 48 The calc Function ������������������������������������������������������������������������������������������������������������������ 48 The min and max Functions �������������������������������������������������������������������������������������������������� 49 Colors ������������������������������������������������������������������������������������������������������������������������������������������ 50 Named Colors ������������������������������������������������������������������������������������������������������������������������ 50 RGB Colors ����������������������������������������������������������������������������������������������������������������������������� 50 HSL Colors ����������������������������������������������������������������������������������������������������������������������������� 52 Transparent���������������������������������������������������������������������������������������������������������������������������� 52 Newer Color Syntax ��������������������������������������������������������������������������������������������������������������� 52 Overflow �������������������������������������������������������������������������������������������������������������������������������� 55 Handling Overflow ����������������������������������������������������������������������������������������������������������������� 57 CSS Variables ������������������������������������������������������������������������������������������������������������������������������ 60 Using Variables ���������������������������������������������������������������������������������������������������������������������� 60 Using Variables with the calc Function ���������������������������������������������������������������������������������� 62 Summary������������������������������������������������������������������������������������������������������������������������������������� 63 Table of ConTenTs
📄 Page
8
viii Chapter 4: Basic Styling ����������������������������������������������������������������������������������������� 65 Property Values ��������������������������������������������������������������������������������������������������������������������������� 65 Global Keywords �������������������������������������������������������������������������������������������������������������������� 65 Shorthand and Multiple Values ���������������������������������������������������������������������������������������������� 65 Borders ��������������������������������������������������������������������������������������������������������������������������������������� 68 Setting the Border Color �������������������������������������������������������������������������������������������������������� 68 Setting the Border Width ������������������������������������������������������������������������������������������������������� 68 Setting the Border Style �������������������������������������������������������������������������������������������������������� 68 Setting All Properties with the Shorthand ����������������������������������������������������������������������������� 69 Specifying Border Collapse ��������������������������������������������������������������������������������������������������� 69 Setting a Border Radius for Rounded Corners ����������������������������������������������������������������������� 70 Box Shadows ������������������������������������������������������������������������������������������������������������������������������ 74 Opacity ���������������������������������������������������������������������������������������������������������������������������������������� 80 Hiding Elements �������������������������������������������������������������������������������������������������������������������������� 84 Using display: none ��������������������������������������������������������������������������������������������������������� 84 Using visibility: hidden ����������������������������������������������������������������������������������������������� 84 Setting opacity to 0 ������������������������������������������������������������������������������������������������������������ 85 Outline ����������������������������������������������������������������������������������������������������������������������������������������� 85 Summary������������������������������������������������������������������������������������������������������������������������������������� 88 Chapter 5: Backgrounds and Gradients ������������������������������������������������������������������ 89 Solid Background Colors ������������������������������������������������������������������������������������������������������������� 89 Background Images �������������������������������������������������������������������������������������������������������������������� 90 Applying a Background Image with the background-image Property ����������������������������������� 90 Repeating a Background with the background- repeat Property ������������������������������������������� 91 Moving the Background Image with the background- position Property ������������������������������� 94 Customizing the Size with the background-size Property ����������������������������������������������������� 96 The background-clip Property ��������������������������������������������������������������������������������������������� 100 Using the Shorthand background Property ������������������������������������������������������������������������� 102 Customizing Scroll Behavior with the background- attachment Property���������������������������� 103 Background Gradients �������������������������������������������������������������������������������������������������������������� 103 Linear Gradients ������������������������������������������������������������������������������������������������������������������ 103 Table of ConTenTs
📄 Page
9
ix Radial Gradients ������������������������������������������������������������������������������������������������������������������ 109 Conic Gradients ������������������������������������������������������������������������������������������������������������������� 116 Combining Backgrounds ����������������������������������������������������������������������������������������������������������� 120 Summary����������������������������������������������������������������������������������������������������������������������������������� 121 Chapter 6: Text Styling ����������������������������������������������������������������������������������������� 123 Basic Text Styling ���������������������������������������������������������������������������������������������������������������������� 123 font-family ��������������������������������������������������������������������������������������������������������������������������� 123 Font Size ������������������������������������������������������������������������������������������������������������������������������ 124 Text Color ����������������������������������������������������������������������������������������������������������������������������� 125 Font Weight �������������������������������������������������������������������������������������������������������������������������� 126 Font Style ���������������������������������������������������������������������������������������������������������������������������� 126 Underlining with text-decoration ����������������������������������������������������������������������������������������� 127 Other Text Effects ���������������������������������������������������������������������������������������������������������������������� 130 Transforming to Uppercase ������������������������������������������������������������������������������������������������� 130 Letter Spacing ��������������������������������������������������������������������������������������������������������������������� 131 Font Variant ������������������������������������������������������������������������������������������������������������������������� 131 Text Layout �������������������������������������������������������������������������������������������������������������������������������� 132 Text Indent ��������������������������������������������������������������������������������������������������������������������������� 132 Whitespace �������������������������������������������������������������������������������������������������������������������������� 133 Truncating Text �������������������������������������������������������������������������������������������������������������������� 135 Horizontal Alignment ����������������������������������������������������������������������������������������������������������� 136 Vertical Alignment ��������������������������������������������������������������������������������������������������������������� 137 Using Web Fonts ����������������������������������������������������������������������������������������������������������������������� 141 Registering a Font with the @font-face Rule ���������������������������������������������������������������������� 142 Declaring Different Web Font Styles ������������������������������������������������������������������������������������ 142 A Word of Caution on Web Fonts ����������������������������������������������������������������������������������������� 143 Text Shadow ������������������������������������������������������������������������������������������������������������������������������ 143 Applying a Gradient to Text ������������������������������������������������������������������������������������������������������� 144 Summary����������������������������������������������������������������������������������������������������������������������������������� 145 Table of ConTenTs
📄 Page
10
x Chapter 7: Layout and Positioning ������������������������������������������������������������������������ 147 Padding ������������������������������������������������������������������������������������������������������������������������������������� 147 Margin ��������������������������������������������������������������������������������������������������������������������������������������� 150 Centering an Element with margin: auto ����������������������������������������������������������������������������� 152 Margin Collapse ������������������������������������������������������������������������������������������������������������������� 153 Positioning Elements ���������������������������������������������������������������������������������������������������������������� 156 Static Positioning ����������������������������������������������������������������������������������������������������������������� 156 Relative Positioning ������������������������������������������������������������������������������������������������������������� 156 Absolute Positioning ������������������������������������������������������������������������������������������������������������ 159 Fixed Positioning ����������������������������������������������������������������������������������������������������������������� 164 Sticky Positioning ���������������������������������������������������������������������������������������������������������������� 165 Z-index and Stacking Contexts ������������������������������������������������������������������������������������������������� 165 Stacking Contexts ���������������������������������������������������������������������������������������������������������������� 168 Floats ���������������������������������������������������������������������������������������������������������������������������������������� 173 Clearing Floats ��������������������������������������������������������������������������������������������������������������������� 176 Width and Height ���������������������������������������������������������������������������������������������������������������������� 177 Intrinsic vs� Extrinsic Size ���������������������������������������������������������������������������������������������������� 178 The min-content and max-content Keywords ��������������������������������������������������������������������� 178 Using Multiple Columns ������������������������������������������������������������������������������������������������������������ 180 Summary����������������������������������������������������������������������������������������������������������������������������������� 181 Chapter 8: Transforms ������������������������������������������������������������������������������������������ 183 The X-, Y-, and Z-axes ��������������������������������������������������������������������������������������������������������������� 183 Perspective ������������������������������������������������������������������������������������������������������������������������������� 184 Rotate ���������������������������������������������������������������������������������������������������������������������������������������� 184 Rotation Axis ������������������������������������������������������������������������������������������������������������������������ 185 Rotation Origin ��������������������������������������������������������������������������������������������������������������������� 185 Rotating Around the Z-axis �������������������������������������������������������������������������������������������������� 186 Rotating Around the X-axis �������������������������������������������������������������������������������������������������� 187 Rotating Around the Y-axis �������������������������������������������������������������������������������������������������� 189 Rotating in Three Dimensions ���������������������������������������������������������������������������������������������� 190 Table of ConTenTs
📄 Page
11
xi Translate ����������������������������������������������������������������������������������������������������������������������������������� 191 Translating Along the Z-axis ������������������������������������������������������������������������������������������������ 192 Translating in an Arbitrary Direction with translate3d ��������������������������������������������������������� 194 Translating with the translate CSS Property ������������������������������������������������������������������������ 195 Scale ����������������������������������������������������������������������������������������������������������������������������������������� 196 Scaling with the scale CSS Property ����������������������������������������������������������������������������������� 198 Skew ����������������������������������������������������������������������������������������������������������������������������������������� 199 Applying Multiple Transforms ��������������������������������������������������������������������������������������������������� 200 Putting It All Together: Making a Cube �������������������������������������������������������������������������������������� 204 Summary����������������������������������������������������������������������������������������������������������������������������������� 211 Chapter 9: Transitions and Animations����������������������������������������������������������������� 213 Transitions ��������������������������������������������������������������������������������������������������������������������������������� 213 Transition Time Units ����������������������������������������������������������������������������������������������������������� 216 Animating an Element’s Initial State with @starting- style ������������������������������������������� 216 Easing Functions ����������������������������������������������������������������������������������������������������������������� 217 Animations �������������������������������������������������������������������������������������������������������������������������������� 221 Basic Animation Properties ������������������������������������������������������������������������������������������������� 224 Delaying the Start of the Animation ������������������������������������������������������������������������������������� 224 The Animation Fill Mode ������������������������������������������������������������������������������������������������������ 225 Running an Animation Multiple Times ��������������������������������������������������������������������������������� 226 Running an Animation Backward ���������������������������������������������������������������������������������������� 227 Pausing and Resuming an Animation ���������������������������������������������������������������������������������� 227 Applying Multiple Animations ���������������������������������������������������������������������������������������������� 227 Applying Multiple Animations That Change the Same Property ������������������������������������������ 229 Performance Implications ��������������������������������������������������������������������������������������������������������� 230 Property Types ��������������������������������������������������������������������������������������������������������������������� 230 Giving a Hint As to What Properties Will Be Animated ��������������������������������������������������������� 231 Avoiding Simultaneous Animations ������������������������������������������������������������������������������������� 232 Considering Accessibility ����������������������������������������������������������������������������������������������������� 232 Scroll-Driven Animations ���������������������������������������������������������������������������������������������������������� 234 Summary����������������������������������������������������������������������������������������������������������������������������������� 235 Table of ConTenTs
📄 Page
12
xii Chapter 10: Flexbox ���������������������������������������������������������������������������������������������� 237 Basic Concepts ������������������������������������������������������������������������������������������������������������������������� 237 Creating a Flex Container ���������������������������������������������������������������������������������������������������� 237 Direction ������������������������������������������������������������������������������������������������������������������������������ 237 Axis �������������������������������������������������������������������������������������������������������������������������������������� 238 A Basic Flexbox Layout ������������������������������������������������������������������������������������������������������������� 239 Adding Space Between Items ��������������������������������������������������������������������������������������������������� 240 Sizing of Flex Items ������������������������������������������������������������������������������������������������������������������� 241 Wrapping Flex Items ����������������������������������������������������������������������������������������������������������������� 244 Growing Flex Items to Fill Available Space ������������������������������������������������������������������������������� 245 Shrinking Flex Items to Fit the Available Space ������������������������������������������������������������������������ 249 Setting the Initial Size of a Flex Item ���������������������������������������������������������������������������������������� 250 Alignment and Spacing ������������������������������������������������������������������������������������������������������������� 251 The Writing Mode ���������������������������������������������������������������������������������������������������������������� 251 Controlling Spacing on the Main Axis ���������������������������������������������������������������������������������� 251 Controlling Alignment on the Cross Axis ������������������������������������������������������������������������������ 253 Controlling Spacing in the Cross Axis ���������������������������������������������������������������������������������� 254 Overriding Container Settings ��������������������������������������������������������������������������������������������� 257 Changing the Flex Item Order ��������������������������������������������������������������������������������������������������� 258 Accessibility Considerations ������������������������������������������������������������������������������������������������ 260 Flexbox Layout Use Cases ��������������������������������������������������������������������������������������������������������� 260 Absolute Centering �������������������������������������������������������������������������������������������������������������� 260 A Flexbox-Based Page Layout ��������������������������������������������������������������������������������������������� 261 Summary����������������������������������������������������������������������������������������������������������������������������������� 264 Chapter 11: CSS Grid �������������������������������������������������������������������������������������������� 265 Basic Concepts ������������������������������������������������������������������������������������������������������������������������� 265 Grid Container ���������������������������������������������������������������������������������������������������������������������� 265 Grid Item ������������������������������������������������������������������������������������������������������������������������������ 265 Grid Lines ���������������������������������������������������������������������������������������������������������������������������� 266 Table of ConTenTs
📄 Page
13
xiii Grid Tracks ��������������������������������������������������������������������������������������������������������������������������� 266 Grid Areas ���������������������������������������������������������������������������������������������������������������������������� 267 Explicit and Implicit Grids ���������������������������������������������������������������������������������������������������� 267 The fr Unit ���������������������������������������������������������������������������������������������������������������������������� 267 Defining a Grid Layout ��������������������������������������������������������������������������������������������������������������� 268 Grid Sizing ��������������������������������������������������������������������������������������������������������������������������������� 271 Grid Sizing Functions ���������������������������������������������������������������������������������������������������������������� 273 The repeat Function ������������������������������������������������������������������������������������������������������������� 273 The minmax Function ���������������������������������������������������������������������������������������������������������� 274 Sizing with auto-fill ������������������������������������������������������������������������������������������������������������� 277 Sizing with auto-fit �������������������������������������������������������������������������������������������������������������� 279 Grid Positioning ������������������������������������������������������������������������������������������������������������������������� 281 Specifying the Row and Column ������������������������������������������������������������������������������������������ 281 Spanning Multiple Rows or Columns ����������������������������������������������������������������������������������� 283 Named Grid Lines ���������������������������������������������������������������������������������������������������������������� 285 Named Grid Areas ���������������������������������������������������������������������������������������������������������������� 287 Grid Alignment �������������������������������������������������������������������������������������������������������������������������� 289 justify-items ������������������������������������������������������������������������������������������������������������������������ 289 align-items �������������������������������������������������������������������������������������������������������������������������� 290 justify-content ��������������������������������������������������������������������������������������������������������������������� 292 align-content ����������������������������������������������������������������������������������������������������������������������� 294 Overriding for Individual Grid Items ������������������������������������������������������������������������������������� 297 CSS Subgrid ������������������������������������������������������������������������������������������������������������������������������ 297 Summary����������������������������������������������������������������������������������������������������������������������������������� 300 Chapter 12: Responsive Design ���������������������������������������������������������������������������� 303 The viewport Meta Tag �������������������������������������������������������������������������������������������������������������� 303 Media Queries ��������������������������������������������������������������������������������������������������������������������������� 304 Logical Operators ���������������������������������������������������������������������������������������������������������������� 305 Range Syntax����������������������������������������������������������������������������������������������������������������������� 305 Breakpoints ������������������������������������������������������������������������������������������������������������������������������� 305 Responsive Layouts with Flexbox ��������������������������������������������������������������������������������������������� 310 Table of ConTenTs
📄 Page
14
xiv Responsive Layouts with CSS Grid ������������������������������������������������������������������������������������������� 314 Using auto-fit ����������������������������������������������������������������������������������������������������������������������� 314 Changing the Grid Layout with a Media Query �������������������������������������������������������������������� 315 Fluid Typography ����������������������������������������������������������������������������������������������������������������������� 317 Limiting the Font Size with the clamp Function ������������������������������������������������������������������ 319 Making Images Responsive ������������������������������������������������������������������������������������������������������ 320 Complete Example: Responsive Page Layout ��������������������������������������������������������������������������� 322 Container Size Queries �������������������������������������������������������������������������������������������������������������� 331 Container Query Units ���������������������������������������������������������������������������������������������������������� 335 Summary����������������������������������������������������������������������������������������������������������������������������������� 336 Chapter 13: Wrap Up ��������������������������������������������������������������������������������������������� 337 Limiting the Scope of CSS Rules with @scope ������������������������������������������������������������������������� 337 Reading an Element’s Attributes ����������������������������������������������������������������������������������������������� 339 Scroll Snapping ������������������������������������������������������������������������������������������������������������������������� 339 Configuring Scroll Snap on the Container ��������������������������������������������������������������������������� 339 Configuring Scroll Snap on Children ������������������������������������������������������������������������������������ 340 Checking for Feature Support with @supports ������������������������������������������������������������������������� 341 Applying Visual Effects with the filter Property ������������������������������������������������������������������������� 342 Mixing Colors with color-mix ���������������������������������������������������������������������������������������������������� 344 Utility-First CSS ������������������������������������������������������������������������������������������������������������������������� 346 Final Words ������������������������������������������������������������������������������������������������������������������������������� 347 Index ��������������������������������������������������������������������������������������������������������������������� 349 Table of ConTenTs
📄 Page
15
xv About the Author Joe Attardi is a software engineer from the Boston area, specializing in front-end development. He has over 20 years of experience working with web technologies such as JavaScript, TypeScript, HTML, and CSS. He has built rich front-end experiences for companies such as Dell, Constant Contact, and Salesforce. He is the author of Using Gatsby and Netlify CMS (Apress, 2020) and Web API Cookbook (O’Reilly, 2024). You can find him on X at @JoeAttardi.
📄 Page
16
xvii About the Technical Reviewer Kevin Wilson is a seasoned computer industry professional with over 20 years of experience and a master’s degree in computer science software engineering. His expertise covers computer programming, software development, IT support, computer networks, cybersecurity, web development, graphic design, digital photography, film production, and visual effects. As writer and director at Elluminet Press Ltd, he has authored numerous best-selling technology books and video training courses on topics including Microsoft Office, Windows, Mac, computer hardware, Python programming, and web development, used by learners worldwide. He is also an experienced lecturer and IT trainer, as well as a consultant and reviewer for various technical publications. Known for his clear, visual, step-by-step teaching style, Kevin excels at making complex subjects accessible to students, professionals, and everyday users alike.
📄 Page
17
xix Acknowledgments First and foremost, thanks to my wonderful wife, Liz, for always supporting and believing in me (and dealing with my loud typing!). And my son, Benjamin, for giving me much needed breaks from writing for playtime. Thanks to all my friends and family for always supporting and encouraging my interest in computers and technology. Many thanks to the team at Apress, particularly Anandadeep Roy and Krishnan Sathyamurthy, for working with me on the second edition of Modern CSS. I appreciate the technical feedback from Kevin Wilson. And finally, my thanks to Louise Corrigan, who brought me on board with Apress for the first edition back in 2020.
📄 Page
18
xxi Introduction In this second edition of Modern CSS, we will again take a tour of modern CSS. Whether you’re brand new to CSS or you have some experience and need a refresher, or if you want to catch up on the newest CSS techniques, this book will have something for you. This book will not teach you color theory or good design techniques. The intent of this book is to give you a strong foundation with the various CSS technologies. The second edition has been updated throughout to add additional content about newer CSS features, make some clarifications, and fix some mistakes. Here’s what we’ll cover: In Chapter 1, we’ll start at the very beginning and talk about what CSS is, how it works, and how stylesheets are structured. We’ll look at the DOM, the CSSOM, and the render tree. In Chapter 2, we will cover CSS selectors. These are critical to understand. Selectors determine what CSS styles are applied to what elements. We’ll also explore the concept of specificity. Once we’ve laid the groundwork, we’ll start to talk about CSS concepts in Chapter 3 like the box model, units, colors, and overflow. We’ll also look at CSS custom properties, better known as variables. We’ll finally start applying styles in Chapter 4, where we’ll look at borders, box shadows, and opacity. We will see several ways to hide an element on the page. In Chapter 5, we’ll learn all about backgrounds and gradients (which are a type of background image). Chapter 6 deals with the important topic of styling text. We’ll learn about text styles and layout, as well as how to use web fonts. We’ll see how to lay out and position elements in Chapter 7. This covers the different positions such as static, relative, absolute, fixed, and sticky. Also, in this chapter, we’ll see the topic of stacking contexts and Z-index, which often trip up even experienced developers (including the author!). In Chapter 8, we’ll cover CSS transforms. This allows you to apply transformations such as rotation, scale, and skew to elements.
📄 Page
19
xxii Transforms can be combined with transitions, which is one topic of Chapter 9, to create all kinds of interesting effects. Transitions can be applied to transforms or a slew of other CSS properties. Chapter 9 also covers animations, which takes the concepts of transitions to the next level. Chapter 10 is dedicated to the flexible box layout, or flexbox, which is a powerful one-dimensional layout tool that has excellent browser support. With flexbox, we can finally easily center a div! Chapter 11 is all about CSS Grid, the latest and greatest layout CSS tool. We’ll also take a look at the newer CSS Subgrid feature. In Chapter 12, we’ll explore the topic of responsive design. While it’s not an exhaustive guide – entire books have been written on the subject – it lays a good foundation, covering topics such as media queries, container queries, and fluid typography. Finally, Chapter 13 will cover some miscellaneous CSS topics that didn’t fit elsewhere in the book. InTroduCTIon
📄 Page
20
1 © Joe Attardi 2025 J. Attardi, Modern CSS, https://doi.org/10.1007/979-8-8688-1727-4_1 CHAPTER 1 Introduction to CSS CSS, or Cascading Style Sheets, is a language for applying styling and layout to HTML documents. You can use it for everything from changing text color to creating complex grid layouts to performing animated transitions and everything in between. The interesting part of CSS is the “Cascading” part. Because more than one style rule can apply to a given HTML element, there needs to be some way to determine which rule should apply in the event of a conflict. The styles “cascade” from less specific to more specific selectors (a concept called specificity), and the most specific rule wins. If two rules have the same specificity, then whichever rule comes last in the stylesheet wins. Anatomy of a CSS Rule A CSS stylesheet consists of rules. CSS rules target HTML elements by using selectors that describe the elements that should be styled. As you’ll see later, elements can be selected in many ways. Rule Syntax A CSS rule consists of a selector followed by a collection of CSS properties, contained inside curly braces. The properties consist of a name and value, separated by a colon, and are separated from each other with semicolons. A property may have a single value or a collection of multiple values, depending on the property. The properties in a rule are applied to every element in the document that matches the selector. Figure 1-1 shows an example of a CSS rule.