Design values, direction and motion · Lesson 13 of 17

CSS custom properties and functions

Shared values, fallbacks and calculated sizes.

8 minutes1 games

Custom property names start with -- and are read with var(). They follow the cascade and inherit by default, so a container can theme its descendants. A var fallback handles an unavailable or invalid custom property; it does not ensure any supplied value is valid for the final property.

HTML

<style>
  :root {--accent:teal;--space:12px;}
  .card {color:var(--accent, navy);padding:calc(var(--space) * 2);border:2px solid currentColor;}
  .warm {--accent:maroon;}
</style>
<div class="card">Default</div><section class="warm"><div class="card">Overridden</div></section>

Define --accent

Inherit or override

Read with var()

Exercise

Define --accent as purple on .theme and use it for .label text.

HTML

<style></style><div class="theme"><p class="label">Theme</p></div>

Learn more from

Played 0 of 1 games

CSS

Design values, direction and motion · Lesson 13 of 17

CSS custom properties and functions

Shared values, fallbacks and calculated sizes.

8 minutes1 games

HTML

<style>
  :root {--accent:teal;--space:12px;}
  .card {color:var(--accent, navy);padding:calc(var(--space) * 2);border:2px solid currentColor;}
  .warm {--accent:maroon;}
</style>
<div class="card">Default</div><section class="warm"><div class="card">Overridden</div></section>

Define --accent

Inherit or override

Read with var()

Exercise

Define --accent as purple on .theme and use it for .label text.

HTML

<style></style><div class="theme"><p class="label">Theme</p></div>

Learn more from

Played 0 of 1 games