CSS: The Definitive Guide, 5th Edition

CSS: The Definitive Guide, 5th Edition

by Eric Meyer, Estelle Weyl
Released May 2023
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781098117610

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

If you're a web designer or app developer interested in sophisticated page styling, improved accessibility, and less time and effort expended, this book is for you. This revised fifth edition provides a comprehensive guide to CSS implementation along with a thorough review of the latest CSS specifications.

Authors Eric Meyer and Estelle Weyl show you how to improve user experience, speed development, avoid potential bugs, and add life and depth to your applications through layout, transitions and animations, borders, backgrounds, text properties, and many other tools and techniques. We read the specs so you don't have to!

This guide covers:

  • Selectors, specificity, and the cascade, including information on the new cascade layers
  • New and old CSS values and units, including CSS variables and ways to size based on viewports
  • Details on font technology and ways to use any available font variants
  • Text styling, from basic decoration to changing the entire writing mode
  • Padding, borders, outlines, and margins, now discussed in terms of the new block- and inline-direction layout paradigm used by modern browsers
  • Colors, backgrounds, and gradients, including the conic gradients
  • Accessible data tables
  • Flexible box and grid layout systems, including new subgrid capabilities
  • 2D and 3D transforms, transitions, and animation
  • Filters, blending, clipping, and masking
  • Media, feature, and container queries

Publisher resources

View/Submit Errata

