The CSS Handbook, 2025 edition
AI workshop
join cohort #2
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
This book This bo
Download the book from https://flaviocopes.com/access/
I wrote 20 books to help you become a better developer:
- CSS Handbook
- Node.js Handbook
- Astro Handbook
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- TypeScript Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux Commands Handbook
- C Handbook
- JavaScript Handbook