Lesson 5.0

Orientation

Artifact: Knowing what CSS is, what changes between Ch 4 and Ch 5, and what you ship at the end

1. The promise

You'll know what CSS is (the look layer of a web page), what changes between the Ch 4 site and the Ch 5 version of it, what you build in the chapter assignment, and how this chapter connects to Tailwind, design tokens, and the component frameworks you've heard of.

2. The mental model

The Ch 4 site was a finished house with no paint, no flooring, no lighting, and no furniture. CSS is the paint, the floor, the lights, and the trim.

The walls don't move. The HTML stays the same. The look changes.

A page built well can be re-themed light, dark, or brand-coloured by changing only the CSS. That's the test of a clean stylesheet.

(DIAGRAM: the three layers of a web page revisited — annotated SVG — three stacked boxes labelled HTML (structure), CSS (look), JavaScript (behaviour), with the CSS layer highlighted as the focus of this chapter)

The two-sentence definition:

  • CSS (Cascading Style Sheets) is the file the browser reads to know how the HTML should look.
  • A stylesheet is a file of CSS rules. Usually a .css file the HTML links to.

CSS does not change what the page says. It only changes how it looks.

(SCREENSHOT: the Click to Career chapter index for Ch 5 — full window — the orientation unit highlighted)

(SCREENSHOT: the Ch 4 unstyled three-page site and the Ch 5 styled version of the same site, side by side in two Chrome windows — full screen)

The big idea is separation of concerns. Structure in HTML (Ch 4). Look in CSS (this chapter). Behaviour in JavaScript (Ch 6, Ch 7). Each layer changes without touching the others, when the page is built right.

You'll also meet two more terms in this chapter:

  • A rule is one CSS instruction. It has a selector and a declaration block.
  • A declaration is a property-value pair inside a rule. color: red; is one declaration.
  • A token is a named, reused value — a colour, a space, a font size. Defined once, used everywhere.

3. What you ship at the end of this chapter

The chapter assignment is a from-scratch rebuild of a real product page (Stripe pricing or Notion landing) from a screenshot.

  • Responsive from 320 pixels to 1440 pixels wide.
  • AA contrast on every text-background pair.
  • Light and dark modes via prefers-color-scheme.
  • A token system documented in the stylesheet.

(SCREENSHOT: the finished assignment page (Stripe pricing rebuild) at 1440 pixels wide — full window — no DevTools open)

The next chapter (JavaScript) makes the page interactive. This chapter proves the look is yours.

4. Why no Tailwind until 5.15

Tailwind is CSS with a different syntax. Learning Tailwind before CSS is learning a dialect before learning the language.

You'll know the underlying CSS for every Tailwind class you use later. That makes the dialect cheap to pick up in unit 5.15.

5. Common stumbles

  • You expect to learn animations and transitions. Transitions are covered briefly in 5.8 and 5.15. Full animation work lands in Ch 7. Set expectations.
  • You want to skip to a framework. Every framework generates the same CSS you'll write by hand here. Skipping the language is skipping the literacy.

6. You should know

1/18
Next