Phase 5 — Allowed

This file is the gauge for everything in phase5/. Do not use anything outside this list.

Learning goal

Choose CSS units intentionally and control what happens when constrained content does not fit.

HTML tags allowed

• html, head, title, body, header, main, footer, link
• nav, section, article, aside
• div, p
• h1, h2, h3, h4, h5, h6
• img, figure, figcaption
• input, button
• ul, ol, li
• a

Semantic labelling attributes from Phase 4 remain available.

CSS properties allowed

Everything from Phase 4:

• margin, padding
• font-size, font-weight
• width, min-width, max-width
• height, min-height, max-height
• background, display
• border, border-radius, color
• text-align, justify-content
• box-sizing

New in Phase 5:

• overflow

Units allowed

• px
• %
• rem
• em
• vh, vw
• svh, svw
• lvh, lvw
• dvh, dvw
• Unitless 0 and valid keywords such as auto

Overflow values allowed

• visible
• hidden
• auto
• scroll

Not allowed

• JavaScript
• Any HTML tag or CSS property not listed above
• overflow-x, overflow-y
• align-items, gap, flex-direction, flex-wrap
• Media queries and inline styles

Learning rules

1. Use px when a deliberate fixed reference size is useful.
2. Use % when sizing should follow a containing block.
3. Use rem for root-relative page spacing and type.
4. Use em when a component should scale with its text.
5. Use viewport units only when the viewport should control the result.
6. Prefer svh when content must fit with mobile browser controls visible.
7. Prefer dvh when a section should track the changing visible viewport.
8. Use overflow: auto when excess content must remain reachable.
9. Use overflow: hidden only when clipping is intentional and safe.

Pages

• 01-units.html — compare px, %, rem, and em
• 02-viewport-units.html — compare classic and modern viewport units
• 03-overflow.html — compare all four overflow values