CSS in Depth

To create web designs that delight, entertain, and impress your users, you need to know CSS in depth!

Getting good—really good—at CSS means learning everything that CSS is capable of. This totally revised new edition of CSS in Depth expands your CSS skills with the patterns, layouts, and methods you need to deliver truly beautiful front ends.

In CSS in Depth, Second Edition you will learn how to:

• Create a web page with layout methods

• Develop essential website components, like dropdown menus and dialog boxes

• Make your website fully responsive across devices

• Organize your CSS for easy future maintenance

• Implement designer mockups with attention to detail

• Use animations to guide user focus

• Avoid common CSS pitfalls

The more you know about CSS, the more confident you’ll be at tackling any tricky website design! CSS in Depth has given thousands of web developers the tools and the inspiration to make sites that really pop. This second edition is packed with the latest best practices, new CSS language features, and essential advice on how to organize and maintain your CSS codebase.

Foreword by Chris Coyier.

About the technology

To deliver truly beautiful frontends, you need to know CSS inside and out. And as CSS grows and matures, even experienced CSS developers will find a whole new set of skills to catch up on! This guide will help you discover everything that CSS is capable of—from the must-knows and brand-new features to the hidden insights you won’t find anywhere else!

About the book

CSS in Depth, Second Edition, deep dives into the CSS techniques used by the world’s most skilled web developers. Inside, you’ll learn how to build and organize a modular CSS codebase that’s easy to understand, maintain, and reuse. This new edition is fully revised to cover the CSS standard’s latest additions, including cascade layers, logical properties, new color functions, subgrid, and container queries.

What’s inside

• Vertical centering, margin collapsing, and positioning

• Dropdown menus and modal dialog boxes

• Animations to guide user focus

• Avoiding common CSS pitfalls

About the reader

Written for web developers who know the basics of CSS and HTML.

Table of Contents

PART 1.Reviewing the fundamentals

1. Cascade, specificity, and inheritance

2. Working with relative units

3. Document flow and the box model

PART 2. Mastering layout

4. Flexbox

5. Grid layout

6. Positioning and stacking contexts

7. Responsive design

PART 3. Modern code organization

8. Cascade layers and nesting

9. Modular CSS and scope

10. Container queries

PART 4. Visual enhancements

11. Color and contrast

12. Typography and spacing

13. Gradients, shadows, and blend modes

14. Masks, shapes, and clipping

PART 5. Adding motion

15. Transitions

16. Transforms

17. Animations

APPENDIXES.

A. Selectors reference

B. Preprocessors

About the Author

Keith J. Grant is a Principal Software Engineer at Red Hat, where he works on front-end code for the Ansible Controller web application using JavaScript and CSS.

The technical editor on this book was Chris Chinchilla.