Table of contents

  1. Preface
    1. Conventions Used in This Book
      1. Value Syntax Conventions
    2. Using Code Examples
    3. O’Reilly Online Learning
    4. How to Contact Us
    5. Acknowledgments
      1. Eric Meyer
      2. Estelle Weyl
  2. 1. CSS Fundamentals
    1. A Brief History of (Web) Style
    2. Stylesheet Contents
      1. Rule Structure
      2. Vendor Prefixing
      3. Whitespace Handling
      4. CSS Comments
      5. Markup
    3. Elements
      1. Replaced and Nonreplaced Elements
      2. Element Display Roles
    4. Bringing CSS and HTML Together
      1. The <link> Tag
      2. The <style> Element
      3. The @import Directive
      4. HTTP Linking
      5. Inline Styles
    5. Summary
  3. 2. Selectors
    1. Basic Style Rules
    2. Type Selectors
    3. Grouping
      1. Grouping Selectors
      2. Grouping Declarations
      3. Grouping Everything
    4. Class and ID Selectors
      1. Class Selectors
      2. Multiple Classes
      3. ID Selectors
      4. Deciding Between Class and ID
    5. Attribute Selectors
      1. Simple Attribute Selectors
      2. Selection Based on Exact Attribute Value
      3. Selection Based on Partial Attribute Values
      4. The Case-Insensitivity Identifier
    6. Using Document Structure
      1. Understanding the Parent-Child Relationship
      2. Defining Descendant Selectors
      3. Selecting Children
      4. Selecting Adjacent-Sibling Elements
      5. Selecting Following Siblings
    7. Summary
  4. 3. Pseudo-Class and -Element Selectors
    1. Pseudo-Class Selectors
      1. Combining Pseudo-Classes
      2. Structural Pseudo-Classes
      3. Location Pseudo-Classes
      4. User Action Pseudo-Classes
      5. UI-State Pseudo-Classes
      6. The :lang() and :dir() Pseudo-Classes
      7. Logical Pseudo-Classes
      8. The :has() Pseudo-Class
      9. Other Pseudo-Classes
    2. Pseudo-Element Selectors
      1. Styling the First Letter
      2. Styling the First Line
      3. Restrictions on ::first-letter and ::first-line
      4. The Placeholder Text Pseudo-Element
      5. The Form Button Pseudo-Element
      6. Generating Content Before and After Elements
      7. Highlight Pseudo-Elements
      8. The Backdrop Pseudo-Element
      9. The Video-Cue Pseudo-Element
    3. Shadow Pseudo-Classes and -Elements
      1. Shadow Pseudo-Classes
      2. Shadow Pseudo-Elements
    4. Summary
  5. 4. Specificity, Inheritance, and the Cascade
    1. Specificity
      1. Declarations and Specificity
      2. Resolving Multiple Matches
      3. Zeroed Selector Specificity
      4. ID and Attribute Selector Specificity
      5. Importance
    2. Inheritance
    3. The Cascade
      1. Sorting by Importance and Origin
      2. Sorting by Element Attachment
      3. Sorting by Cascade Layer
      4. Sorting by Specificity
      5. Sorting by Order
      6. Working with Non-CSS Presentational Hints
    4. Summary
  6. 5. Values and Units
    1. Keywords, Strings, and Other Text Values
      1. Keywords
      2. The all Property
      3. Strings
      4. Identifiers
      5. URLs
      6. Images
    2. Numbers and Percentages
      1. Integers
      2. Numbers
      3. Percentages
      4. Fractions
    3. Distances
      1. Absolute Length Units
      2. Resolution Units
      3. Relative Length Units
      4. Root-Relative Length Units
    4. Viewport-Relative Units
    5. Function Values
      1. Calculation Values
      2. Maximum Values
      3. Minimum Values
      4. Clamping Values
      5. Attribute Values
    6. Color
      1. Named Colors
      2. Color Keywords
      3. Colors by RGB and RGBa
      4. HSL and HSLa Colors
      5. Colors with HWB
      6. Lab Colors
      7. LCH Colors
      8. Oklab and Oklch
      9. Using color()
      10. Applying Color
      11. Affecting Form Elements
      12. Inheriting Color
    7. Angles
    8. Time and Frequency
    9. Ratios
    10. Position
    11. Custom Properties
      1. Custom Property Fallbacks
    12. Summary
  7. 6. Basic Visual Formatting
    1. Basic Boxes
      1. A Quick Primer
      2. The Containing Block
    2. Altering Element Display
      1. Changing Roles
      2. Handling Block Boxes
    3. Logical Element Sizing
      1. Content-Based Sizing Values
      2. Minimum and Maximum Logical Sizing
      3. Height and Width
    4. Altering Box Sizing
    5. Block-Axis Properties
      1. Auto Block Sizing
      2. Percentage Heights
      3. Handling Content Overflow
      4. Negative Margins and Collapsing
      5. Collapsing Block-Axis Margins
    6. Inline-Axis Formatting
      1. Inline-Axis Properties
      2. Using auto
      3. Negative Margins
      4. Percentages
      5. Replaced Elements
      6. List Items
    7. Box Sizing with Aspect Ratios
    8. Inline Formatting
      1. Line Layout
      2. Basic Terms and Concepts
      3. Line Heights
      4. Inline Nonreplaced Elements
      5. Building the Boxes
      6. Setting Vertical Alignment
      7. Managing the Line Height
      8. Adding Box Properties to Nonreplaced Elements
      9. Changing Breaking Behavior
      10. Glyphs Versus Content Area
      11. Inline Replaced Elements
      12. Adding Box Properties to Replaced Elements
      13. Replaced Elements and the Baseline
      14. Inline-Block Elements
      15. Flow Display
      16. Content Display
      17. Other Display Values
    9. Element Visibility
      1. Animating Visibility
    10. Summary
  8. 7. Padding, Borders, Outlines, and Margins
    1. Basic Element Boxes
    2. Padding
      1. Replicating Values
      2. Single-Side Padding
      3. Logical Padding
      4. Percentage Values and Padding
      5. Padding and Inline Elements
      6. Padding and Replaced Elements
    3. Borders
      1. Borders with Style
      2. Border Widths
      3. Border Colors
      4. Single-Side Shorthand Border Properties
      5. Global Borders
      6. Borders and Inline Elements
      7. Rounding Border Corners
      8. Image Borders
    4. Outlines
      1. Outline Styles
      2. Outline Width
      3. Outline Color
      4. How They Are Different
    5. Margins
      1. Length Values and Margins
      2. Percentages and Margins
      3. Single-Side Margin Properties
      4. Margin Collapsing
      5. Negative Margins
      6. Margins and Inline Elements
    6. Summary
  9. 8. Backgrounds
    1. Setting Background Colors
      1. Explicitly Setting a Transparent Background
      2. Background and Color Combinations
    2. Clipping the Background
    3. Working with Background Images
      1. Using an Image
      2. Understanding Why Backgrounds Aren’t Inherited
      3. Following Good Background Practices
      4. Positioning Background Images
      5. Background Repeating (or Lack Thereof)
      6. Getting Attached
      7. Sizing Background Images
      8. Bringing It All Together
      9. Working with Multiple Backgrounds
      10. Using the Background Shorthand
    4. Creating Box Shadows
    5. Summary
  10. 9. Gradients
    1. Linear Gradients
      1. Setting Gradient Colors
      2. Positioning Color Stops
      3. Setting Color Hints
      4. Understanding Gradient Lines: The Gory Details
      5. Repeating Linear Gradients
    2. Radial Gradients
      1. Setting Shape and Size
      2. Positioning Radial Gradients
      3. Using Radial Color Stops and the Gradient Ray
      4. Handling Degenerate Cases
      5. Repeating Radial Gradients
    3. Conic Gradients
    4. Creating Conic Color Stops
      1. Repeating Conic Gradients
    5. Manipulating Gradient Images
      1. Creating Special Effects
      2. Triggering Average Gradient Colors
    6. Summary
  11. 10. Floating and Positioning
    1. Floating
      1. Floated Elements
      2. Floating: The Details
      3. Applied Behavior
      4. Floats, Content, and Overlapping
    2. Clearing
    3. Positioning
      1. Types of Positioning
      2. The Containing Block
      3. Offset Properties
      4. Inset Shorthands
      5. Setting Width and Height
      6. Limiting Width and Height
    4. Absolute Positioning
      1. Containing Blocks and Absolutely Positioned Elements
      2. Placement and Sizing of Absolutely Positioned Elements
      3. Auto-edges
      4. Placing and Sizing Nonreplaced Elements
      5. Placing and Sizing Replaced Elements
      6. Placement on the Z-Axis
    5. Fixed Positioning
    6. Relative Positioning
    7. Sticky Positioning
    8. Summary
  12. 11. Flexible Box Layout
    1. Flexbox Fundamentals
      1. A Simple Example
    2. Flex Containers
      1. Using the flex-direction Property
      2. Working with Other Writing Directions
      3. Wrapping Flex Lines
      4. Defining Flexible Flows
      5. Understanding Axes
    3. Arrangement of Flex Items
    4. Flex Item Alignment
      1. Justifying Content
      2. Aligning Items
      3. Aligning Flex Lines
      4. Using the place-content Property
    5. Opening Gaps Between Flex Items
    6. Flex Items
      1. What Are Flex Items?
      2. Flex Item Features
      3. Absolute Positioning
      4. Minimum Widths
    7. Flex-Item-Specific Properties
      1. The flex Property
      2. The flex-grow Property
      3. Growth Factors and the flex Property
      4. The flex-shrink Property
      5. The flex-basis Property
      6. The flex Shorthand
    8. The order Property
      1. Tabbed Navigation Revisited
    9. Summary
  13. 12. Grid Layout
    1. Creating a Grid Container
    2. Understanding Basic Grid Terminology
    3. Creating Grid Lines
      1. Using Fixed-Width Grid Tracks
      2. Using Flexible Grid Tracks
      3. Fitting Track Contents
      4. Repeating Grid Tracks
      5. Defining Grid Areas
    4. Placing Elements in the Grid
      1. Using Column and Row Lines
      2. Using Row and Column Shorthands
      3. Working with Implicit Grid
      4. Handling Errors
      5. Using Areas
      6. Understanding Grid-Item Overlap
    5. Specifying Grid Flow
    6. Defining Automatic Grid Tracks
    7. Using the grid Shorthand
    8. Using Subgrids
      1. Defining Explicit Tracks
      2. Dealing with Offsets
      3. Naming Subgridded Lines
      4. Giving Subgrids Their Own Gaps
    9. Grid Items and the Box Model
    10. Setting Alignment in Grids
      1. Aligning and Justifying Individual Items
      2. Aligning and Justifying All Items
      3. Distributing Grid Items and Tracks
    11. Layering and Ordering
    12. Summary
  14. 13. Table Layout in CSS
    1. Table Formatting
      1. Visually Arranging a Table
      2. Table Arrangement Rules
      3. Setting Table Display Values
      4. Inserting Anonymous Table Objects
      5. Working with Table Layers
      6. Using Captions
    2. Table Cell Borders
      1. Separated Cell Borders
      2. Collapsed Cell Borders
    3. Table Sizing
      1. Width
      2. Height
      3. Alignment
    4. Summary
  15. 14. Fonts
    1. Font Families
      1. Using Generic Font Families
      2. Using Quotation Marks
    2. Using Custom Fonts
      1. Using Font-Face Descriptors
      2. Restricting Character Range
      3. Working with Font Display
      4. Combining Descriptors
    3. Font Weights
      1. How Weights Work
      2. The font-weight Descriptor
    4. Font Size
      1. Using Absolute Sizes
      2. Using Relative Sizes
      3. Setting Sizes as Percentages
      4. Automatically Adjusting Size
    5. Font Style
      1. The font-style Descriptor
    6. Font Stretching
      1. The font-stretch Descriptor
    7. Font Synthesis
    8. Font Variants
      1. Capital Font Variants
      2. Numeric Font Variants
      3. Ligature Variants
      4. Alternate Variants
      5. East Asian Font Variants
      6. Font Variant Position
    9. Font Feature Settings
      1. The font-feature-settings Descriptor
    10. Font Variation Settings
    11. Font Optical Sizing
    12. Override Descriptors
    13. Font Kerning
    14. The font Property
      1. Understanding font Property Limitations
      2. Adding the Line Height
      3. Using the Shorthand Properly
      4. Using System Fonts
    15. Font Matching
    16. Summary
  16. 15. Text Properties
    1. Indentation and Inline Alignment
      1. Indenting Text
      2. Aligning Text
      3. Aligning the Last Line
      4. Word Spacing
      5. Letter Spacing
      6. Spacing and Alignment
    2. Vertical Alignment
      1. Adjusting the Height of Lines
      2. Vertically Aligning Text
    3. Text Transformation
    4. Text Decoration
      1. Setting Text Decoration Line Placement
      2. Setting Text Decoration Color
      3. Setting Text Decoration Thickness
      4. Setting Text Decoration Style
      5. Using the Text Decoration Shorthand Property
      6. Offsetting Underlines
      7. Skipping Ink
      8. Understanding Weird Decorations
    5. Text Rendering
    6. Text Shadows
    7. Text Emphasis
      1. Setting Emphasis Style
      2. Changing Emphasis Color
      3. Placing Emphasis Marks
      4. Using the text-emphasis Shorthand
      5. Setting Text Drawing Order
    8. Whitespace
      1. Setting Tab Sizes
    9. Wrapping and Hyphenation
      1. Hyphenation
      2. Word Breaking
      3. Line Breaking
      4. Wrapping Text
    10. Writing Modes
      1. Setting Writing Modes
      2. Changing Text Orientation
      3. Combining Characters
      4. Declaring Direction
    11. Summary
  17. 16. Lists and Generated Content
    1. Working with Lists
      1. Types of Lists
      2. List-Item Images
      3. List-Marker Positions
      4. List Styles in Shorthand
      5. List Layout
      6. The ::marker Pseudo-Element
    2. Creating Generated Content
      1. Inserting Generated Content
      2. Specifying Content
      3. Defining Counters
    3. Defining Counting Patterns
      1. Fixed Counting Patterns
      2. Cyclic Counting Patterns
      3. Symbolic Counting Patterns
      4. Alphabetic Counting Patterns
      5. Numeric Counting Patterns
      6. Additive Counting Patterns
      7. Extending Counting Patterns
      8. Speaking Counting Patterns
    4. Summary
  18. 17. Transforms
    1. Coordinate Systems
    2. Transforming
    3. The Transform Functions
      1. Translation
      2. Scaling
      3. Element Rotation
      4. Individual Transform Property Order
      5. Skewing
      6. Matrix Functions
      7. Setting Element Perspective
    4. More Transform Properties
      1. Moving the Transform’s Origin
      2. Choosing the Transform’s Box
      3. Choosing a 3D Style
      4. Changing Perspective
      5. Dealing with Backfaces
    5. Summary
  19. 18. Transitions
    1. CSS Transitions
    2. Transition Properties
      1. Limiting Transition Effects by Property
      2. Setting Transition Duration
      3. Altering the Internal Timing of Transitions
      4. Delaying Transitions
      5. Using the transition Shorthand
      6. Reversing Interrupted Transitions
    3. Animatable Properties and Values
      1. How Property Values Are Interpolated
      2. Interpolating Repeating Values
    4. Printing Transitions
    5. Summary
  20. 19. Animation
    1. Accommodating Seizure and Vestibular Disorders
    2. Defining Keyframes
    3. Setting Up Keyframe Animations
    4. Defining Keyframe Selectors
      1. Omitting from and to Values
      2. Repeating Keyframe Properties
      3. Animatable Properties
      4. Using Nonanimatable Properties That Aren’t Ignored
      5. Scripting @keyframes Animations
    5. Animating Elements
      1. Invoking a Named Animation
      2. Defining Animation Lengths
      3. Declaring Animation Iterations
      4. Setting an Animation Direction
      5. Delaying Animations
      6. Exploring Animation Events
      7. Changing the Internal Timing of Animations
      8. Setting the Animation Play State
      9. Animation Fill Modes
    6. Bringing It All Together
    7. Animation, Specificity, and Precedence Order
      1. Specificity and !important
      2. Animation Iteration and display: none;
      3. Animation and the UI Thread
    8. Using the will-change Property
    9. Printing Animations
    10. Summary
  21. 20. Filters, Blending, Clipping, and Masking
    1. CSS Filters
      1. Basic Filters
      2. Color Filtering
      3. Brightness, Contrast, and Saturation
      4. SVG Filters
    2. Compositing and Blending
      1. Blending Elements
      2. Blending Backgrounds
      3. Blending in Isolation
    3. Containing Elements
    4. Float Shapes
      1. Shaping with Image Transparency
      2. Using Inset Shapes
      3. Adding a Shape Margin
    5. Clipping and Masking
      1. Clipping
      2. Clip Shapes
      3. Clip Boxes
      4. Clipping with SVG Paths
    6. Masks
      1. Defining a Mask
      2. Changing the Mask’s Mode
      3. Sizing and Repeating Masks
      4. Positioning Masks
      5. Clipping and Compositing Masks
      6. Bringing It All Together
      7. Setting Mask Types
      8. Border-Image Masking
    7. Object Fitting and Positioning
    8. Summary
  22. 21. CSS At-Rules
    1. Media Queries
      1. Basic Media Queries
      2. Complex Media Queries
      3. Special Value Types
      4. Keyword Media Features
      5. Forced Colors, Contrast, and Display Mode
      6. Ranged Media Features
      7. Deprecated Media Features
      8. Responsive Styling
    2. Paged Media
      1. Print Styles
      2. Differences Between Screen and Print
      3. Page Size
      4. Page Margins and Padding
      5. Named Page Types
      6. Page Breaking
      7. Orphans and Widows
      8. Page-Breaking Behavior
      9. Repeated Elements
      10. Elements Outside the Page
    3. Container Queries
      1. Defining Container Types
      2. Defining Container Names
      3. Using Container Shorthand
      4. Using Container At-Rules
      5. Defining Container Query Features
      6. Setting Container Length Units
    4. Feature Queries (@supports)
    5. Other At-Rules
      1. Defining a Character Set for a Stylesheet
      2. Defining a Namespace for Selectors
    6. Summary
  23. A. Additional Resources
  24. Index
  25. About the Authors

Product information

  • Title: CSS: The Definitive Guide, 5th Edition
  • Author(s): Eric Meyer, Estelle Weyl
  • Release date: May 2023
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781098117610