📘 Lesson · Lesson 37

CSS Variables

What CSS Variables Are

CSS variables (officially "custom properties") let you store a value once and reuse it everywhere. Imagine your brand blue #2563eb appears in 40 places across your stylesheet. Without variables, changing the brand colour means find-and-replacing all 40. With a variable, you define the colour ONCE and use it by name everywhere — change it in one spot and all 40 update instantly. This is a genuine, modern CSS feature (not a preprocessor trick) built right into the browser, and it transforms how you manage colours, spacing, and themes.

Declaring with -- (double dash)

:root {
    --primary-color: #2563eb;
    --text-color: #1f2937;
    --spacing: 16px;
    --radius: 8px;
}

A CSS variable is declared with a name starting with two dashes --, given any value. --primary-color: #2563eb creates a variable named --primary-color holding that blue. The name can be anything you choose (use clear, descriptive names). You can store ANY value: colours, sizes, fonts, shadows, even numbers. Convention is to declare them at the top inside :root (explained shortly) so they're available everywhere. Think of this as creating a set of named, reusable settings for your whole design.

Using var() — calling the variable

.button {
    background: var(--primary-color);
    padding: var(--spacing);
    border-radius: var(--radius);
}
.heading {
    color: var(--primary-color);   /* same blue, reused */
}

/* Optional fallback if the variable isn't defined: */
color: var(--primary-color, navy);

To use a variable, wrap its name in var(). background: var(--primary-color) pulls in whatever value that variable holds. Now the same blue is used in the button and the heading — and if you change --primary-color at the top, BOTH update together. You can add a fallback value as a second argument: var(--primary-color, navy) uses navy if the variable somehow isn't defined. This var() function is how variables get read throughout your stylesheet — declare once with --, use anywhere with var().

The :root Scope — variables everywhere

:root {
    --primary-color: #2563eb;   /* available to the ENTIRE page */
}

/* You can also scope variables to a specific element: */
.dark-section {
    --text-color: white;        /* only inside .dark-section */
}

:root is a special selector that targets the very top of the document (the html element) — variables declared there are GLOBAL, available to every element on the page. That's why you almost always define your main design variables in :root. But variables also cascade and can be scoped: declare a variable inside a specific element/class, and it only applies within that element (overriding the global one there). This scoping is powerful — for example, redefining --text-color inside a dark section flips text colour just for that area, using the same variable name. Global by default in :root, locally overridable when needed.

Building a Theme — the real payoff

