CSS Measurement Units – Absolute vs. Relative

Chapter 1 – Introduction to CSS Units

• Two broad categories of CSS measurement units:
  • Absolute units – fixed, never scale.
  • $px$ (pixel) – already used throughout the course.
  • $pt$ (point), $in$ (inch), $cm$, $mm$ – primarily for print media, rarely/never for the Web; instructor removes them from discussion for simplicity.
  • Relative units – computed in relation to another value.
  • $\%$ – percentage of the parent element’s relevant dimension.
  • $vw$ & $vh$ – percentage of the viewport’s width and height respectively.
  • $em$ & $rem$ – multiples of font size (local element or root).
• “Which unit you use depends on the problem you’re solving.”

Chapter 2 – Fixed-Size Box (Pixels)

• Example markup: a single $<div class="box">$…$</div>$.
• Initial styles:
  • $width:100\,px;$
  • $height:100\,px;$
  • $background\text{-}color:gold;$
• Demonstration:
  • No matter how large or small the screen, the box remains $100\times100$ px.
  • Resizing the browser window confirms fixed dimensions.
• Common criticism: pixels are “not scalable” → supposedly should be avoided for responsive design.
• Counter-argument (use-case): border thickness.
  • Added: $border\text{-}top:3\,px\ solid\ orange;$
  • Requirement: border must remain exactly $3\,px$ on any device.
  • Pixel values therefore still valuable for precise, non-scaling elements.

Chapter 3 – Percentages & the Parent Element’s Width

• Change width declaration: $width:50\%;$ (height left at $100\,px$ or unset).
• Parent of .box is $<body>$.
  • Initially $body$ has no explicit width; add $width:300\,px;$ to illustrate math:
  • $50\%$ of $300\,px = 150\,px$.
  • DevTools confirmation: $width=150\,px$.
• Important concept: All relative values are eventually resolved to pixels by the browser.
• Remove $body\ width$ → what is default width?
  • $<body>$ is a block-level element → default $width:100\%;$
  • Therefore .box expands to $50\%$ of full page width.

Chapter 4 – Responsive Behavior & Body Margin

• Margin on $body$ (added earlier in course) creates visible gutter.
  • Commenting out $margin$ makes .box truly occupy exactly $50\%$ of page width.
• When browser window resizes, .box width adjusts proportionally → key benefit of relative units (percentages) for responsive layouts.

Chapter 5 – 100% Height Pitfall & Block Elements’ Default Height

• Attempt: $height:100\%;$ expects .box to fill full vertical space but disappears.
• Diagnostic: create temporary empty $<div>$ after .box, inspect dimensions.
  • Width equals viewport width (e.g. $550\,px$ on instructor’s screen).
  • Height registers $0\,px$ because block elements’ default height is $auto$ → equals content height; with no content, that is $0$.
  • Adding “hello” text increases height (e.g. $18\,px$), proving point.
• Why .box collapsed:
  • $height:100\%;$ is relative to parent (body).
  • $body$ has no explicit $height$ → defaults to $auto$ (here $0$ because only fixed border inside).
  • Only absolute length used so far is the $3\,px$ top border; body’s computed height therefore $3\,px$, so .box interior unseen.

Chapter 6 – Viewport Units (vh & vw)

• Solution: change $height:100\%;$ to $height:100vh;$.
  • $1vh = 1\%$ of viewport height ⇒ $100vh$ fills full visible vertical area.
  • Box now stretches full height and scales when browser window height changes.
• $vw$ behaves analogously for width:
  • $50vw$ ⇒ box width equals $50\%$ of viewport width (same final look as earlier $50\%$ relative to body, but independent of ancestor widths).

Chapter 7 – Font-Relative Units (em)

• $em$ pronounced “em” or “m”; both acceptable.
• Use-case: want layout dimensions to scale with font size (e.g. accessibility—user increases default font).
• Example: $width:10em;$
  • $1em =$ current element’s computed font size.
  • Font-size lookup chain:
    1) Element’s own $font\text{-}size$ declaration.
    2) Otherwise inherits from parent, walking up DOM until root ($<html>$).
  • Browsers default $<html>$ font size to $16\,px$.
  • Therefore, with no explicit sizes anywhere, $10em = 10\times16 = 160\,px$. (DevTools confirmation.)
• Set explicit $font\text{-}size:20\,px;$ on .box → $10em = 200\,px$.
• Problem: Mental calculation can become cumbersome when inheritance chain is long; must trace to find effective font size.

Chapter 8 – Root-Relative Unit (rem)

• $rem$ = “root em”.
  • Always multiplies by root element’s font size (i.e.
    $<html>$), skipping inheritance traversal.
  • Makes reasoning simpler: only one reference value.
• Example: $width:10rem;$ under default $16\,px$ root size ⇒ $160\,px$.
• Larger value: $width:15rem;$ ideally $15\times16=240\,px$; can be tedious to multiply.
• Convenience trick: set root font-size to $62.5\%$ of default $16\,px$.
  • Calculation: $16\times0.625 = 10\,px$.
  • Now each $1rem$ ≈ $10\,px$ → quick mental math (e.g. $15rem ≈ 150\,px$).
  • CSS snippet:
    css html { font-size: 62.5%; /* 10px base for easy rem math */ }
  • Instructor verifies: DevTools shows .box width $150\,px$.

Chapter 9 – Demonstration with Text & User Settings

• Add $<p>$ element with lorem ipsum after .box.
• Users can change browser’s default font size (Chrome Settings → Appearance → Font Size).
  • “Medium” = default $16\,px$.
  • Choosing “Very large” increases root font size; both paragraph text and .box width expand (because .box uses rem/em units) → accessibility improvement; layout adapts.
  • Conversely, “Very small” compresses both.
• Highlights why font-relative units enhance responsiveness and user experience.

Chapter 10 – Summary & Best-Unit Philosophy

• Final example uses three different unit types simultaneously:
  • $px$ – for fixed border height $3\,px$ (precision, non-scaling).
  • $vh$ – ensures box fills full viewport height regardless of content.
  • $rem$ – lets box width adapt to root font size, respecting user preferences.
• Key takeaway: “There is no single best unit.” Choose based on specific design problem and required behavior (fixed vs. scalable vs. font-dependent).

Additional Connections & Practical Tips

• Absolute units like $in$, $cm$, $mm$ align with print-CSS or PDF generation; rarely appropriate for responsive Web UIs.
• Pixels correspond to device-independent CSS pixels—not necessarily physical screen pixels; modern devices deploy pixel-density abstraction (device-pixel-ratio).
• Use percentages for fluid grids where dimension should be tied to parent container rather than entire viewport.
• Combine units creatively: e.g., calc(100vh − 3rem) to subtract header height from viewport filling section.
• Ethical/personal-accessibility note: designs based solely on pixel units can hinder users with low vision who rely on browser zoom or default-font changes; relative units promote inclusivity.