Modern CSS Master the Key Concepts of CSS for Modern Web Development, 2nd ed. (Joe Attardi) (Z-Library)

Modern CSS Master the Key Concepts of CSS for Modern Web Development — Second Edition — Joe Attardi

Modern CSS Master the Key Concepts of CSS for Modern Web Development Second Edition Joe Attardi

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

To Liz and Benjamin

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.

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.   

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.

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.

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

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.