CSS: The Definitive Guide: Visual Presentation for the Web

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