Learn CSS from scratch

What does CSS control, and how does it reach the page?

It does one job: it decides how the thing HTML built should look. CSS is short for cascading style sheets, and its smallest unit is a rule:

p {
  color: #333;
  line-height: 1.9;
}

There are three ways to attach it, and in practice we use one. You can write a style attribute on the tag itself, you can put rules inside a style tag in the head, or you can keep everything in a separate file and call it with one line:

<link rel="stylesheet" href="style.css">

Pick the third and keep the other two for exceptions. The reason is not taste: a separate file downloads once and the browser takes it from its own cache on the next page, and the day the button colour has to change you change one place instead of fifty.

One thing confuses every beginner. Before you write a single line of CSS, the page already has styles: the heading is large and bold, links are blue and underlined, lists have bullets. The browser puts those there with its own built in style sheet, and what you write is a rewrite of them.

Selectors: telling the browser which element

Write a tag name and you get every one of those tags. Write a dot and a class name and you get only the elements carrying that class; write a hash and an id and you get one unique element.

a         { color: #0b5; }         /* every link */
.btn      { border-radius: 12px; } /* anything with class="btn" */
#header   { position: sticky; }    /* the element with id="header" */
.card p   { margin-block: 0; }     /* every p inside .card */
a:hover   { text-decoration: underline; }

In practice, write classes almost always. An id is unique on the page and earns its keep for links and for JavaScript, but for styling it brings weight, and later it forces you to bring more weight to override it. That is the road that ends at important.

There is one selector that gets taught less and matters to keyboard users. hover only means something to a mouse; somebody moving through the page with Tab has to see which element they are standing on right now:

.btn:focus-visible {
  outline: 2px solid #0b5;
  outline-offset: 2px;
}

If you removed the browser default ring with outline: none and put nothing in its place, you blinded the page for keyboard users. This is one of the few places where a single line of CSS damages accessibility directly.

Why is my style not being applied?

The short answer: your rule was applied, another one simply beat it. For every property of every element the browser asks three things in order. Which rules target this element at all, which of them is more specific, and if they are equally specific, which came later in the file.

The figure at the top of this page is those layers, from the closest to the element outward. style on the tag itself is the closest, which is why it is the hardest thing to change later, and the browser default is the furthest. The place most misunderstandings happen is the outermost layer: inheritance.

You set a colour on body and expect links to take it too. They do not. The browser has a direct rule for the a tag, and any direct rule, even the browser own, beats a value inherited from a parent. Inheritance is the weakest layer, not the strongest.

Now the fix, which takes ten seconds. Instead of guessing, right click the element, choose inspect and open the Computed tab. The final value of every property is written there, and expanding one shows you the winning rule with its file name and line number, and the losing rules struck through. Guessing has no substitute for this.

Then there is important, the word that breaks that order. Write it once and every later rule has to write it too in order to win, and from then on your file runs on weight rather than on logic. Our rule is simple: if it does not work without important, the selector is wrong. The one real exception is styling code you did not write and cannot reach.

Every element is a box

Everything on the page is a rectangle, even a single letter. That rectangle has four layers: the content itself, padding as the inner space up to the frame, border as the line around it, and margin as the outer space to the other elements. All spacing work in CSS is those four.

There is also a default decision that nearly everybody changes and few explain. By default the number you write in width is the size of the content only, so an element at a hundred percent width that also has padding pushes out of its place. One line fixes it for good:

*, *::before, *::after { box-sizing: border-box; }

With border-box the width number includes padding and border, which is what you expected in the first place. Put that line at the top of every CSS file and stop thinking about it.

One more behaviour surprises everyone once. The vertical space between two stacked elements does not add up; the larger of the two wins. This is called margin collapsing, and it happens only to vertical margins, never to padding and never inside flex or grid. It is one of the reasons modern layouts reach for gap instead of margin.

Layout: when flexbox, when grid?

Flexbox has one axis and grid has two, and that difference settles most decisions. With flex you line a few things up in a row or a column and let each one size itself from its own content. With grid you draw the structure first, you define the columns and rows yourself, and the content then sits inside them.

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

That second rule is worth knowing by heart. It says each column should be at least 220 pixels and should share the leftover space, and the browser works out how many columns fit at any width. A responsive grid without a single media query.

The two are not rivals, and choosing one does not mean giving up the other. In practice the skeleton of a page is laid out with grid and a flex row sits inside each cell. Rule of thumb: if you can say "these few things next to each other", flex; if you say "this table of cells", grid.

Why a Persian site needs margin-inline-start, not margin-left

Because margin-left is not the same place in Persian as it is in English. Physical properties think in terms of the left and right of the screen; logical properties think in terms of the start and end of the line. margin-inline-start means the space from wherever the line begins; the browser reads that as the right in Persian and Arabic and as the left in English, and you do nothing.

The translation is not hard:

Testing it takes ten seconds and nobody teaches it: in the browser developer tools, on the html tag, change dir from rtl to ltr and look at the same page. Anything that did not move, or that stuck to the wrong edge, is a physical property left behind. On our own site that check is part of reviewing every new template.

Where the rule is not needed: a site with one left to right language that will never take another. There margin-left never bites, and insisting on logical properties is a good habit rather than a requirement. But if your site is Persian, or may one day also be English, this difference decides whether that day costs you an hour or a week.

CSS variables: define once, use everywhere

A CSS variable is a name holding a value. Its technical name is a custom property, it starts with two dashes and it is read with var:

:root {
  --brand: #0b5;
  --gap: 16px;
}

.btn {
  background: var(--brand);
  padding: var(--gap);
}

What gets said less is that this variable inherits like any other value. Redefine the same name on one element and everything inside that element sees the new value while the rest of the page stays untouched:

.card--warn { --brand: #d97706; }

Now every button inside that card is orange without a single line of the .btn rule changing. A dark theme is built on exactly this idea: one block that redefines a handful of names, not a second CSS file.

And the limit: this is not a variable in the programming sense. Arithmetic with it happens only inside calc, and you cannot use it in the condition of a media query. If you are after loops, conditions and functions, you are heading towards tools like Sass, whose whole job is that and whose output is this same plain CSS.