CSS Variables

CSS Variables let you store values and reuse them anywhere.

Basic Syntax

Creating Variable

:root{
  --primary: #0f172a;
}

Using Variable

button{
  background: var(--primary);
}

:root

:root{
  --primary:red;
}

:root means global scope.

Variables become available everywhere in the website.

Think of it like global storage.

Variable Fallback Value

color: var(--text, black);

Meaning:

• use --text
• if not found → use black