CSS TL;DR — CSS essentials

Start here

How CSS thinks

TL;DR: CSS is not a list of instructions for drawing a page. It is a description of what the page should be like — and the browser, which knows the screen, the font and the reader's settings, works out the pixels.

Two ways to centre a row

Now change the context the layout lives in:

Reader's font size16px

The CSS above never changes. The layout below works itself out every time — that is the declarative bargain: you give up pixel control and get adaptability back.

Live result

same rules, different context

item 1

item 2

item 3

CSS — describe the end state

.card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

Four lines that hold at any width, any font size, any number of children, in any language direction.