CSS: The Definitive Guide: Web Layout and Presentation

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 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 1. CSS Fundamentals A Brief History of (Web) Style Stylesheet Contents Rule Structure Vendor Prefixing Whitespace Handling CSS Comments Markup Elements Replaced and Nonreplaced Elements Element Display Roles Bringing CSS and HTML Together The Tag The Element The @import Directive HTTP Linking Inline Styles Summary 2. Selectors Basic Style Rules Type Selectors Grouping Grouping Selectors Grouping Declarations Grouping Everything 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 Defining Descendant Selectors Selecting Children Selecting Adjacent-Sibling Elements Selecting Following Siblings Summary 3. Pseudo-Class and -Element Selectors Pseudo-Class Selectors Combining Pseudo-Classes Structural Pseudo-Classes Location Pseudo-Classes User Action Pseudo-Classes 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