Preface

CSS has grown from a language for formatting documents into a robust language for designing web applications. Its syntax is easy to learn, making CSS a great entry point for those new to programming. Indeed, it’s often the second language that developers learn, right behind HTML.

However, the simplicity of CSS syntax is deceptive. It belies the complexity of the box model, stacking contexts, specificity, and the cascade. It’s tough to develop interfaces that work across a variety of screen sizes and with an assortment of input mechanisms. CSS mastery lies in understanding these concepts and how to mitigate them.

Mastering CSS development also means learning how to work with tools such as linters and optimizers. Linters inspect your code for potential trouble spots. Optimizers improve CSS quality, and reduce the number of bytes delivered to the browser. And, of course, there’s the question of CSS architecture: which selectors to use, how to modularize files, and how to prevent selector creep.

CSS has also grown in its capabilities. Until recently, we had to use clunky methods such as float, or weighty JavaScript libraries, to create the kinds of layouts that are now possible with the Flexible Box, Multicolumn, and Grid layout modules. Three-dimensional effects were impossible—or required images—before the arrival of CSS transforms. Creating slide shows is now trivial thanks to Scroll Snap. We even have support for variables.

What’s Changed in This Edition?

As with previous editions, writing this edition required careful consideration of what to include and what to exclude. The third edition restores and expands the “Selectors” chapter from the first edition. The “Layouts” chapter now includes a section on CSS Shapes, and a more comprehensive look at Flexible Box (aka Flexbox) layout.

This edition also adds two entirely new chapters. One covers the scroll-behavior property and the ins-and-outs of CSS Scroll Snap. The second covers CSS visual effects: blend modes, filter effects, clipping and masking.

But CSS Master isn’t a comprehensive guide to CSS. CSS is a dense and ever-expanding topic with lots of nooks and crannies. Trying to cover it all is a massive task. Instead, my hope is that you’ll come away from this book with a better sense of how CSS works—particularly its trickier bits—and how to write it well.

Who Should Read This Book?

This book is for intermediate-level CSS developers, as it assumes a fair amount of experience with HTML and CSS. No time is spent covering the basics of CSS syntax. Coverage of CSS concepts such as the box model and positioning are included to illuminate concepts for the experienced developer, but this coverage is not meant as an introduction for beginners. Experience with JavaScript is helpful, but not necessary.

Conventions Used

Code Samples

Code in this book is displayed using a fixed-width font, like so:

<h1>A Perfect Summer's Day</h1>
<p>It was a lovely day for a walk in the park.
The birds were singing and the kids were all back at school.</p>
			

You’ll notice that we’ve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

Tips, Notes, and Warnings

Supplementary Materials

• https://www.sitepoint.com/community/ are SitePoint’s forums, for help on any tricky problems.
• This book's code archive is available on GitHub.
• [email protected] is our email address, should you need to contact us to report a problem, or for any other reason.