CSS Complete Guide
CSS (Cascading Style Sheets) is the language that controls how HTML actually looks — layout, color, spacing, typography, and motion — turning plain markup into a real interface. HTML says what a page contains; CSS says how it's arranged and presented, and in modern front-end work the two are inseparable. This doc walks through the 10 CSS concepts that matter most for building real interfaces, in the order you're likely to need them, each with a diagram, a "where to use it" guide, and concrete implementation steps.
Use the sidebar to jump straight to any topic — each one opens its own page with a full explanation, a diagram of how the pieces fit together, and the concrete steps to actually use it. If you're starting from zero, work through the topics roughly in order: selectors and the box model are the foundation everything else — layout, positioning, typography, motion — is built on top of.
The browser parses HTML into a DOM tree and CSS into a CSSOM independently, then merges the two into a render tree — only the nodes that will actually be visible, each carrying its resolved styles. From there it's layout (where every box sits and how big it is), paint (filling in pixels, color, text, borders), and finally compositing those layers onto the screen you're looking at.
All 10 topics in this guide
Summary & Learning Order
Once each topic makes sense on its own, these references tie them together: the order to learn them in, how urgently each one matters, and the one decision — flexbox or grid — that trips up almost everyone early on.
Recommended Learning Order
Recommended Priority
Flexbox vs. Grid — Which One Do You Reach For?
The most common early layout mistake is picking one of these arbitrarily instead of by dimension. The question is always: does this need to align along one line, or across a whole grid?
If the elements only ever need to line up along a single row or column, reach for flexbox — it's simpler and handles unequal content sizes gracefully. The moment content needs to align across both rows and columns at once, that's grid's job. In practice most real pages use both: grid for the overall page shell, flexbox for the smaller one-dimensional pieces inside each grid cell.
Official Documentation Reference URLs
Every topic covered in this guide, with a direct link to its official MDN documentation.