How CSS works

The shape of a CSS rule

h1 {
  color: navy;
  font-size: 2rem;
}
/* selector { property: value; } */

The selector (h1) says which elements to style. Inside the curly braces is a declaration block. Each declaration is a property, a colon, a value and a semicolon. A comment is written between /* and */ and is ignored by the browser.

Three ways to add CSS

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

An external file is best because every page shares it. Change the brand colour once, and the whole site updates. The browser also caches (saves) the file, so the next page loads faster.

How the browser applies CSS

1. It reads the HTML and builds the page tree.
2. It reads all CSS: its own default styles, then yours.
3. For every element it finds the rules that match.
4. If rules disagree, the cascade decides which one wins (next topic).
5. It draws the page.

Property names are in English with hyphens: background-color, font-size, text-align. Values can be words (center), numbers with units (16px), or colours (#1d4ed8).