Learn CSS

How to start learning CSS

CSS is how the web gets its look: color, spacing, type, layout, motion. It has a reputation for being fiddly, but nearly all of that comes from skipping the foundations. This is a free, self-paced path that fixes that: read each idea in plain English, then immediately build it with our tools. That read, then do loop is what makes it stick.

7 lessons· about 54 min total· free, no account· progress saved in your browser

What CSS actually is

HTML is the content and structure of a page: headings, paragraphs, images, buttons. CSS is a separate language that decides how that structure looks. You write rules that select elements and set their properties, and the browser paints the result. One rule looks like this:

selector {
  property: value;
}

/* real example: make every paragraph dark grey with room to breathe */
p {
  color: #333;
  line-height: 1.6;
}

That is the entire shape of CSS. Everything else is learning which properties exist, and the rules the browser uses to resolve them when they overlap. The hard part is never the syntax. It is understanding the few systems working underneath, which is exactly what the path below walks through.

How to learn it (the honest version)

You do not need to memorize properties. There are hundreds, and you will look most of them up forever, professionals included. What you need is a mental model for the handful of systems that decide how a page behaves: the cascade, inheritance, the box model, and the layout tools (normal flow, positioning, flexbox and grid). Learn those and a stylesheet becomes readable instead of mysterious.

The biggest accelerator is to stop reading and start changing things. Every lesson ends with a short exercise and points you at a tool or your browser DevTools so you can watch the idea move. Reading about a property is fine; seeing it react is what locks it in.

The path

0 of 7 complete
  1. The Cascade & Specificity7 min Why one rule beats another, and how the browser decides which style wins.
  2. Inheritance: Parents & Children6 min How styles flow down the HTML tree, and which properties do not.
  3. Block vs Inline6 min The two ways elements take up space, and why it changes everything.
  4. The Box Model8 min Content, padding, border, margin: every element on the page is a box.
  5. Positioning8 min static, relative, absolute, fixed and sticky, finally demystified.
  6. Flexbox9 min Lay things out in one dimension: rows and columns that just behave.
  7. CSS Grid10 min Two-dimensional layouts, and the most powerful layout tool in CSS.

While you learn, take real sites apart

The fastest way to make CSS stick is to study it in the wild. Browse the showcase and open a design breakdown to see these ideas shipping in production, or jump into the tools to generate gradients, shadows and layouts and copy the CSS straight out. Read a lesson, build the thing, then go find it on a site you admire.