Op werkdagen voor 23:00 besteld, morgen in huis Gratis verzending vanaf €20

CSS: The Definitive Guide

Web Layout and Presentation

Paperback Engels 2023 9781098117610
Verwachte levertijd ongeveer 15 werkdagen


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


Aantal pagina's:1090
Hoofdrubriek:IT-management / ICT


Wees de eerste die een lezersrecensie schrijft!

Over Estelle Weyl

Estelle is a consulting web developer, trainer, author and speaker. She speaks and leads workshops on web development all over the world. Her books have been translated into over 7 languages. She's been coding CSS, HTML, and JavaScript since 1999.

Andere boeken door Estelle Weyl


Conventions Used in This Book
Value Syntax Conventions
Using Code Examples
O’Reilly Online Learning
How to Contact Us
Eric Meyer
Estelle Weyl

1. CSS Fundamentals
A Brief History of (Web) Style
Stylesheet Contents
Rule Structure
Vendor Prefixing
Whitespace Handling
CSS Comments
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

2. Selectors
Basic Style Rules
Type Selectors
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

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

4. Specificity, Inheritance, and the Cascade
Declarations and Specificity
Resolving Multiple Matches
Zeroed Selector Specificity
ID and Attribute Selector Specificity
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

5. Values and Units
Keywords, Strings, and Other Text Values
The all Property
Numbers and Percentages
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
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
Time and Frequency
Custom Properties
Custom Property Fallbacks

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
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

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

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

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

10. Floating and Positioning
Floated Elements
Floating: The Details
Applied Behavior
Floats, Content, and Overlapping
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
Placing and Sizing Nonreplaced Elements
Placing and Sizing Replaced Elements
Placement on the Z-Axis
Fixed Positioning
Relative Positioning
Sticky Positioning

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

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

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

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

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
Setting Tab Sizes
Wrapping and Hyphenation
Word Breaking
Line Breaking
Wrapping Text
Writing Modes
Setting Writing Modes
Changing Text Orientation
Combining Characters
Declaring Direction

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

17. Transforms
Coordinate Systems
The Transform Functions
Element Rotation
Individual Transform Property Order
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

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

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

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
Clip Shapes
Clip Boxes
Clipping with SVG Paths
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

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

A. Additional Resources

About the Authors

Managementboek Top 100


Populaire producten



        CSS: The Definitive Guide