CSS: The Definitive Guide

UI-State Pseudo-Classes
The :lang() and :dir() Pseudo-Classes
Logical Pseudo-Classes
The :has() Pseudo-Class
Other Pseudo-Classes
Pseudo-Element Selectors
Styling the First Letter
Styling the First Line
Restrictions on ::first-letter and ::first-line
The Placeholder Text Pseudo-Element
The Form Button Pseudo-Element
Generating Content Before and After Elements
Highlight Pseudo-Elements
The Backdrop Pseudo-Element
The Video-Cue Pseudo-Element
Shadow Pseudo-Classes and -Elements
Shadow Pseudo-Classes
Shadow Pseudo-Elements
Summary

4. Specificity, Inheritance, and the Cascade
Specificity
Declarations and Specificity
Resolving Multiple Matches
Zeroed Selector Specificity
ID and Attribute Selector Specificity
Importance
Inheritance
The Cascade
Sorting by Importance and Origin
Sorting by Element Attachment
Sorting by Cascade Layer
Sorting by Specificity
Sorting by Order
Working with Non-CSS Presentational Hints
Summary

5. Values and Units
Keywords, Strings, and Other Text Values
Keywords
The all Property
Strings
Identifiers
URLs
Images
Numbers and Percentages
Integers
Numbers
Percentages
Fractions
Distances
Absolute Length Units
Resolution Units
Relative Length Units
Root-Relative Length Units
Viewport-Relative Units
Function Values
Calculation Values
Maximum Values
Minimum Values
Clamping Values
Attribute Values
Color
Named Colors
Color Keywords
Colors by RGB and RGBa
HSL and HSLa Colors
Colors with HWB
Lab Colors
LCH Colors
Oklab and Oklch
Using color()
Applying Color
Affecting Form Elements
Inheriting Color
Angles
Time and Frequency
Ratios
Position
Custom Properties
Custom Property Fallbacks
Summary

6. Basic Visual Formatting
Basic Boxes
A Quick Primer
The Containing Block
Altering Element Display
Changing Roles
Handling Block Boxes
Logical Element Sizing
Content-Based Sizing Values
Minimum and Maximum Logical Sizing
Height and Width
Altering Box Sizing
Block-Axis Properties
Auto Block Sizing
Percentage Heights
Handling Content Overflow
Negative Margins and Collapsing
Collapsing Block-Axis Margins
Inline-Axis Formatting
Inline-Axis Properties
Using auto
Negative Margins
Percentages
Replaced Elements
List Items
Box Sizing with Aspect Ratios
Inline Formatting
Line Layout
Basic Terms and Concepts
Line Heights
Inline Nonreplaced Elements
Building the Boxes
Setting Vertical Alignment
Managing the Line Height
Adding Box Properties to Nonreplaced Elements
Changing Breaking Behavior
Glyphs Versus Content Area
Inline Replaced Elements
Adding Box Properties to Replaced Elements
Replaced Elements and the Baseline
Inline-Block Elements
Flow Display
Content Display
Other Display Values
Element Visibility
Animating Visibility
Summary

7. Padding, Borders, Outlines, and Margins
Basic Element Boxes
Padding
Replicating Values
Single-Side Padding
Logical Padding
Percentage Values and Padding
Padding and Inline Elements
Padding and Replaced Elements
Borders
Borders with Style
Border Widths
Border Colors
Single-Side Shorthand Border Properties
Global Borders
Borders and Inline Elements
Rounding Border Corners
Image Borders
Outlines
Outline Styles
Outline Width
Outline Color
How They Are Different
Margins
Length Values and Margins
Percentages and Margins
Single-Side Margin Properties
Margin Collapsing
Negative Margins
Margins and Inline Elements
Summary

8. Backgrounds
Setting Background Colors
Explicitly Setting a Transparent Background
Background and Color Combinations
Clipping the Background
Working with Background Images
Using an Image
Understanding Why Backgrounds Aren’t Inherited
Following Good Background Practices
Positioning Background Images
Background Repeating (or Lack Thereof)
Getting Attached
Sizing Background Images
Bringing It All Together
Working with Multiple Backgrounds
Using the Background Shorthand
Creating Box Shadows
Summary