:root {
    /* Colours */
    --primary: #2563eb;
    --secondary: #10b981;
    --text: #1f2937;
    --bg: #ffffff;
    /* Spacing scale */
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    /* Other tokens */
    --radius: 8px;
    --shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Now the whole site uses these consistently: */
.card {
    background: var(--bg);
    padding: var(--space-md);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

This is where variables shine — a design system in a few lines. By defining all your colours, spacing steps, radii, and shadows as variables at the top (these are called "design tokens"), your entire site draws from one consistent palette. Want to rebrand? Change a handful of values in :root and the whole site updates. This is also the foundation of dark mode: swap the colour variables (often via a class or media query) and every element re-themes automatically. CSS variables turn a scattered stylesheet into a manageable, themeable system — a professional practice you'll use in every serious project. It's the perfect note to end the CSS effects on.

Exam Corner

Q: How do you declare a CSS variable? With a name starting with two dashes, e.g. --primary: #2563eb;

Q: How do you use a variable? With the var() function: color: var(--primary);

Q: What is :root and why declare variables there? It targets the document's top element; variables there are global to the whole page.

Q: How do you provide a fallback value? A second argument: var(--primary, navy).

Q: Why are CSS variables great for theming? Change a value once and everywhere using it updates — ideal for rebrand and dark mode.

CSS Variables क्या हैं

CSS variables (आधिकारिक रूप से "custom properties") आपको एक value एक बार store करके हर जगह reuse करने देते हैं. कल्पना कीजिए आपका brand blue #2563eb आपकी stylesheet में 40 जगह दिखता है. Variables के बिना, brand colour बदलना मतलब सभी 40 को find-and-replace करना. Variable के साथ, आप colour EK बार define करके उसे नाम से हर जगह use करते हैं — एक जगह बदलिए और सभी 40 तुरंत update. यह असली, modern CSS feature है (preprocessor trick नहीं) सीधे browser में built, और यह बदल देता है आप colours, spacing, और themes कैसे manage करते हैं.

-- (double dash) से Declare करना

:root {
    --primary-color: #2563eb;
    --text-color: #1f2937;
    --spacing: 16px;
    --radius: 8px;
}

CSS variable दो dashes -- से शुरू होते नाम के साथ declare होता है, कोई भी value देते हुए. --primary-color: #2563eb --primary-color नाम का variable बनाता है जो वह blue रखता है. नाम आप जो चुनें कुछ भी हो सकता है (साफ, descriptive नाम use कीजिए). आप KOI भी value store कर सकते हैं: colours, sizes, fonts, shadows, numbers भी. Convention है इन्हें ऊपर :root के अंदर declare करना (जल्द समझाया) ताकि वे हर जगह उपलब्ध हों. इसे अपने पूरे design के लिए named, reusable settings का समूह बनाना समझिए.

var() का इस्तेमाल — variable बुलाना

.button {
    background: var(--primary-color);
    padding: var(--spacing);
    border-radius: var(--radius);
}
.heading {
    color: var(--primary-color);   /* wahi blue, reused */
}

/* Optional fallback agar variable defined nahi: */
color: var(--primary-color, navy);

Variable use करने को, उसका नाम var() में लपेटिए. background: var(--primary-color) जो भी value वह variable रखता है खींच लाता है. अब वही blue button और heading में use होता है — और अगर आप ऊपर --primary-color बदलें, DONO साथ update होते हैं. आप दूसरे argument के रूप में fallback value जोड़ सकते हैं: var(--primary-color, navy) navy use करता है अगर variable किसी तरह defined नहीं. यह var() function ही है जिससे variables आपकी पूरी stylesheet में पढ़े जाते हैं — -- से एक बार declare, var() से कहीं भी use.

:root Scope — हर जगह variables

:root {
    --primary-color: #2563eb;   /* POORE page ko available */
}

/* Variables ko specific element me scope bhi kar sakte: */
.dark-section {
    --text-color: white;        /* sirf .dark-section ke andar */
}

:root खास selector है जो document के बिल्कुल ऊपर (html element) target करता है — वहां declare किए variables GLOBAL होते हैं, page के हर element को उपलब्ध. इसीलिए आप लगभग हमेशा अपने मुख्य design variables :root में define करते हैं. पर variables cascade भी करते हैं और scope हो सकते हैं: किसी specific element/class के अंदर variable declare कीजिए, और यह सिर्फ उस element के अंदर लगता है (वहां global को override करते). यह scoping ताकतवर है — जैसे dark section के अंदर --text-color फिर से define करना सिर्फ उस area के लिए text colour पलटता है, वही variable नाम use करते. :root में default से global, ज़रूरत पर locally override करने योग्य.

Theme बनाना — असली फायदा

:root {
    /* Colours */
    --primary: #2563eb;
    --secondary: #10b981;
    --text: #1f2937;
    --bg: #ffffff;
    /* Spacing scale */
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    /* Other tokens */
    --radius: 8px;
    --shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Ab poori site inhe consistently use karti hai: */
.card {
    background: var(--bg);
    padding: var(--space-md);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

यहीं variables चमकते हैं — कुछ lines में design system. अपने सारे colours, spacing steps, radii, और shadows को ऊपर variables के रूप में define करके (इन्हें "design tokens" कहते हैं), आपकी पूरी site एक consistent palette से खींचती है. Rebrand करना है? :root में मुट्ठीभर values बदलिए और पूरी site update. यह dark mode की भी नींव है: colour variables swap कीजिए (अक्सर class या media query से) और हर element अपने आप re-theme होता है. CSS variables बिखरी stylesheet को manageable, themeable system में बदलते हैं — professional practice जो आप हर गंभीर project में use करेंगे. CSS effects खत्म करने का perfect note.

Exam Corner

Q: CSS variable कैसे declare करते हैं? दो dashes से शुरू होते नाम से, जैसे --primary: #2563eb;

Q: Variable कैसे use करते हैं? var() function से: color: var(--primary);

Q: :root क्या है और वहां variables क्यों declare करें? यह document के top element को target करता है; वहां variables पूरे page को global हैं.

Q: Fallback value कैसे देते हैं? दूसरा argument: var(--primary, navy).

Q: CSS variables theming के लिए बढ़िया क्यों? एक value बदलिए और उसे use करने वाला हर जगह update होता — rebrand और dark mode के लिए ideal.

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.