CSS Custom Properties (Variables) — Free HTML Tutorial

Learn CSS Custom Properties (Variables) in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

✓ 100% Free ✓ No Login Needed ✓ NCERT / CBSE Aligned ✓ Download as PDF

TL;DR: Learn CSS Custom Properties (Variables) in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

Written & reviewed by the Syllab.in Academic Team (CBSE/NCERT subject experts) · Updated Sep 17, 2026

🤖 Stuck on any question? Ask Syllab's free AI Tutor for a step-by-step explanation — instant, unlimited, no login.

CSS Custom Properties (Variables) in HTML

CSS variables: --name: value; Access with var(--name). Reduce repetition, enable dynamic theming.

Scope: :root { } makes global. Can scope to elements. Inheritance works like normal CSS.

JavaScript can update: element.style.setProperty("--name", "value");

CSS Custom Properties (Variables) — Syntax

<style>
  :root {
    --primary: #3b82f6;
    --spacing: 16px;
  }

  .button {
    background: var(--primary);
    padding: var(--spacing);
  }
</style>

Learn CSS Custom Properties (Variables) step by step with Syllab's free interactive HTML tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full HTML course →