Values, Units, and Color Tutorial | SovranCode

Course contentsValues, Units, and Color · 16 topics

CSS Foundations

CSS Introduction Selectors and Relationships Cascade, Specificity, and Inheritance Values, Units, and Color

Layout Systems

The Box Model and Sizing Normal Flow, Display, and Positioning Flexbox CSS Grid

Applied CSS Systems

Backgrounds, Borders, and Visual Layers Interactive States and Pseudo-elements Overflow, Stacking Contexts, and Layering Transforms, Transitions, and Animation CSS Architecture, Components, and Maintenance

Responsive and Responsible CSS

Responsive Design and Container Queries Typography and Rhythm Motion, Focus, and Accessibility

CSS 49 min

Values, Units, and Color

Choose flexible units, useful custom properties, and accessible color values.

CSS values can be absolute, relative, calculated, or derived from custom properties. rem supports user font preferences, percentages relate to a containing size, and modern functions such as clamp() express a bounded fluid value.

See the core pattern

Read this rule set from the outside in. Identify the inputs, the decision or transformation, and the result before changing it.

:root {
  --space: clamp(1rem, 2vw, 2rem);
  --text: #10231f;
  --surface: oklch(97% 0.02 95);
}

.prose {
  width: min(70ch, 100%);
  padding: var(--space);
}

Working rules

Use rem for text and user-scalable spacing
Use ch to control readable line length
Measure foreground/background contrast rather than guessing

A common mistake

Viewport units alone can make text unusably small or huge. Bound fluid values with min(), max(), or clamp().

Guided practice

Create a fluid spacing value that never drops below 1rem or exceeds 3rem.

Copy the example into the editable notebook below.
Change one thing at a time and keep the program or rule valid.
Explain the result in one sentence without relying on jargon.

CSS DEEP DIVE · ABOUT 25 MIN

Create a fluid spacing and color system

Read the explanation, predict the visual result, then edit and run a complete example. Finish with a repair, an independent build, and a knowledge check.

Choose the reference before choosing the number

A rem is relative to the root font size, while em used for font-size is relative to the parent's font size. Other em lengths generally use the element's own font size. Percentages are property-dependent rather than a universal fraction of the viewport: percentage widths commonly use the containing block's width. This means a value cannot be understood without its property and context. Preserve browser font preferences and test enlarged text instead of fixing the root font size merely to make arithmetic easier.

Bound fluid values and provide a meaningful fallback

clamp() chooses a preferred value constrained by a minimum and maximum. A spacing expression can grow with the viewport while remaining usable at both extremes. Custom properties store reusable values and participate in inheritance; var(--name, fallback) supplies a fallback when that variable is missing or invalid as a custom property. It does not validate an arbitrary supplied token for every destination property. Color tokens should describe roles such as text and surface. Test their actual pairing, including interaction states, rather than assuming a pleasing hue is readable.

Resize the preview and inspect the panel padding. Compare clamp(1rem, 4vw, 3rem) with a bare 4vw at the narrowest width.

Saved CSS practice

Edit the CSS inside the style element. Account work syncs; guest work stays on this device.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
:root { --space: clamp(1rem, 4vw, 3rem); --ink: #172b40; --surface: #edf2f7; }
body { font: 1rem/1.7 system-ui; margin: 0; padding: 1rem; }
.panel { box-sizing: border-box; width: min(100%, 65ch); margin-inline: auto; padding: var(--space); color: var(--ink); background: var(--surface); }
h1 { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.2; }
</style>
</head>
<body>
<main class="panel"><h1>Room to read</h1><p>A fluid panel should stay readable at narrow and wide sizes. Change the tokens to explore how a shared decision affects several elements.</p></main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
:root { --space: clamp(1rem, 4vw, 3rem); --ink: #172b40; --surface: #edf2f7; }
body { font: 1rem/1.7 system-ui; margin: 0; padding: 1rem; }
.panel { box-sizing: border-box; width: min(100%, 65ch); margin-inline: auto; padding: var(--space); color: var(--ink); background: var(--surface); }
h1 { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.2; }
</style>
</head>
<body>
<main class="panel"><h1>Room to read</h1><p>A fluid panel should stay readable at narrow and wide sizes. Change the tokens to explore how a shared decision affects several elements.</p></main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run in new window

Loading saved work…

Edit the CSS inside the style element and compare the result in the live preview. Your work saves automatically; you can also download a local copy.

DEBUGGING CHALLENGE

Find the faulty assumption

Explain the problem and write your repair before opening the solution.

.panel { padding: var(--spcae); }

Reveal repair and explanation

.panel { padding: var(--space, 1rem); }

The misspelled custom property is missing. Correct the name and include a sensible fallback; inspect the computed padding to verify it.

INDEPENDENT LAB

Build it without copying

Define surface, text, and spacing tokens for two panels, then override only the surface on one panel.

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a fluid spacing and color system lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Create a fluid spacing and color system</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a fluid spacing and color system lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Create a fluid spacing and color system</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Self-review checklist

Spacing has an explicit minimum and maximum.Text remains usable when the browser's default font size increases.Foreground and background pairings are checked with a contrast tool.

What did you test and change?

Loading saved work…

This lab is saved separately from the worked example. The checklist is a self-review, not an automatic grade.

CSS knowledge check

Answer both questions correctly to pass this lesson check. Account scores are recomputed on the server. This is a learning check, not certification.

1. What does 1rem reference?The viewport widthThe root element's font sizeThe closest grid track

2. Which expression bounds spacing between 1rem and 3rem?clamp(1rem, 4vw, 3rem)min(1rem, 3rem)4vw

Loading saved work…