CHAPTER 26 VISUAL LABS — boards 26a and 26b

These are original fictional teaching examples. Work locally.
Read the named boards first. Predict before running, and explain any
difference before changing a second thing.

HOW TO REPRODUCE
Open box.html in a browser. Inspect the paragraph with class="card" in
browser developer tools. Its content width is 200 CSS pixels, with 10px
padding, 2px border and 8px margin on each horizontal side. Board 26a
adds these layers: the visible border width is 224px; including horizontal
margins gives 240px. The ordinary browser content-box sizing applies.
Open cascade.html and inspect the .intro paragraph's applied styles.
The later 1rem rule supplies the size; the earlier colour still applies.
1rem is the root text size, so its pixel value depends on browser settings.

CHANGE / PREDICT / CHECK
In box.html change only padding to 20px. Predict first: the border width
becomes 244px; including margins gives 260px. Inspect to check. The printed
explanatory paragraphs are fixed labels; update them if you keep the edit.
In cascade.html move the 1.25rem rule below the 1rem rule. Predict first:
font size becomes 1.25rem; colour remains #17324d. Save and refresh.

These pages use no scripts, external resources or network requests.
