02 · CSS Basics

CSS = Cascading Style Sheets. HTML says what something is; CSS says how it looks — colors, spacing, borders, layout.

Why "Cascading" Style Sheets? Cascade = like water flowing down a series of steps. Many style rules can land on the same element, and they flow down and combine — when two rules disagree, the more specific (or later) one wins, like water settling at the lowest step. That controlled "flowing down and layering" of rules is the cascade. A style sheet is just a sheet (file) of style rules — the word comes from print design, where a "style sheet" listed how a document should look.

1. Where CSS lives

CSS goes in its own file (e.g. style.css). Each HTML page opts in with one line inside <head>:

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

Why a separate file? One stylesheet, many pages. Change a color once and every linked page updates. That's why your <h1> color appeared on both index and members pages at once.

2. A rule = who + what

Selector picks the target; each property: value; line changes one thing.

Punctuation matters — CSS fails silently Colon between property and value, semicolon after every line, curly braces around the block. Miss a semicolon and the rules after it quietly stop working — no error message, things just don't apply. Also: a misspelled property (like margin-bottum) is silently ignored.

3. Kinds of selectors

Selector	Targets	Example
`h1`	Every tag of that type	all headings
`.low-stock`	Anything with `class="low-stock"` (note the dot)	just the rows you tagged
`th, td`	Both, at once (comma = "and")	header + data cells
`nav a`	An `<a>` inside a `<nav>` (space = "descendant")	only navbar links

Gotcha you hit You colored links white with a { color: white; } — which hits every link on the site, a trap waiting to make some future link invisible. The fix was the descendant selector nav a { color: white; } so only navbar links change. Prefer the narrowest selector that does the job.

4. The box model

Every element is a box with four layers. This is the single most important idea in CSS layout.

content → padding (inside the border) → border → margin (outside, pushes neighbors).

Property	Where	Effect
`padding`	Inside the border	Breathing room around content (your table cells)
`border`	The wall	`1px solid black` = thickness, style, color
`margin`	Outside the border	Pushes other elements away

Why "margin" and "padding"? Both come from the physical world of paper. A margin is the blank border around a printed page — the space outside the text, keeping pages apart. Padding is stuffing placed inside something (like a padded envelope) — cushioning between the content and its edge. So: margin = outside space, padding = inside cushion. The everyday meanings tell you exactly which is which.

5. Block vs inline

Boxes come in two default behaviors — this explains a lot of "why won't it move?" moments.

Block = own line, full width. Inline = flows along the line.

Switch between them with display: block; or display: inline;. That's how you turned form labels into stacked rows (label { display: block; }) and retired the <br> hack.

Gotcha you hit — and figured out margin-bottom on an inline element does nothing. Inline boxes have no vertical box to push from — top/bottom margin is ignored (left/right still work). Fixes: put the margin on a block element instead, or use display: inline-block; (flows inline, but gains a real box that respects vertical margin).

6. Flexbox — layout made sane

Set display: flex; on a parent and its direct children line up in a row. It's a conversation: the switch goes on the parent, the children fall into line.

nav {
  display: flex;
  gap: 20px;
  background-color: darkslateblue;
  padding: 12px;
}

The container controls direction, spacing (gap), and distribution (justify-content).

Property (on the parent)	Does
`display: flex`	Turns on flex; children become a row
`gap`	Even space between children
`justify-content`	Spread along the row: `center`, `space-between`…
`align-items`	Line up on the cross axis: `center` is the workhorse

Why flexbox exists Before ~2015, laying out boxes meant abusing float (made for wrapping text around images), inline-block with margin hacks, or even <table> tags for layout. All fragile. Flexbox was the first tool built for arranging boxes — centering and even spacing became one line each. (Its 2D sibling, CSS Grid, comes later.)

Remove dead code When a rule does nothing (like an empty leftover a { }), delete it and refresh. If nothing changes, it was dead weight. Messy CSS is where bugs hide.

← Prev: HTML Basics · Back to contents