CSS Fundamentals Tutorial

This course is for people who can write basic HTML and now want their pages to look and behave the way they intend. If you have ever changed a CSS value, seen nothing happen, and added !important out of frustration, the first lesson is written for you. It assumes you have read, or are comfortable with, HTML Fundamentals.

Each lesson pairs a small HTML snippet with the CSS that styles it, and then states precisely what the result looks like, down to pixel sizes where the numbers teach something. You will learn how the browser decides which rule wins, how every element is a set of nested boxes, and how to arrange those boxes in one dimension with flexbox and in two with grid.

The four lessons build on each other: selectors and the cascade explain why rules apply, the box model and normal flow explain how big things are and where they sit by default, flexbox and grid change that default, and media queries make the result adapt to the screen. You will finish able to read a stylesheet, debug it in DevTools, and build a responsive page without a framework.