Session 9 — Introducing CSS: rules, selectors, and linking

You will learn what CSS is and how it attaches to your HTML: rules (selector + declarations), the three main selectors (element, class, id), grouping, the cascade and specificity that decide which rule wins, and inheritance. You will link the Harbor Café's first styles.css and read a small real stylesheet.

Plan: ideas → worked rules → bridge → short drills → reveal.

Time: about 60–70 minutes if you read every rule aloud before moving on.

Session 9 — Introducing CSS: rules, selectors, and linking

The one-paragraph story

HTML says what content is; CSS says how it looks. A CSS rule pairs a selector (which elements) with a block of declarations (property: value pairs): h1 { color: navy; } means "make every h1 navy". Selectors come in three main flavours — element (h1), class (.price), and id (#hours) — and you attach your CSS with a link element in the head. Two forces decide who wins when rules collide: the cascade (later rules beat earlier equal-weight rules) and specificity (id beats class beats element). This session gives the Harbor Café its first real stylesheet.

---

Anatomy of a rule

h1 {
  color: navy;
  font-size: 28px;
}

Four pieces:

1. Selector — h1: which elements the rule applies to.
2. Declaration block — the { … } braces holding the declarations.
3. Property — color, font-size: the aspect being styled.
4. Value — navy, 28px: the setting for that property.

Each declaration ends with a semicolon: property: value;. Read a rule aloud as "for every h1, set color to navy and font-size to 28 pixels."

---

Three main selectors

Element selector — every element of that tag:

h1 { color: navy; }
p { font-size: 14px; }

Class selector — every element carrying that class, written with a dot:

.price { color: green; }

Applied to <span class="price">$9.00</span>. One class can be reused across any number of elements, of any tag.

Id selector — the one element with that id, written with #:

#hours { background-color: lightyellow; }

Applied to the page's opening-hours heading — the element written as <h2 id="hours"> — #hours matches it. Because ids are unique, an id selector matches at most one element.

The class selector is the workhorse: reuse it freely; reserve ids for genuinely unique regions.

---

Grouping selectors

Several selectors sharing the same rule are grouped with commas:

h1, h2, h3 {
  font-family: Georgia, serif;
}

"Apply to every h1, h2, and h3." Grouping is just a shorter way to write three identical rules.

---

How CSS attaches to a page

Three ways, in order of daily usefulness:

1. External stylesheet (the professional way) — a separate .css file linked from the head:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Harbor Café</title>
  <link rel="stylesheet" href="styles.css">
</head>

rel="stylesheet" says "this is a stylesheet" and href points at the file (path grammar from Session 4). One styles.css can style every page of the site — change it once, the whole site changes. This is why the café site uses one file for all its pages.

2. Inside the head (<style>) — CSS embedded in a style element; fine for a single small page, awkward for a multi-page site.

3. Inline style attribute — style="color: navy;" directly on an element. It works but scatters styling into the markup and cannot be reused; use it rarely, if ever.

The first way is the one this course builds on: content in HTML files, styling in one shared CSS file.

---

The cascade and specificity

When two rules target the same element with the same property, something must decide the winner. Two rules do:

Cascade (source order). All else equal, the later rule wins:

p { color: black; }
p { color: navy; }

Both match every paragraph; the second one comes later, so paragraphs are navy.

Specificity. When the rules are not equal, the more specific selector wins regardless of order. Roughly: id beats class, class beats element:

.special { color: red; }     /* specificity: one class   */
p        { color: black; }   /* specificity: one element */

A paragraph with class="special" is red: the class selector outranks the element selector even though it appears first.

The mental model: think of each selector's strength as points — an id counts far more than a class, a class more than an element. When rules collide, the higher-scoring selector wins; only when scores tie does the later rule win. (The full scoring system — counting ids, classes, and elements — exists, and Session 12 returns to it in practice.)

---

Inheritance

Some properties inherit: children take the value from their parent when they have no value of their own. Font settings inherit — set color on body, and the whole page follows until something overrides it:

body {
  color: #333333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

The paragraphs, headings, and list items inside body all inherit the grey colour and sans-serif font. Other properties (borders, margins, backgrounds) do not inherit — a paragraph does not get its parent's border. The practical rule: set fonts and colours once at the top of the tree, then override only where needed.

---

A first working stylesheet

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #333333;
  background-color: #faf7f2;
}

h1, h2 {
  font-family: Georgia, serif;
  color: #1f3a5f;
}

.price {
  color: #2e7d32;
  font-weight: bold;
}

#hours {
  background-color: #fff3cd;
  padding: 4px 8px;
}

Read each rule: the body sets the base font and colours; the headings switch to a serif face and a deep blue; every .price is bold green; the #hours region gets a pale yellow background with a little padding. Change #1f3a5f once and every heading on the site changes with it.

---

Pitfalls to watch for

• A selector mismatch styles nothing — p { … } will not touch a <span class="price">; you need .price.
• Missing semicolon — the declaration after the break silently fails: color: navy; font-size: 14px leaves font-size unapplied.
• Specificity surprises — a later element rule does not beat an earlier class rule; specificity outranks source order.
• Stylesheet not linked — CSS written in styles.css does nothing until the link is in the head.

Session 9 — Worked examples

Example A — Reading a rule aloud

.price {
  color: #2e7d32;
  font-weight: bold;
}

Read it: for every element carrying class price, set colour to dark green and font weight to bold. The selector is .price (dot = class); the block holds two declarations, each property: value;.

Applied to <span class="price">$9.00</span>, the price text renders dark green and bold. Applied to three such spans, all three change — that is the point of a class.

---

Example B — Element, class, and id in one sheet

h1 { font-family: Georgia, serif; }
.card-title { font-weight: bold; }
#hours { background-color: #fff3cd; }

Three selectors, three jobs:

• h1 — every h1 anywhere on the page.
• .card-title — every element (of any tag) with that class.
• #hours — exactly the one element with id="hours".

---

Example C — Cascade: source order decides ties

p { color: #333333; }
p { color: #1f3a5f; }

Both rules target the same p elements with the same property and equal specificity, so the later rule wins — paragraphs render deep blue. Swap the lines and they render grey.

---

Example D — Specificity beats source order

p { color: #333333; }
.special { color: #c62828; }

A paragraph with class="special" is red:

• .special scores higher than p (class beats element),
• so it wins even though it appears after... actually it appears after here too, but the point is the order does not matter — move .special above p and the result is identical. Class always outranks element.

---

Example E — Inheritance down the tree

body {
  color: #333333;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
h1 {
  font-family: Georgia, serif;
}

• color and font-family set on body inherit to every descendant: paragraphs, list items, links.
• The h1 rule then overrides the font-family for headings only — they get Georgia/serif, while everything else keeps Helvetica.
• Nothing inherits a color override upward or sideways: a span inside the h1 still inherits the heading's serif face, not the body's.

---

Example F — Wiring the stylesheet in

<head>
  <meta charset="utf-8">
  <title>Harbor Café</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to the Harbor Café</h1>
  <p class="price">$9.00</p>
</body>

With styles.css in the same folder (relative path, Session 4 grammar), the h1 picks up Georgia/serif, and the paragraph with class="price" picks up green and bold. Every café page links the same styles.css, so a single change restyles the whole site.