MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
In your Class 8 algebra class, your mathematics teacher writes on the blackboard: $$x = 15$$ Whenever you see $x$ inside an equation—whether calculating the perimeter of a playground ($2x + 10$) or finding total exam marks ($4x$)—you simply substitute $15$. If the teacher decides to change the problem to $x = 25$, they don't erase 50 different lines on the blackboard. They erase and update one single number at the top, and the entire solution updates automatically!
+-------------------------------------------------------------------------+
| THE ALGEBRA OF CSS CUSTOM PROPERTIES |
| |
| The Hardcoded Nightmare (Changing brand color takes 3 hours): |
| .header { background: #1e3a8a; } |
| .button { background: #1e3a8a; } <--- Hardcoded in 250 files! |
| .badge { color: #1e3a8a; } |
| .border { border: 1px solid #1e3a8a; } |
| |
| The CSS Variable Superpower (Changing brand color takes 2 seconds): |
| --school-blue: #1e3a8a; |
| |
| .header { background: var(--school-blue); } |
| .button { background: var(--school-blue); } |
| .badge { color: var(--school-blue); } |
| .border { border: 1px solid var(--school-blue); } |
+-------------------------------------------------------------------------+Before CSS Custom Properties existed, web developers had to rely on preprocessors like SASS or Less. But preprocessors convert variables into static numbers before the page loads. Native CSS Variables live inside the live browser DOM, allowing real-time theme swapping, JavaScript interaction, and scoped component overrides!
--) DeclarationEvery CSS variable name must begin with two hyphens (--):
--accent-color and --Accent-Color are treated as two completely distinct, unrelated variables!var() Retrieval FunctionTo read and apply a variable, wrap its name inside var():
What happens if a variable was never defined or failed to load? The browser allows you to supply a fallback value as the second argument inside var():
Just like variables in programming languages (C++, Python, JavaScript), CSS variables have lexical scope:
:root): Declared at the very top of the DOM. Accessible by every element on the page..card): Declared on a specific selector. Accessible only by that element and its descendants.You can create an entire family of themed cards by changing one single variable on the parent modifier class:
Look how clean and scalable that is! You wrote the card CSS once, and created 4 distinct school house themes simply by overriding --house-color.
| Bad Practice (Don't) | Good Practice (Do) | Why? |
|---|---|---|
Writing variable names without hyphens (accent-color: #2563eb;) | Always prefix with double dashes: --accent-color: #2563eb; | CSS requires -- to distinguish custom properties from native CSS properties. |
Writing var(accent-color) without dashes | Write var(--accent-color) | The double-dash is mandatory in both declaration and retrieval. |
Mixing up case (--Main-Color vs --main-color) | Adopt lowercase kebab-case standard: --main-color | CSS variables are case-sensitive; mismatched case breaks style lookups. |
Storing units separately (--size: 20; font-size: var(--size)px;) | Store the full unit in the variable: --size: 20px; or use calc() | CSS does not concatenate strings and numbers directly like var(--size)px. |
--variable-name: value; (must begin with --, case-sensitive).var(--variable-name, fallback).:root for global access; declared in a selector for local component scoping.var(--color, black)).var(--accent, #3b82f6)?font-size: var(--size)px; invalid when --size: 16;?.sidebar { --bg: #333; }, where can that variable be accessed?Build an interactive School House Roster Card that leverages scoped variable overriding:
.house-card component wired to use --house-theme for its border, heading, icon ring, and button.#64748b)..tagore, .ashoka, .raman) that each define only ONE line of CSS: --house-theme: <color>;!Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Test your understanding of this lesson with 5 questions. Each question has one correct answer.