CSS: The Definitive Guide, 4th Edition

CSS: The Definitive Guide, 4th Edition

by Eric Meyer, Estelle Weyl
Released October 2017
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449325084

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.

Start your free trial

Book description

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

CSS is a constantly evolving language for describing the presentation of web content on screen, printers, speech synthesizers, screen readers, and chat windows. It is used by all browsers on all screen sizes on all types of IoT devices, including phones, computers, video games, televisions, watches, kiosks, and auto consoles. 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.

This guide covers:

  • Selectors, specificity, and the cascade
  • Values, units, fonts, and text properties
  • Padding, borders, outlines, and margins
  • Colors, backgrounds, and gradients
  • Floats and positioning tricks
  • Flexible box layout
  • The new Grid layout system
  • 2D and 3D transforms, transitions, and animation
  • Filters, blending, clipping, and masking
  • Media and feature 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 and Documents
    1. A Brief History of (Web) Style
    2. Elements
      1. Replaced and Nonreplaced Elements
      2. Element Display Roles
    3. Bringing CSS and HTML Together
      1. The link Tag
      2. The style Element
      3. The @import Directive
      4. HTTP Linking
      5. Inline Styles
    4. Stylesheet Contents
      1. Markup
      2. Rule Structure
      3. Vendor prefixing
      4. Whitespace Handling
      5. CSS Comments
    5. Media Queries
      1. Usage
      2. Simple Media Queries
      3. Media Types
      4. Media Descriptors
      5. Media Feature Descriptors and Value Types
    6. Feature Queries
    7. Summary
  3. 2. Selectors
    1. Basic Style Rules
      1. Element Selectors
      2. Declarations and Keywords
    2. Grouping
      1. Grouping Selectors
      2. Grouping Declarations
      3. Grouping Everything
      4. New Elements in Old Browsers
    3. Class and ID Selectors
      1. Class Selectors
      2. Multiple Classes
      3. ID Selectors
      4. Deciding Between Class and ID
    4. 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
    5. Using Document Structure
      1. Understanding the Parent-Child Relationship
      2. Descendant Selectors
      3. Selecting Children
      4. Selecting Adjacent Sibling Elements
      5. Selecting Following Siblings
    6. Pseudo-Class Selectors
      1. Combining Pseudo-Classes
      2. Structural Pseudo-Classes
      3. Dynamic Pseudo-Classes
      4. UI-State Pseudo-Classes
      5. The :target Pseudo-Class
      6. The :lang Pseudo-Class
      7. The Negation Pseudo-Class
    7. Pseudo-Element Selectors
      1. Styling the First Letter
      2. Styling the First Line
      3. Restrictions on ::first-letter and ::first-line
      4. Styling (or Creating) Content Before and After Elements
    8. Summary
  4. 3. Specificity and the Cascade
    1. Specificity
      1. Declarations and Specificity
      2. Universal Selector Specificity
      3. ID and Attribute Selector Specificity
      4. Inline Style Specificity
      5. Importance
    2. Inheritance
    3. The Cascade
      1. Sorting by Weight and Origin
      2. Sorting by Specificity
      3. Sorting by Order
      4. Non-CSS Presentational Hints
    4. Summary
  5. 4. Values and Units
    1. Keywords, Strings, and Other Text Values
      1. Keywords
      2. Strings
      3. URLs
      4. Images
      5. Identifiers
    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. Calculation values
    5. Attribute Values
    6. Color
      1. Named Colors
      2. Colors by RGB and RGBa
      3. Colors by HSL and HSLa
      4. Color Keywords
    7. Angles
    8. Time and Frequency
    9. Position
    10. Custom Values
  6. 5. Fonts
    1. Font Families
      1. Using Generic Font Families
      2. Specifying a Font Family
    2. Using @font-face
      1. Required Descriptors
      2. Other Font Descriptors
      3. Combining Descriptors
    3. Font Weights
      1. How Weights Work
      2. Getting Bolder
      3. Lightening Weights
      4. The font-weight descriptor
    4. Font Size
      1. Absolute Sizes
      2. Relative Sizes
      3. Percentages and Sizes
      4. Font Size and Inheritance
      5. Using Length Units
      6. Automatically Adjusting Size
    5. Font Style
      1. The font-style Descriptor
    6. Font Stretching
      1. The font-stretch Descriptor
    7. Font Kerning
    8. Font Variants
      1. Level 3 Values
    9. Font Features
      1. The font-feature-settings Descriptor
    10. Font Synthesis
    11. The font Property
      1. Adding the Line Height
      2. Using Shorthands Properly
      3. Using System Fonts
    12. Font Matching
    13. Summary
  7. 6. Text Properties
    1. Indentation and Inline Alignment
      1. Indenting Text
      2. Text Alignment
      3. Aligning the Last Line
    2. Inline Alignment
      1. The Height of Lines
      2. Vertically Aligning Text
    3. Word Spacing and Letter Spacing
      1. Word Spacing
      2. Letter Spacing
      3. Spacing and Alignment
    4. Text Transformation
    5. Text Decoration
      1. Weird Decorations
    6. Text Rendering
    7. Text Shadows
    8. Handling Whitespace
      1. Setting Tab Sizes
    9. Wrapping and Hyphenation
      1. Wrapping Text
    10. Writing Modes
      1. Setting Writing Modes
      2. Changing Text Orientation
      3. Declaring Direction
    11. Summary
  8. 7. Basic Visual Formatting
    1. Basic Boxes
      1. A Quick Refresher
      2. The Containing Block
    2. Altering Element Display
      1. Changing Roles
      2. Block Boxes
      3. Horizontal Formatting
      4. Horizontal Properties
      5. Using auto
      6. More Than One auto
      7. Negative Margins
      8. Percentages
      9. Replaced Elements
      10. Vertical Formatting
      11. Vertical Properties
      12. Percentage Heights
      13. Auto Heights
      14. Collapsing Vertical Margins
      15. Negative Margins and Collapsing
      16. List Items
    3. Inline Elements
      1. Line Layout
      2. Basic Terms and Concepts
      3. Inline Formatting
      4. Inline Nonreplaced Elements
      5. Building the Boxes
      6. Vertical Alignment
      7. Managing the line-height
      8. Scaling Line Heights
      9. Adding Box Properties
      10. Changing Breaking Behavior
      11. Glyphs Versus Content Area
      12. Inline Replaced Elements
      13. Adding Box Properties
      14. Replaced Elements and the Baseline
      15. Inline-Block Elements
      16. Flow Display
      17. Contents Display
      18. Other Display Values
      19. Computed Values
    4. Summary
  9. 8. Padding, Borders, Outlines, and Margins
    1. Basic Element Boxes
      1. Width and Height
    2. Padding
      1. Replicating Values
      2. Single-Side Padding
      3. Percentage Values and Padding
      4. Padding and Inline Elements
      5. Padding and Replaced Elements
    3. Borders
      1. Borders with Style
      2. Border Widths
      3. Border Colors
      4. 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
  10. 9. Colors, Backgrounds, and Gradients
    1. Colors
      1. Foreground Colors
      2. Affecting Borders
      3. Affecting Form Elements
      4. Inheriting Color
    2. Backgrounds
      1. Background Colors
      2. Clipping the Background
      3. Background Images
      4. Background Positioning
      5. Changing the Positioning Box
      6. Background Repeating (or Lack Thereof)
      7. Getting Attached
      8. Sizing Background Images
      9. Bringing It All Together
      10. Multiple Backgrounds
    3. Gradients
      1. Linear Gradients
      2. Radial Gradients
      3. Manipulating Gradient Images
      4. Repeating Gradients
    4. Box Shadows
    5. Summary
  11. 10. Floating and Shapes
    1. Floating
      1. Floated Elements
      2. Floating: The Details
      3. Applied Behavior
      4. Floats, Content, and Overlapping
    2. Clearing
    3. Float Shapes
      1. Creating a Shape
      2. Shaping with Image Transparency
      3. Adding a Shape Margin
    4. Summary
  12. 11. Positioning
    1. Basic Concepts
      1. Types of Positioning
      2. The Containing Block
    2. Offset Properties
    3. Width and Height
      1. Setting Width and Height
      2. Limiting Width and Height
    4. Content Overflow and Clipping
      1. Overflow
    5. Element Visibility
    6. 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
    7. Fixed Positioning
    8. Relative Positioning
    9. Sticky Positioning
    10. Summary
  13. 12. Flexible Box Layout
    1. Flexbox Fundamentals
      1. A Simple Example
    2. Flex Containers
      1. The flex-direction Property
      2. Other Writing Directions
      3. Wrapping Flex Lines
      4. Defining Flexible Flows
      5. flex-wrap Continued
    3. Arranging Flex Items
    4. Flex Container
    5. Justifying Content
      1. justify-content Examples
    6. Aligning Items
      1. Start, End, and Center Alignment
      2. Baseline Alignment
      3. Additional Notes
    7. The align-self Property
    8. Aligning Content
    9. Flex Items
      1. What Are Flex Items?
      2. Flex Item Features
      3. Minimum Widths
    10. Flex-Item–Specific Properties
    11. The flex Property
    12. The flex-grow Property
      1. Growth Factors and the flex Property
    13. The flex-shrink Property
      1. Proportional Shrinkage Based on Width and Shrink Factor
      2. Differing Bases
      3. Responsive Flexing
    14. The flex-basis Property
      1. The content Keyword
      2. Automatic Flex Basis
      3. Default Values
      4. Length Units
      5. Zero Basis
    15. The flex Shorthand
      1. Common Flex Values
    16. The order property
      1. Tabbed Navigation Revisited
  14. 13. Grid Layout
    1. Creating a Grid Container
    2. Basic Grid Terminology
    3. Placing Grid Lines
      1. Fixed-Width Grid Tracks
      2. Flexible Grid Tracks
      3. Fitting Track Contents
      4. Repeating Grid Lines
      5. Grid Areas
    4. Attaching Elements to the Grid
      1. Using Column and Row Lines
      2. Row and Column Shorthands
      3. The Implicit Grid
      4. Error Handling
      5. Using Areas
      6. Grid Item Overlap
    5. Grid Flow
    6. Automatic Grid Lines
    7. The grid Shorthand
      1. Subgrids
    8. Opening Grid Spaces
      1. Grid Gutters (or Gaps)
      2. Grid Items and the Box Model
    9. Aligning and Grids
      1. Aligning and Justifying Individual Items
      2. Aligning and Justifying All Items
    10. Layering and Ordering
    11. Summary
  15. 14. Table Layout in CSS
    1. Table Formatting
      1. Visually Arranging a Table
      2. Table Display Values
      3. Anonymous Table Objects
      4. Table Layers
      5. Captions
    2. Table Cell Borders
      1. Separated Cell Borders
      2. Collapsing Cell Borders
    3. Table Sizing
      1. Width
      2. Height
      3. Alignment
    4. Summary
  16. 15. Lists and Generated Content
    1. Lists
      1. Types of Lists
      2. List Item Images
      3. List-Marker Positions
      4. List Styles in Shorthand
      5. List Layout
    2. Generated Content
      1. Inserting Generated Content
      2. Specifying Content
      3. 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
  17. 16. Transforms
    1. Coordinate Systems
    2. Transforming
      1. The Transform Functions
    3. More Transform Properties
      1. Moving the Origin
      2. Choosing a 3D Style
      3. Changing Perspective
      4. Dealing with Backfaces
    4. Summary
  18. 17. 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. The transition Shorthand
    3. In Reverse: Transitioning Back to Baseline
    4. Animatable Properties and Values
      1. How Property Values Are Interpolated
    5. Fallbacks: Transitions Are Enhancements
    6. Printing Transitions
  19. 18. Animation
    1. Defining Keyframes
    2. Setting Up Keyframe Animations
      1. Naming Your Animation
    3. Keyframe Selectors
      1. Omitting from and to Values
      2. Repeating Keyframe Properties
      3. Animatable Properties
      4. Nonanimatable Properties That Aren’t Ignored
      5. Scripting @keyframes Animations
    4. Animating Elements
      1. Naming Animations
      2. Defining Animation Lengths
      3. Declaring Animation Iterations
      4. Setting an Animation Direction
      5. Delaying Animations
      6. Animation Events
      7. Changing the Internal Timing of Animations
      8. Setting the Animation Play State
      9. Animation Fill Modes
    5. Bringing It All Together
    6. Animation, Specificity, and Precedence Order
      1. Specificity and !important
      2. Animation Order
      3. Animation Iteration and display: none;
      4. Animation and the UI Thread
    7. Seizure and Vestibular Disorders
    8. Animation Events and Prefixing
      1. animationstart
      2. animationend
      3. animationiteration
    9. Printing Animations
  20. 19. 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. Darken, Lighten, Difference, and Exclusion
      3. Multiply, Screen, and Overlay
      4. Hard and Soft Light
      5. Color Dodge and Burn
      6. Hue, Saturation, Luminosity, and Color
    3. Blending Backgrounds
      1. Blending in Isolation
    4. Clipping and Masking
      1. Clipping
      2. Clip Shapes
      3. Clip Boxes
      4. Clip Filling Rules
    5. 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. Mask Types
      8. Border-image Masking
    6. Object Fitting and Positioning
  21. 20. Media-Dependent Styles
    1. Defining Media-Dependent Styles
      1. Basic Media Queries
      2. Complex Media Queries
    2. Paged Media
      1. Print Styles
    3. Summary
  22. A. Animatable Properties
  23. B. Basic Property Reference
  24. C. Color Equivalence Table
  25. Index
  26. About the Authors

Product information

  • Title: CSS: The Definitive Guide, 4th Edition
  • Author(s): Eric Meyer, Estelle Weyl
  • Release date: October 2017
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449325084