Advanced Features

CSS Variables (Custom Properties)

Reusable, themeable values declared with -- and used via var().

1Declaring Variables

Custom properties start with -- and are scoped to the element they are defined on.

Example Code

css

:root {
  --brand: #4f46e5;
  --radius: 10px;
}

.btn {
  background: var(--brand);
  border-radius: var(--radius);
}

2Fallback Values

var() accepts a fallback used when the variable is undefined.

Example Code

css

.card {
  padding: var(--card-pad, 16px);
}

3Theming with Variables

Switch themes by overriding variables on a parent or via a class.

Example Code

css

:root { --bg: white; --fg: #0f172a; }
.dark { --bg: #0f172a; --fg: #f1f5f9; }

body { background: var(--bg); color: var(--fg); }

4Understand it in a real interface

Custom properties let several rules share a design value through the cascade. Their scope matters: a value defined on a component can override a more general value inherited from the root. A fallback inside var can help when the expected property is not available.

5Try it yourself

Define an accent color at the root and use it on a button and a link. Override it within a single panel and observe which descendants change. Add a fallback value and remove the definition temporarily. Keep variable names tied to purpose rather than unrelated individual elements.

Finished reading?

Mark this topic as complete to track progress.

CSS Animations

Next Topic

CSS Filters