# The CSS Handbook (2025 edition)

> The 2025 edition of my free CSS Handbook is out, rewritten with modern selectors like :has(), :is(), and :where(), plus refreshed CSS fundamentals.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2025-09-06 | Topics: [News](https://flaviocopes.com/tags/news/) | Canonical: https://flaviocopes.com/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/](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/](https://flaviocopes.com/access/)