9. Gradients
Linear Gradients
Setting Gradient Colors
Positioning Color Stops
Setting Color Hints
Understanding Gradient Lines: The Gory Details
Repeating Linear Gradients
Radial Gradients
Setting Shape and Size
Positioning Radial Gradients
Using Radial Color Stops and the Gradient Ray
Handling Degenerate Cases
Repeating Radial Gradients
Conic Gradients
Creating Conic Color Stops
Repeating Conic Gradients
Manipulating Gradient Images
Creating Special Effects
Triggering Average Gradient Colors
Summary

10. Floating and Positioning
Floating
Floated Elements
Floating: The Details
Applied Behavior
Floats, Content, and Overlapping
Clearing
Positioning
Types of Positioning
The Containing Block
Offset Properties
Inset Shorthands
Setting Width and Height
Limiting Width and Height
Absolute Positioning
Containing Blocks and Absolutely Positioned Elements
Placement and Sizing of Absolutely Positioned Elements
Auto-edges
Placing and Sizing Nonreplaced Elements
Placing and Sizing Replaced Elements
Placement on the Z-Axis
Fixed Positioning
Relative Positioning
Sticky Positioning
Summary

11. Flexible Box Layout
Flexbox Fundamentals
A Simple Example
Flex Containers
Using the flex-direction Property
Working with Other Writing Directions
Wrapping Flex Lines
Defining Flexible Flows
Understanding Axes
Arrangement of Flex Items
Flex Item Alignment
Justifying Content
Aligning Items
Aligning Flex Lines
Using the place-content Property
Opening Gaps Between Flex Items
Flex Items
What Are Flex Items?
Flex Item Features
Absolute Positioning
Minimum Widths
Flex-Item-Specific Properties
The flex Property
The flex-grow Property
Growth Factors and the flex Property
The flex-shrink Property
The flex-basis Property
The flex Shorthand
The order Property
Tabbed Navigation Revisited
Summary

12. Grid Layout
Creating a Grid Container
Understanding Basic Grid Terminology
Creating Grid Lines
Using Fixed-Width Grid Tracks
Using Flexible Grid Tracks
Fitting Track Contents
Repeating Grid Tracks
Defining Grid Areas
Placing Elements in the Grid
Using Column and Row Lines
Using Row and Column Shorthands
Working with Implicit Grid
Handling Errors
Using Areas
Understanding Grid-Item Overlap
Specifying Grid Flow
Defining Automatic Grid Tracks
Using the grid Shorthand
Using Subgrids
Defining Explicit Tracks
Dealing with Offsets
Naming Subgridded Lines
Giving Subgrids Their Own Gaps
Grid Items and the Box Model
Setting Alignment in Grids
Aligning and Justifying Individual Items
Aligning and Justifying All Items
Distributing Grid Items and Tracks
Layering and Ordering
Summary

13. Table Layout in CSS
Table Formatting
Visually Arranging a Table
Table Arrangement Rules
Setting Table Display Values
Inserting Anonymous Table Objects
Working with Table Layers
Using Captions
Table Cell Borders
Separated Cell Borders
Collapsed Cell Borders
Table Sizing
Width
Height
Alignment
Summary

14. Fonts
Font Families
Using Generic Font Families
Using Quotation Marks
Using Custom Fonts
Using Font-Face Descriptors
Restricting Character Range
Working with Font Display
Combining Descriptors
Font Weights
How Weights Work
The font-weight Descriptor
Font Size
Using Absolute Sizes
Using Relative Sizes
Setting Sizes as Percentages
Automatically Adjusting Size
Font Style
The font-style Descriptor
Font Stretching
The font-stretch Descriptor
Font Synthesis
Font Variants
Capital Font Variants
Numeric Font Variants
Ligature Variants
Alternate Variants
East Asian Font Variants
Font Variant Position
Font Feature Settings
The font-feature-settings Descriptor
Font Variation Settings
Font Optical Sizing
Override Descriptors
Font Kerning
The font Property
Understanding font Property Limitations
Adding the Line Height
Using the Shorthand Properly
Using System Fonts
Font Matching
Summary

