CSS Variables (Custom Properties)

CSS Custom Properties (Variables)

CSS Variables let you store values once and reuse them everywhere. Perfect for theming and consistency.

Declaring variables

:root {
  --primary:    #00bcd4;
  --text:       #0d1b2a;
  --radius:     10px;
  --spacing-md: 16px;
}

Variables on :root are global. The -- prefix is required.

Using variables

button {
  background: var(--primary);
  border-radius: var(--radius);
  padding: var(--spacing-md);
}

/* Fallback if undefined */
color: var(--accent, #ff6b6b);

Dynamic theming with JS

document.documentElement.style
    .setProperty("--primary", "#ff6b6b");

Flexbox Mastery

<!DOCTYPE html>
<html>
<head><style>
:root{--primary:#00bcd4;--bg:#0d1b2a;--card:#1e293b;--text:#e2e8f0;--radius:12px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:sans-serif;background:var(--bg);color:var(--text);padding:24px;min-height:100vh}
.card{background:var(--card);border-radius:var(--radius);padding:20px;margin-bottom:14px}
h3{color:var(--primary);margin-bottom:8px} p{color:#94a3b8;font-size:.9rem}
button{padding:10px 20px;background:var(--primary);color:var(--bg);border:none;border-radius:8px;font-weight:700;cursor:pointer;margin:4px}
</style></head>
<body>
  <div class="card"><h3>CSS Variables Demo</h3><p>Change the --primary color with the buttons below.</p></div>
  <div class="card"><h3>Sample Card</h3><p>This card uses var(--card) for background and var(--primary) for headings.</p></div>
  <div>
    <button onclick="setColor(this,'\#00bcd4')">Cyan</button>
    <button onclick="setColor(this,'\#a78bfa')">Purple</button>
    <button onclick="setColor(this,'\#34d399')">Green</button>
    <button onclick="setColor(this,'\#f59e0b')">Amber</button>
  </div>
  <script>function setColor(btn,c){document.documentElement.style.setProperty("--primary",c);}</script>
</body></html>

Preview