Free tutorial

CSS

The language for styling and laying out HTML pages.

← Frontend Development

1. Introduction to CSS

What CSS is, how a rule is structured, and the three ways to attach it — with why one of them is almost always the right choice.

Free

2. Selectors

Targeting elements by tag, class, id, or combinations of these — and how CSS decides which rule wins when two rules conflict.

Free

3. Colors & Backgrounds

Setting text and background color by name, hex, or rgb — and what that fourth rgba number actually controls.

Free

4. The Box Model

Content, padding, border, and margin — the four layers every element is built from, and the one setting that changes how they're measured.

Free

5. Text & Fonts

font-family, font-size, font-weight, and text-align — and why a font-family list always needs a fallback.

Free

6. Flexbox

Laying out a row (or column) of items with display: flex — the single most useful layout tool for everyday UI work.

Free

7. Grid

Two-dimensional layouts with display: grid — when to reach for it instead of flexbox.

Free

8. Positioning

static, relative, absolute, and fixed positioning — and the parent/child relationship that makes absolute positioning predictable instead of confusing.

Free

9. Responsive Design (Media Queries)

Changing styles based on screen width with @media — and why the mobile-first approach beats designing desktop-first.

Free

10. Transitions & Hover Effects

Animating property changes smoothly with the transition property — and why it needs to be paired with :hover to actually be noticed.

Free