15. Text Properties
Indentation and Inline Alignment
Indenting Text
Aligning Text
Aligning the Last Line
Word Spacing
Letter Spacing
Spacing and Alignment
Vertical Alignment
Adjusting the Height of Lines
Vertically Aligning Text
Text Transformation
Text Decoration
Setting Text Decoration Line Placement
Setting Text Decoration Color
Setting Text Decoration Thickness
Setting Text Decoration Style
Using the Text Decoration Shorthand Property
Offsetting Underlines
Skipping Ink
Understanding Weird Decorations
Text Rendering
Text Shadows
Text Emphasis
Setting Emphasis Style
Changing Emphasis Color
Placing Emphasis Marks
Using the text-emphasis Shorthand
Setting Text Drawing Order
Whitespace
Setting Tab Sizes
Wrapping and Hyphenation
Hyphenation
Word Breaking
Line Breaking
Wrapping Text
Writing Modes
Setting Writing Modes
Changing Text Orientation
Combining Characters
Declaring Direction
Summary

16. Lists and Generated Content
Working with Lists
Types of Lists
List-Item Images
List-Marker Positions
List Styles in Shorthand
List Layout
The ::marker Pseudo-Element
Creating Generated Content
Inserting Generated Content
Specifying Content
Defining Counters
Defining Counting Patterns
Fixed Counting Patterns
Cyclic Counting Patterns
Symbolic Counting Patterns
Alphabetic Counting Patterns
Numeric Counting Patterns
Additive Counting Patterns
Extending Counting Patterns
Speaking Counting Patterns
Summary

17. Transforms
Coordinate Systems
Transforming
The Transform Functions
Translation
Scaling
Element Rotation
Individual Transform Property Order
Skewing
Matrix Functions
Setting Element Perspective
More Transform Properties
Moving the Transform’s Origin
Choosing the Transform’s Box
Choosing a 3D Style
Changing Perspective
Dealing with Backfaces
Summary

18. Transitions
CSS Transitions
Transition Properties
Limiting Transition Effects by Property
Setting Transition Duration
Altering the Internal Timing of Transitions
Delaying Transitions
Using the transition Shorthand
Reversing Interrupted Transitions
Animatable Properties and Values
How Property Values Are Interpolated
Interpolating Repeating Values
Printing Transitions
Summary

19. Animation
Accommodating Seizure and Vestibular Disorders
Defining Keyframes
Setting Up Keyframe Animations
Defining Keyframe Selectors
Omitting from and to Values
Repeating Keyframe Properties
Animatable Properties
Using Nonanimatable Properties That Aren’t Ignored
Scripting @keyframes Animations
Animating Elements
Invoking a Named Animation
Defining Animation Lengths
Declaring Animation Iterations
Setting an Animation Direction
Delaying Animations
Exploring Animation Events
Changing the Internal Timing of Animations
Setting the Animation Play State
Animation Fill Modes
Bringing It All Together
Animation, Specificity, and Precedence Order
Specificity and !important
Animation Iteration and display: none;
Animation and the UI Thread
Using the will-change Property
Printing Animations
Summary

20. Filters, Blending, Clipping, and Masking
CSS Filters
Basic Filters
Color Filtering
Brightness, Contrast, and Saturation
SVG Filters
Compositing and Blending
Blending Elements
Blending Backgrounds
Blending in Isolation
Containing Elements
Float Shapes
Shaping with Image Transparency
Using Inset Shapes
Adding a Shape Margin
Clipping and Masking
Clipping
Clip Shapes
Clip Boxes
Clipping with SVG Paths
Masks
Defining a Mask
Changing the Mask’s Mode
Sizing and Repeating Masks
Positioning Masks
Clipping and Compositing Masks
Bringing It All Together
Setting Mask Types
Border-Image Masking
Object Fitting and Positioning
Summary

21. CSS At-Rules
Media Queries
Basic Media Queries
Complex Media Queries
Special Value Types
Keyword Media Features
Forced Colors, Contrast, and Display Mode
Ranged Media Features
Deprecated Media Features
Responsive Styling
Paged Media
Print Styles
Differences Between Screen and Print
Page Size
Page Margins and Padding
Named Page Types
Page Breaking
Orphans and Widows
Page-Breaking Behavior
Repeated Elements
Elements Outside the Page
Container Queries
Defining Container Types
Defining Container Names
Using Container Shorthand
Using Container At-Rules
Defining Container Query Features
Setting Container Length Units
Feature Queries (@supports)
Other At-Rules
Defining a Character Set for a Stylesheet
Defining a Namespace for Selectors
Summary

A. Additional Resources

Index
About the Authors