CSS Example

css

.card {
  display: grid;
  gap: 1rem;
  color: #007a96;
}

.card:hover {
  border-color: #e65100;
}

Guided tutorial track

CSS Tutorial

Learn CSS from scratch with practical examples covering selectors, the box model, Flexbox, Grid, responsive design, transitions, and animations.

Start learning CSS Tutorial PDF

Tutorial overview

Start here, then move through the chapters

This tutorial is designed to be followed in order. Read the chapter, practice with the editor, test your understanding, and move toward completion.

Lessons

103

Sections

Access

Free

Level

intermediate

Ready to begin?

Start with lesson one and follow the tutorial step by step.

Open first lesson

This tutorial teaches CSS from a single declaration to a responsive layout you could ship - the cascade, the box model, Flexbox and Grid, and the modern features that replaced a decade of workarounds. Every example runs in the editor on the page.

A rule, and what each part is called

css

/* selector { property: value }        */
.card {
  padding: 1rem;
  border-radius: 12px;
  background: #ffffff;
}

/* A class applies to every element carrying it. */
.card:hover {
  border-color: #cc4600;
}

What CSS actually does

CSS is a list of rules. Each one says which elements to affect and what to change about them. That is the whole model - everything else is detail about which rule wins.

It is not a programming language. There are no loops and no conditions in the usual sense, which is why it feels strange coming from JavaScript, and why the hard part is never syntax.

Why it feels unpredictable at first

Two rules can both apply to the same element, and CSS has to pick one. That decision is the cascade, and almost every "why isn't this working" moment traces back to it.

Three things decide the winner, in order: importance, then specificity, then which rule came last. An id beats a class, a class beats a tag, and inline styles beat all of them.

Once you can read a rule and say why it lost, CSS stops being guesswork. That is the single most valuable thing in this tutorial, and it is covered early.

What this tutorial covers

Foundations - selectors, the cascade, specificity, inheritance, custom properties.
The box model - margin, border, padding, sizing, and why box-sizing changes everything.
Typography and colour - fonts, spacing, colour formats and contrast.
Layout - Flexbox for one direction, Grid for two, and how to tell which a design needs.
Responsive design - media queries, container queries, fluid type and modern units.
Modern CSS - nesting, cascade layers, :has(), clamp, logical properties, animations.

103 lessons, grouped so you can see how much is left at each stage rather than facing one long list.

Two lines that replace a page of floats

css

.row {
  display: flex;
  gap: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

Layout is the part worth slowing down for

Flexbox arranges things along one axis; Grid arranges them along two. Choosing wrongly is what makes a layout fight back, and the two chapters on it are the ones most worth doing slowly.

The auto-fit line above is a responsive card grid with no media query at all. That is roughly the amount of CSS the same layout used to take in 2015.

What you need before you start

Basic HTML: elements, attributes, classes and how a document nests. If that is shaky, work through the HTML tutorial first - CSS styles HTML, so there is nothing to style until you can write it.

No JavaScript is needed. A browser and a text editor are enough, and every example here runs in the Try It editor without installing anything.

How long this takes

Selectors, colours and the box model take a few evenings, and they are enough to restyle a page you already have.

Layout takes longer. Not because Flexbox and Grid are complicated, but because you have to build a few things before the choice between them becomes obvious rather than a coin flip.

Responsive design is quicker than people expect once layout has clicked, because modern CSS does most of the work you used to write by hand.

Common questions

CSS. It is the other half of every page you will build, and it is far more forgiving - a mistake makes something look wrong rather than stopping the page from working.

The learning path

Work through these in order. Each part builds on the one before it, and every part lists what it covers and roughly how long it takes.

Part 1Beginner

CSS Introduction

4 lessons24 min

What is CSS · CSS Syntax · How to Add CSS …

CSS Tutorial

Start here, then move through the chapters

What CSS actually does

Why it feels unpredictable at first

What this tutorial covers

Layout is the part worth slowing down for

What you need before you start

How long this takes

Common questions

Should I learn CSS or JavaScript first?

Do I still need Flexbox if I know Grid?

Should I just use Tailwind or Bootstrap instead?

Why does my CSS not apply?

Do I need to memorise every property?

The learning path

Reference

What You Will Learn

Practice Live

Tutorial Features

Code examples inside chapters

Practice with the Try It Editor

Quiz for self-check

Certificate after completion

How to Use This Tutorial

Learn the chapter

Practice the example

Test your understanding

Finish with proof

Complete the tutorial with confidence

Why Learn CSS

Easy to Learn

Essential Skill

Build Real Websites