book

CSS in Depth, Second Edition

Name: CSS in Depth, Second Edition
Author: Keith Grant
ISBN: 9781633437555

by Keith Grant

September 2024

Beginner to intermediate

544 pages

15h 11m

English

Manning Publications

Audiobook available

Read now

Unlock full access

Praise for the first edition
CSS in Depth, Second Edition
copyright
contents
foreword
preface
acknowledgments
about this book
Who should read this book?How this book is organized: A roadmapCode conventions and repositoryliveBook discussion forumBrowser versions
about the author
about the cover illustration

Part 1 Reviewing the fundamentals
1 Cascade, specificity, and inheritance
1.1 The cascade1.1.1 Stylesheet origin1.1.2 Inline styles1.1.3 Selector specificity1.1.4 Source order1.2 Inheritance1.3 Special values1.3.1 The inherit keyword1.3.2 The initial keyword1.3.3 The unset keyword1.3.4 The revert keyword1.4 Shorthand properties1.4.1 Beware shorthands silently overriding other styles1.4.2 Remember the order of shorthand values1.5 Progressive enhancement1.5.1 Using the cascade for progressive enhancement1.5.2 Progressively enhancing selectors1.5.3 Feature queries using @supports()Summary
2 Working with relative units
2.1 The power of relative units2.1.1 The rise of responsive design2.2 Ems and rems2.2.1 Using ems to define font-size2.2.2 Using rems for font-size2.3 Stop thinking in pixels2.3.1 Setting a sane default font size2.3.2 Making the panel responsive2.3.3 Resizing a single component2.4 Viewport-relative units2.4.1 Selecting from the newer viewport units2.4.2 Using viewport units for font size2.5 Unitless numbers and line-height2.6 Custom properties (aka CSS variables)2.6.1 Changing custom properties dynamicallySummary
3 Document flow and the box model
3.1 Normal document flow3.1.1 Centering content horizontally3.1.2 Using logical properties3.1.3 Adopting useful shorthand logical properties3.2 The box model3.2.1 Avoiding magic numbers3.2.2 Adjusting the box model3.2.3 Using universal border box sizing3.3 Element height3.3.1 Controlling overflow behavior3.3.2 Using alternatives to percentage-based heights3.3.3 Using min-height and max-height3.4 Negative margins3.5 Collapsed margins3.5.1 Collapsing between text3.5.2 Collapsing multiple margins3.5.3 Collapsing outside a container3.6 Spacing elements within a container3.6.1 Considering changing content3.6.2 Creating a more general solutionSummary
Part 2 Mastering layout
4 Flexbox
4.1 Flexbox principles4.1.1 Building a basic flexbox menu4.1.2 Adding padding and spacing4.2 Flex item sizes4.2.1 Flex basis4.2.2 Flex grow4.2.3 Flex shrink4.2.4 Some practical examples4.3 Flex direction4.3.1 Changing the flex direction4.3.2 Styling the login form4.4 Alignment, spacing, and other details4.4.1 Understanding flex container properties4.4.2 Understanding flex item properties4.4.3 Using alignment propertiesSummary
5 Grid layout
5.1 Building a basic grid5.2 Anatomy of a grid5.2.1 Numbering grid lines5.2.2 Working together with flexbox5.3 Alternate syntaxes5.3.1 Naming grid lines5.3.2 Naming grid areas5.4 Explicit and implicit grid5.4.1 Adding variety5.4.2 Adjusting grid items to fill the grid track5.5 Subgrid5.5.1 Additional options5.6 Alignment propertiesSummary
6 Positioning and stacking contexts
6.1 Fixed positioning6.1.1 Creating a modal dialog with fixed positioning6.1.2 Preventing the screen from scrolling while the modal dialog is open6.1.3 Controlling the size of positioned elements6.2 Absolute positioning6.2.1 Absolutely positioning the Close button6.2.2 Positioning a pseudo-element6.3 Relative positioning6.3.1 Creating a dropdown menu6.3.2 Creating a CSS triangle6.4 Stacking contexts and z-index6.4.1 Understanding the rendering process and stacking order6.4.2 Manipulating stacking order with z-index6.4.3 Understanding stacking contexts6.5 Sticky positioningSummary
7 Responsive design
7.1 Mobile first7.1.1 Creating a mobile menu7.1.2 Adding the viewport meta tag7.2 Media queries7.2.1 Understanding types of media queries7.2.2 Adding breakpoints to the page7.2.3 Adding responsive columns7.3 Fluid layouts7.3.1 Adding styles for a large viewport7.3.2 Dealing with tables7.4 Responsive images7.4.1 Using multiple images for different viewport sizes7.4.2 Using srcset to serve the correct imageSummary
Part 3 Modern code organization
8 Cascade layers and nesting
8.1 Manipulating the cascade with layers8.1.1 Defining layers8.1.2 Layer order and priority8.1.3 The revert-layer keyword8.2 A recommended organization for cascade layers8.2.1 Reset layer8.2.2 Theme layer8.2.3 Global layer8.2.4 Layout layer8.2.5 Modules layer8.2.6 Utilities layer8.2.7 Additional layers8.3 The :is() and :where() pseudo-classes8.3.1 More forgiving selectors8.3.2 Manipulating specificity8.4 Nesting8.4.1 Using the nesting selector8.4.2 Understanding the nuances of the nesting selector8.4.3 Nesting media queries and other at-rulesSummary
9 Modular CSS and scope
9.1 Defining modules9.1.1 Modules and global styles9.1.2 A simple module9.1.3 Variations of a module9.1.4 Modules with multiple elements9.2 Modules composed into larger structures9.2.1 Dividing multiple responsibilities among modules9.2.2 Naming modules9.3 CSS scope9.3.1 Scope proximity9.3.2 Scoping limit9.3.3 Implicit scope9.3.4 Scope and layers9.4 Pattern libraries9.4.1 Using a CSS-first workflow9.4.2 Refactoring and breaking changesSummary
10 Container queries
10.1 A basic example of a container query10.1.1 Using container size queries10.2 A closer look at containers10.2.1 Container types10.2.2 Container names10.2.3 Containers and modular CSS10.3 Container-relative units10.4 Container style queries10.4.1 Decoupling a module from its container10.4.2 Reducing code duplicationSummary
Part 4 Visual enhancements
11 Color and contrast
11.1 Communicating with contrast11.1.1 Establishing patterns11.1.2 Implementing the design11.2 Defining color11.2.1 Gamuts and color spaces11.2.2 CSS color notations11.3 Using OKLCH to work with color11.3.1 Switching the stylesheet to OKLCH11.3.2 Naming color variables11.3.3 Selecting new colors for the palette11.3.4 Deriving colors from others on the page11.4 Considering contrast for font colorsSummary
12 Typography and spacing
12.1 Spacing12.1.1 Using ems vs. px12.1.2 Factoring in line height12.1.3 Spacing inline elements12.2 Web fonts12.3 Google fonts12.4 How @font-face works12.4.1 Font formats and fallbacks12.4.2 Multiple variants of the same typeface12.5 Performance considerations12.5.1 The font-display property12.5.2 Variable fonts12.6 Adjusting space for readability12.6.1 Body copy spacing12.6.2 Headings, small elements, and spacingSummary
13 Gradients, shadows, and blend modes
13.1 Gradients13.1.1 Multiple color stops13.1.2 Color interpolation13.1.3 Radial gradients13.1.4 Conic gradients13.2 Shadows13.2.1 Adding depth with gradients and shadows13.2.2 Creating elements with a flat design13.2.3 Creating buttons with a hybrid look13.3 Blend modes13.3.1 Tinting an image13.3.2 Types of blend modes13.3.3 Adding texture to an image13.3.4 Mix blend modesSummary
14 Masks, shapes, and clipping
14.1 Filters14.1.1 Types of filters14.1.2 Backdrop filter14.2 Masks14.2.1 Masking with a gradient14.2.2 Masking using luminance14.2.3 Other mask properties14.3 Clipping paths14.3.1 Polygon clipping paths14.3.2 Firefox clip-path tools14.3.3 Other clip-path types14.4 Floats and shapes14.4.1 Floating14.4.2 Defining a shapeSummary
Part 5 Adding motion
15 Transitions
15.1 From here to there15.2 Timing functions15.2.1 Custom Bézier curves15.2.2 Steps15.3 Non-animatable properties15.3.1 Properties that cannot be animated15.3.2 Fading in and out15.4 Transitioning to auto height15.5 Transitioning custom propertiesSummary
16 Transforms
16.1 Rotate, translate, scale, and skew16.1.1 Changing the transform origin16.1.2 Applying multiple transforms16.1.3 Individual transform properties16.2 Transforms in motion16.2.1 Scaling up the icon16.2.2 Creating “fly in” labels16.2.3 Staggering the transitions16.3 Animation performance16.3.1 Looking at the rendering pipeline16.4 3D transforms16.4.1 Controlling perspective16.4.2 Implementing advanced 3D transformsSummary
17 Animations
17.1 Keyframes17.2 Animating 3D transforms17.2.1 Building the layout without animations17.2.2 Adding animation to the layout17.3 Animation delay and fill mode17.4 Conveying meaning through animation17.4.1 Responding to user interaction17.4.2 Drawing the user’s attention17.5 Scroll-based timelines17.6 One final piece of adviceSummary
appendix A Selectors reference
A.1 Basic selectorsA.2 CombinatorsA.3 Compound selectorsA.4 Pseudo-class selectorsA.4.1 General-purpose pseudo-classesA.4.2 Selecting based on position among sibling elementsA.4.3 Form field pseudo-classesA.5 Pseudo-element selectorsA.6 Attribute selectors
appendix B Preprocessors
B.1 SassB.1.1 Installing SassB.1.2 Running SassB.1.3 Understanding important Sass featuresB.2 PostCSSB.2.1 AutoprefixerB.2.2 cssnanoB.3 Lightning CSS
index

Content preview from CSS in Depth, Second Edition

4 Flexbox

This chapter covers

Laying out elements of a page using flexbox
Flex containers and flex items
Main axis and cross axis
Element sizing in flexbox
Element alignment in flexbox

In chapter 3, we looked at normal document flow—the way the browser lays out elements on the page by default. In the next few chapters, we’ll explore the other forms of layout available to you, particularly flexbox, grid, and positioning. With these tools, you will have far more options available; you will be able to structure pages in almost any way imaginable.

Flexbox—formally Flexible Box Layout—is a method for laying out elements on the page. It’s primarily used for arranging elements in a row or column. It also provides a simple solution to the historically ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781633437555Publisher Support Publisher Website Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

CSS in Depth, Second Edition

by Keith Grant