The CSS Handbook (2025 edition)

I just released an update for one of my books, the CSS Handbook. You can download it from https://flaviocopes.com/access/.

Six years ago, I published the first edition of the CSS Handbook to help developers master the fundamentals of styling for the web. It’s been downloaded tens of thousands of times and helped countless developers understand CSS from the ground up.

But CSS has evolved dramatically since 2019. The old handbook, while still valuable for fundamentals, was starting to show its age, so here’s a new edition.

Here’s a summary of the content of the book:

Introduction & Basics

• Introduction to CSS - What CSS is and how it works
• Adding CSS to HTML - External, internal, and inline styles
• Selectors - Basic to advanced selector patterns
• Cascade & Specificity - How CSS rules are applied
• Inheritance - How properties flow through elements
• Attribute Selectors - Targeting elements by attributes
• Pseudo-classes - Dynamic state selectors
• Pseudo-elements - Styling element parts

Modern Selectors (NEW)

• :has() Selector - Parent selector capabilities
• :is() and :where() - Selector list optimization
• Enhanced :not() - Complex negation patterns

Values & Units

• Colors - Hex, RGB, HSL, and modern formats
• Units - px, em, rem, %, viewport units
• Global Keywords - inherit, initial, unset
• calc() Function - Dynamic value calculations

Typography

• Font Properties - Family, size, weight, style
• Web Fonts - @font-face and loading strategies
• Text Styling - Alignment, decoration, spacing
• Variable Fonts - Dynamic font variations

Box Model & Layout

• Box Model - Content, padding, border, margin
• Box Sizing - Border-box vs content-box
• Display Property - Block, inline, inline-block
• Positioning - Static, relative, absolute, fixed, sticky
• Float & Clear - Legacy layout (historical context)
• Z-index - Stacking contexts

Flexbox

• Flex Containers - Display flex basics
• Flex Direction - Row and column layouts
• Alignment - Justify and align properties
• Flex Items - Grow, shrink, basis
• Wrapping - Multi-line flex layouts

CSS Grid

• Grid Containers - Display grid basics
• Grid Template - Columns and rows
• Grid Areas - Named grid sections
• Grid Placement - Line-based positioning
• Auto Placement - Automatic grid flow
• Alignment - Grid alignment properties

Responsive Design

• Media Queries - Breakpoints and conditions
• Viewport Meta - Mobile optimization
• Responsive Units - vw, vh, vmin, vmax
• Container Queries - Component-based responsive design

Responsive Functions (NEW)

• clamp() Function - Fluid typography and spacing
• min() and max() - Responsive constraints
• Container Units - cqw, cqh units

Visual Effects

• Backgrounds - Colors, images, gradients
• Borders - Styles, radius, images
• Shadows - Box and text shadows
• Opacity - Transparency effects

Transforms (NEW)

• 2D Transforms - Translate, rotate, scale, skew
• 3D Transforms - Perspective and 3D space
• Transform Origin - Transformation center point

Transitions & Animations

• CSS Transitions - Smooth property changes
• Transition Timing - Easing functions
• CSS Animations - Keyframe animations
• Animation Properties - Duration, delay, iteration

Filters & Effects (NEW)

• CSS Filters - Blur, brightness, contrast
• Backdrop Filters - Background effects
• Blend Modes - Layer mixing
• Clip-path - Custom shapes

Modern Layout Features (NEW)

• Aspect Ratio - Maintaining proportions
• Scroll Snap - Controlled scrolling
• Logical Properties - Internationalization support

CSS Variables

• Custom Properties - CSS variables basics
• Variable Scope - Global and local variables
• Theming - Dynamic theme switching
• Fallback Values - Default value handling

Dark Mode (NEW)

• prefers-color-scheme - System preference detection
• Theme Implementation - Light/dark mode patterns
• Custom Property Patterns - Efficient theming

CSS Nesting (NEW)

• Native Nesting - Nested selectors without preprocessors
• Nesting Rules - Syntax and best practices

Cascade Layers (NEW)

• @layer Rule - Style organization
• Layer Priority - Managing specificity

Modern Color Spaces (NEW)

• oklch Colors - Perceptually uniform colors
• color-mix() - Color blending
• display-p3 - Wide gamut colors

Forms & Tables

• Form Styling - Input and control styling
• Table Styling - Table layouts and design
• Pseudo-classes - Form state selectors

Advanced Topics

• CSS Architecture - BEM and organization
• Feature Queries - @supports detection
• Print Styles - Print media optimization
• Performance - Optimization techniques
• Debugging - DevTools and troubleshooting

Best Practices

• Code Organization - File structure
• Naming Conventions - Consistent naming
• Progressive Enhancement - Fallback strategies
• Accessibility - WCAG compliance
• Maintainability - Scalable CSS

Download the book from https://flaviocopes.com/access/