Skip to content
FLAVIO COPES
flaviocopes.com
2026

Learn CSS

A free learning path through 77CSS tutorials on this site.

CSS is the language that defines how a web page looks in the browser. It’s easy to get started with, and it goes incredibly deep: layout, typography, animations, responsive design.

This page organizes my CSS tutorials into a learning path. Start with selectors and the box model, then learn the two modern layout systems, Flexbox and Grid, and from there explore the rest.

~~~

Free resources

~~~

Start here: selectors and the cascade

How CSS targets elements, how specificity is calculated, and how the cascade decides which rule wins.

  1. An introduction to CSS
  2. CSS Selectors
  3. CSS Specificity
  4. CSS Cascade
  5. CSS Pseudo Classes
~~~

The box model and positioning

Padding, borders, margins, box-sizing, and how elements are positioned and stacked on the page.

  1. The CSS Box Model
  2. CSS Box Sizing
  3. CSS Margin
  4. CSS Padding
  5. The CSS position property
  6. The CSS z-index property
~~~

Layout: Flexbox and Grid

The two modern layout systems every developer needs, plus the classic problem of centering things.

  1. The Flexbox Tutorial
  2. CSS Grid Tutorial
  3. How to center an element with CSS
~~~

Responsive design and units

Media queries, mobile-first design, CSS units like rem and vw, and custom properties.

  1. CSS Media Queries and Responsive Design
  2. CSS Units
  3. CSS Variables (Custom Properties)
~~~

Visual styling and motion

Colors, typography, backgrounds, filters, and bringing pages to life with transitions and animations.

  1. CSS Colors
  2. CSS Typography
  3. CSS Fonts
  4. CSS Backgrounds
  5. CSS Filters
  6. Introduction to CSS Transitions
  7. CSS Animations
  8. CSS Transforms
~~~

CSS tools

Free browser-only tools to practice and get things done faster.

~~~

More CSS tutorials

This learning path is a curated selection. Browse all 77 CSS tutorials on this site.