CSS — Syntax & The Cascade

CSS is what gives HTML style. Same skeleton, many outfits.

CSS (Cascading Style Sheets) controls how every element on the page looks: colour, font, size, spacing, layout. Every line of CSS is a command that follows the same structure, which is good news, because it means once you can read one rule, you can read them all.

The Anatomy of a CSS Rule

Every CSS rule has the same shape:

selector {
  property: value;
}

A real example:

h1 {
  color: #1a1a1a;
  font-size: 3rem;
}
Part What it is Meaning
h1 The Selector The target — what you're styling (every <h1> on the page).
color The Property The feature — what you're changing (color, size, font, spacing).
#1a1a1a The Value The setting — what you're changing it to.
; The Semicolon The stop sign — one at the end of every property/value pair.

Don't forget the curly braces around the rules.

Three Kinds of Selectors

  • Tag selector — matches every tag of that type. h1 { ... } targets every <h1> on the page. Use it when you want a sweeping rule that affects every paragraph or every heading.
  • Class selector — starts with a dot. .hero { ... } targets any element with class="hero". Use it to target a specific group of elements you've labelled.
  • ID selector — starts with a hash. #about { ... } targets the single element with id="about". IDs are unique to a page.
/* Every paragraph on the page gets a base size. */
p {
  font-size: 1rem;
}

/* Only paragraphs labelled "highlight" get a yellow background. */
.highlight {
  background-color: yellow;
}
<p class="highlight">This text is highlighted.</p>
<p>This text is normal.</p>

Styling the Whole Page

If you want to change something for the whole site (the main font, the background colour), apply it to body. Every visible element on the page lives inside <body>, and they inherit settings like font and colour.

body {
  font-family: "Inter", Arial, sans-serif;
  background-color: #fafaf7;
  color: #1a1a1a;
  line-height: 1.65;
}

The list of fonts is a fallback chain: the browser tries Inter first; if it isn't available, it falls back to Arial; if even that fails, it picks any sans-serif font on the system. Always end the list with a generic fallback (sans-serif, serif, monospace).

CSS Variables — The Control Panel

A CSS variable is a value you define once and reuse everywhere. Variables are declared in a :root rule (which matches the whole page) and read with var(...):

:root {
  --accent: #e07a3f;
  --heading-font: "Fraunces", serif;
}

h1 {
  color: var(--accent);
  font-family: var(--heading-font);
}

.cta-button {
  background-color: var(--accent);
}

Change --accent in one place and every rule using var(--accent) updates at once. Think of :root as your site's control panel: the palette and fonts live there, and the rest of the stylesheet just points at them. Many starter templates are built this way. Find the :root block at the top and you've found the knobs.

Loading a Google Font

The fonts installed on your computer are a small, frankly boring set. Google Fonts hosts hundreds of free ones. Two steps:

  1. Pick a font, click Get font → Get embed code, and copy the <link> tags into your HTML <head>:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
  1. Use it in your CSS, with a fallback chain as always:
body {
  font-family: "Montserrat", Arial, sans-serif;
}

If the font isn't showing up, check that the <link> is in the <head> and that the name in font-family matches the name in the link URL exactly.

The Cascade

CSS stands for Cascading Style Sheets, and here's the curious part: the "cascade" is what happens when two rules try to style the same element. It's not chaos. There are exactly two rules to remember.

1. Specificity wins

If two rules target the same element with different selectors, the more specific one wins.

ID beats class. Class beats tag.

p              { color: black; }   /* applies to every <p> */
.warning       { color: orange; }  /* beats the tag rule for <p class="warning"> */
#critical-note { color: red; }     /* beats the class rule for <p id="critical-note"> */

2. Order wins ties

If two rules have equal specificity, the last one written wins.

h1 {
  color: white;   /* IGNORED — overridden by the rule below */
}

h1 {
  color: blue;    /* WINS — last rule with equal specificity */
}

If a rule isn't working the way you expect, check for both: is something more specific overriding it, or is a later rule winning the tie? Right-click any element → Inspect → the Styles panel shows every rule applied, in order, with the winning one on top.

Style Your About Me Page

Link your stylesheet in the <head>:

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

Then add these rules, in order:

  1. Pick two colours. Set background-color on the body and color on body or p. Use them deliberately — not two random hues.
  2. Choose a font. For a Google Font, go to fonts.google.com, copy the <link> into your <head> above your stylesheet, then font-family: 'Your Font', sans-serif; in a body { } rule.
  3. Add a container. Wrap your main content in <div class="container"> in the HTML, then in CSS:
.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem;
}

That margin: 0 auto is behind practically every centred web layout — commit it to memory.