CSS Variables

Imagine designing a website with a specific brand blue color. You use this color in fifty different places across your stylesheets: for buttons, headers, links, and borders. If your client decides to change the brand color to green, you would have to search and replace all fifty color codes manually. CSS variables (custom properties) solve this problem. They let you define your color code in one central place, give it a name (like '--brand-blue'), and reference that name throughout your stylesheets. To change the brand color to green, you simply update the variable value in that one central place.

In this page:

Declaring Variables in :root
Using the var() Function
Custom Property Fallback Values
Variable Inheritance and Scope
Theming with Variables

Syntax

css

:root {
  --variable-name: value;
}
selector {
  property: var(--variable-name, fallback);
}

Declaring Variables in :root

To make your variables available globally across your stylesheets, you declare them inside the ':root' selector. This selector represents the highest-level element in the document structure, making variables accessible to all other selectors.

Note: Always start your custom variable names with double hyphens (e.g., --brand-color) to comply with CSS standards.

Warning: Variable names are case-sensitive; '--brandColor' and '--brandcolor' will be treated as two different variables.

Example: Declaring Variables in :root

css

<style>
:root {
  --brand-color: teal;
}
</style>
<p>Variable declared globally in :root</p>

Using the var() Function

To apply a declared variable value to a property, you use the var() function, passing your custom variable name inside the parentheses.

Note: Using variables for values like margins, padding, and colors keeps your stylesheet structures consistent and clean.

Warning: If you try to call a variable that does not exist, the browser will ignore the rule and use its default fallback value.

Example: Using the var() Function

css

<style>
:root {
  --brand-color: teal;
}
p {
  color: var(--brand-color);
}
</style>
<p>Uses the variable via var()</p>

Custom Property Fallback Values

The var() function allows you to specify a fallback value as a second argument. If the custom variable fails to load, the browser will automatically use the fallback value.

Note: Always write standard fallback values inside your var() functions to prevent styling breaks.

Warning: The fallback value will only be used if the custom variable is undefined; it will not be used if the variable has an invalid value.

Example: Custom Property Fallback Values

css

<style>
p {
  color: var(--undefined-color, gray);
}
</style>
<p>Falls back to gray since --undefined-color isn't set</p>

Variable Inheritance and Scope

Variables follow standard CSS inheritance and scoping rules. When declared inside a specific selector instead of :root, the variable is local and only accessible to that element and its children.

Note: Use local variables to keep your component styles encapsulated and organized.

Warning: Attempting to reference a local variable outside of its parent container scope will fail.

Example: Variable Inheritance and Scope

css

<style>
.card {
  --card-color: navy;
  color: var(--card-color);
}
</style>
<div class="card">Local variable, only accessible here and inside</div>

Theming with Variables

CSS variables make it easy to build dynamic website theme changers. By defining your page color variables inside :root and updating them under a custom class (like '.dark-mode'), you can toggle themes instantly.

Note: Use custom data attributes combined with variables to make toggling themes cleanly.

Warning: Ensure your color variables maintain high contrast in both themes to keep your content readable.

Example: Theming with Variables

css

<style>
:root {
  --bg: white;
  --text: black;
}
.dark-mode {
  --bg: black;
  --text: white;
  background: var(--bg);
  color: var(--text);
}
</style>
<div class="dark-mode">Theme toggled by swapping the variables</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Specificity Hierarchy Next Lesson → CSS !important