Session 10 — Color and text styling

You will style the page's paint and words: color in its three notations (names, hex, rgb()/rgba()), background-color, and the typographic properties — font-family with fallback stacks, font-size in px/rem, font-weight, font-style, text-align, line-height, text-decoration, and the four link states (:hover and friends).

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

Time: about 55–65 minutes if you apply every rule to a specific café element in your head before reading the reveal.

Session 10 — Color and text styling

The one-paragraph story

Two properties control most of what a page feels like. color sets the text colour and comes in three notations — names (navy), hex (#1f3a5f), and rgb (rgb(31, 58, 95)) — while background-color paints behind content. The text properties then shape how the words read: font-family picks the typeface, font-size the size, font-weight and font-style the weight and slant, text-align the alignment, line-height the rhythm, text-decoration the links' underline. This session gives the Harbor Café a colour palette and a readable typographic system.

---

Specifying colour

Three notations express the same colour:

h1 {
  color: navy;                      /* a name       */
  color: #1f3a5f;                   /* a hex code   */
  color: rgb(31, 58, 95);           /* red green blue */
  color: rgba(31, 58, 95, 0.8);     /* rgb + alpha (opacity) */
}

• Colour names — the ~140 named colours (navy, tomato, snow); readable but limited.
• Hex codes — #RRGGBB: two hex digits each for red, green, blue. #1f3a5f = a dark blue. This is the workhorse notation — copy-pasteable from any picker.
• rgb() — the same values in decimal: rgb(31, 58, 95). rgba() adds a fourth channel, alpha (0 transparent → 1 opaque): rgba(0, 0, 0, 0.5) is a half-transparent black.

The #-code habit: three of them (#1f3a5f, #faf7f2, #2e7d32) give a palette a name and a place in one CSS file, and editing one line restyles everywhere it is used.

---

Foreground and background

Two separate properties:

body {
  color: #333333;          /* text colour everywhere (inherited)  */
  background-color: #faf7f2;  /* page background */
}
.price {
  color: #2e7d32;
  background-color: #e8f5e9;  /* a soft green chip behind the price */
}

color is the text (and inherits); background-color paints behind the element's box (Session 11). Put them together for chips, badges, and highlighted regions. A classic beginner bug: setting background-color on an element with no visible size — the background only shows where the element's box is.

---

font-family: choosing the typeface

body {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
h1, h2 {
  font-family: Georgia, "Times New Roman", serif;
}

The value is a fallback stack: the browser uses the first font it finds installed, then the next. The stack ends with a generic family — serif (letters with feet), sans-serif (clean, no feet), or monospace (fixed width, for code) — so there is always a last resort. The stack exists because fonts are not guaranteed: "Helvetica Neue" may be missing on a visitor's machine, so Arial, then Helvetica, then any sans-serif takes over. Headings in one family and body text in another (the classic serif headings, sans-serif body pairing, or the reverse) is the cheapest typographic upgrade a page can get.

---

font-size and its units

p { font-size: 16px; }
h1 { font-size: 2rem; }

• px — absolute pixels. Predictable; the browser's zoom still scales them.
• rem — relative to the root font size (typically 16 px). 2rem = 32 px. This is the modern default: bump the root size and every rem scales with it.

The habit: set the base size on body (or the root), then use rem for the sizes that should scale together — headings twice the base, small print half. Avoid a mix of unrelated fixed sizes scattered through the sheet.

---

font-weight, font-style, alignment, and more

p.special {
  font-weight: bold;     /* normal | bold | 100–900 */
  font-style: italic;    /* normal | italic | oblique */
  text-align: center;    /* left | right | center | justify */
  text-decoration: underline;  /* none | underline | line-through */
}

• font-weight — bold or a numeric weight (400 normal, 700 bold).
• font-style — italic slant.
• text-align — where the text sits in its box: left, right, center, or justify (both edges).
• text-decoration — underline, line-through, or none (the standard way to remove an underline from a link when it is not a link-like element).

text-transform rounds out the basics: uppercase forces capitals — useful for labels and section kickers.

---

line-height: the rhythm of reading

body { line-height: 1.5; }

line-height is the space between baselines, as a multiplier of the font size. 1.5 reads comfortably on screen; 1 feels cramped; very long lines want more. A leading factor of about 1.4–1.6 for body text is the safe zone. (It inherits, so set it once on body.)

---

Styling links: the four states

a { color: #1f3a5f; text-decoration: underline; }
a:hover { color: #2e7d32; }

• :hover — the moment the pointer is over the link.
• :visited, :active, :focus are the sibling states (visited, being clicked, focused by keyboard).

The :hover style — a colour change, an underline appearing or disappearing — tells the visitor the text is clickable. Without it, links look identical to plain text; with too much of it, the page jitters as hover switches states. Change colour, keep the underline: a safe, readable recipe.

---

Pitfalls to watch for

• Forgetting background-color needs visible space — a background paints only the element's own box (Session 11).
• color vs background-color — text colour vs paint behind; color: white with a white background makes invisible text.
• Relying on one font — without a fallback stack, visitors missing the font get the browser default; include the generic family.
• Mixing units carelessly — pick rem for scalable sizing and keep px for truly fixed details.

Session 10 — Worked examples

Example A — The café palette, one place

body {
  color: #333333;
  background-color: #faf7f2;
}
h1, h2 {
  color: #1f3a5f;
}
.price {
  color: #2e7d32;
  font-weight: bold;
}

Three colours do most of the work:

• #333333 — near-black body text on #faf7f2 (a warm off-white, echoing the sand-and-pier theme).
• #1f3a5f — deep blue headings.
• #2e7d32 — green prices.

Editing one hex in this file restyles every page that links it.

---

Example B — The three notations, same colour

h2 { color: navy; }
h2 { color: #000080; }
h2 { color: rgb(0, 0, 128); }

All three render the same navy. #000080 — hex for red=0, green=0, blue=128. Names are for reading, hex is for shipping, rgb()/rgba() is for when you need the alpha channel.

---

Example C — A translucent overlay

.overlay {
  background-color: rgba(31, 58, 95, 0.85);
  color: #ffffff;
}

rgba(31, 58, 95, 0.85) paints the café's dark blue at 85% opacity — the page behind it faintly shows through, and white text on top stays readable. That alpha channel is the whole point of rgba().

---

Example D — Typography: headings vs body

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: #1f3a5f;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }

Read the system:

1. Body: Helvetica (falling back to any sans-serif), 16 px base, 1.5 line height.
2. Headings: Georgia (falling back to any serif), deep blue.
3. h1 is 2rem = 32 px; h2 is 1.5rem = 24 px — both scale if the base font changes.

Serif headings + sans-serif body is a classic pairing: the headings feel literary, the body stays clean.

---

Example E — Text alignment and case

.page-header { text-align: center; }
.kicker { text-transform: uppercase; letter-spacing: 1px; }

• .page-header centres its text inside its box.
• .kicker (a small label above a heading, e.g. "Menu") is forced to capitals with a touch of letter spacing — a designer's cheap trick for a labelled eyebrow.

---

Example F — Link states

a {
  color: #1f3a5f;
  text-decoration: underline;
}
a:hover { color: #2e7d32; }

Resting links are deep blue with an underline; hovering turns them green. The hover change is the visitor's signal that the text is clickable — keep it subtle (colour only), and the page stays calm.