Beginner ~12 hours 25 lessons Free

CSS Tutorial

Style and layout for the modern web

Learn CSS step by step with 25 free lessons. Master selectors, flexbox, grid, animations, and responsive design — go from plain HTML to beautiful, polished interfaces.

Start Learning Get Certified

What you'll learn

  • CSS selectors
  • Box model
  • Flexbox & Grid layouts
  • Animations and transitions
  • Responsive design

Prerequisites

  • Basic HTML knowledge
  • A text editor and browser

Why learn CSS?

  • CSS controls the visual look of every website
  • Modern layouts (Flexbox, Grid) make once-hard problems trivial
  • Responsive design is required for every modern site
  • Strong CSS skills set you apart from other front-end developers

Course Curriculum

25 lessons · ~12 hours · self-paced

  1. 1

    Introduction to CSS

    HTML Describes, CSS Decides How It Looks
  2. 2

    CSS Syntax

    The Shape of Every Rule
  3. 3

    CSS Selectors

    The Five Selectors You Will Use Every Day
  4. 4

    CSS Colors

    Four Ways to Write the Same Colour
  5. 5

    CSS Box Model

    Every Element Is a Box, Whatever It Looks Like
  6. 6

    CSS Text Styling

    Readability Is a Layout Problem, Not a Decoration
  7. 7

    CSS Fonts

    font-family Is a List, Not a Choice
  8. 8

    CSS Backgrounds

    Where a Background Is Actually Painted
  9. 9

    CSS Borders

    A Border Needs a Style Before It Exists
  10. 10

    CSS Margins and Padding

    Padding Fills, Margin Pushes
  11. 11

    CSS Display Property

    display Answers Two Questions at Once
  12. 12

    CSS Flexbox

    A Layout Tool for One Direction at a Time
  13. 13

    CSS Grid

    Rows and Columns at the Same Time
  14. 14

    CSS Positioning

    Five Values, and What "Positioned" Means
  15. 15

    CSS Transitions

    Smoothing a Change That Was Going to Happen Anyway
  16. 16

    CSS Animations

    What Animations Do That Transitions Cannot
  17. 17

    CSS Transform

    Transforms Change the Picture, Not the Layout
  18. 18

    CSS Responsive Design & Media Queries

    One Page That Fits Every Screen
  19. 19

    CSS Pseudo-classes

    Styling a Condition Rather Than an Element
  20. 20

    CSS Pseudo-elements

    Elements You Never Wrote
  21. 21

    CSS Variables (Custom Properties)

    Values With a Name, Alive in the Browser
  22. 22

    CSS Shadows & Effects

    Reading a box-shadow, Value by Value
  23. 23

    CSS Best Practices

    The Real Cost of CSS Is Changing It Later
  24. 24

    CSS Architecture & Organization

    CSS Is Global, and That Is the Problem
  25. 25

    CSS Project: Complete Responsive Website

    A Plan Before Any CSS

From the Blog

Guides and tutorials related to CSS.

Tutorial

CSS Variables: Scoping, Theming and Live Updates

10 min read
Comparison

CSS Transitions vs Animations: Which to Use When

10 min read
Tutorial

CSS Dark Mode: Toggle, Storage and No Theme Flash

10 min read
Read more on the blog

Ready to start?

All 25 lessons are free. No credit card. No sign-up required to read.

Start with lesson 1: Introduction to CSS
Ask AI