Soopro Pathshala

1. Introduction to CSS Variables

CSS Variables are user-defined values that can be reused throughout a stylesheet. Instead of repeating the same value multiple times, you define it once and use it wherever needed.

Why Use CSS Variables?

Reduce duplicate code.
Improve code readability.
Easy to maintain large projects.
Quickly change colors and themes.
Create reusable design values.


Without Variables

color: blue;

color: blue;

color: blue;

With Variables

--primary-color: blue;

color: var(--primary-color);

CSS Variables help create cleaner and more maintainable stylesheets.

2. Declaring CSS Variables (:root)

Global CSS Variables are usually declared inside the :root selector. Variables defined here are available throughout the entire webpage.


:root{

    --primary-color:#0d6efd;

    --secondary-color:#198754;

    --font-size:18px;

}

Variable	Value
--primary-color	#0d6efd
--secondary-color	#198754
--font-size	18px

Variables declared inside :root are called global variables.

3. Using CSS Variables (var())

The var() function is used to retrieve the value stored in a CSS Variable.


:root{

    --primary-color:#0d6efd;

}

h1{

    color:var(--primary-color);

}

button{

    background:var(--primary-color);

}

Function	Purpose
var()	Reads the value of a CSS Variable.
--variable-name	Represents a custom property.

Always access CSS Variables using the var() function.

4. Local vs Global Variables

CSS Variables can be declared globally or locally depending on where they are defined.

Type	Scope
Global Variable	Available throughout the webpage.
Local Variable	Available only inside the selected element.


:root{

    --main-color:blue;

}

.card{

    --main-color:red;

    color:var(--main-color);

}

Local variables override global variables within their scope.

5. Benefits of CSS Variables

CSS Variables simplify styling and make projects easier to manage, especially when working with large websites or teams.

Benefit	Description
Reusable	Write once and use many times.
Easy Maintenance	Update one value to affect many elements.
Theme Support	Create light and dark themes easily.
Cleaner Code	Reduce repetition in CSS.
Consistency	Maintain the same design across the website.


:root{

    --border-radius:10px;

}

.card{

    border-radius:var(--border-radius);

}

.button{

    border-radius:var(--border-radius);

}

CSS Variables save development time by allowing one value to be reused throughout a project.

6. Updating CSS Variables

One of the biggest advantages of CSS Variables is that you only need to change the variable value once, and every element using that variable updates automatically.


:root{

    --primary-color:#0d6efd;

}

button{

    background:var(--primary-color);

}

.card{

    border-color:var(--primary-color);

}

If you change the variable value:


:root{

    --primary-color:#dc3545;

}

Updating one variable automatically updates all elements using it.

7. CSS Variables with Media Queries

CSS Variables work perfectly with Media Queries. You can change variable values for different screen sizes without rewriting multiple CSS rules.


:root{

    --font-size:18px;

}

body{

    font-size:var(--font-size);

}

@media(max-width:768px){

    :root{

        --font-size:15px;

    }

}

Screen Size	Font Size
Desktop	18px
Mobile	15px

CSS Variables and Media Queries make responsive design easier to maintain.

8. Practical CSS Variable Examples

Example 1: Button Color


:root{

    --btn-color:#198754;

}

button{

    background:var(--btn-color);

}

Example 2: Card Border Radius


:root{

    --radius:12px;

}

.card{

    border-radius:var(--radius);

}

Example 3: Website Font


:root{

    --main-font:Arial,sans-serif;

}

body{

    font-family:var(--main-font);

}

Variables help maintain a consistent design across the entire website.

9. Light & Dark Theme Using Variables

CSS Variables make it easy to create light and dark themes by changing only the variable values.


:root{

    --bg-color:white;

    --text-color:black;

}

body{

    background:var(--bg-color);

    color:var(--text-color);

}

.dark-theme{

    --bg-color:#212529;

    --text-color:white;

}

Theme	Background	Text
Light	White	Black
Dark	#212529	White

Modern websites often use CSS Variables to implement dark mode.

10. CSS Variables Comparison Table

Feature	CSS Variables
Declaration	`--variable-name:value;`
Usage	`var(--variable-name)`
Global Scope	Inside `:root`
Local Scope	Inside a specific selector
Reusable	✔ Yes
Theme Support	✔ Excellent
Responsive Friendly	✔ Works with Media Queries


:root{

    --primary:#0d6efd;

}

h1{

    color:var(--primary);

}

button{

    background:var(--primary);

}

CSS Variables reduce repetition, improve consistency, and simplify theme management.

11. CSS Variables Best Practices

Following best practices helps you write cleaner, reusable, and maintainable CSS using Variables.

Declare global variables inside :root.
Use meaningful variable names.
Group similar variables together.
Reuse variables instead of repeating values.
Use variables for colors, spacing, fonts, and sizes.
Use variables for light and dark themes.
Keep variable names consistent across projects.
Document important variables with comments.

Well-organized variables make large projects easier to maintain.

12. Common CSS Variable Mistakes

Mistake	Correct Practice
Using unclear variable names.	Use descriptive names.
Declaring global variables inside random selectors.	Declare them inside `:root`.
Repeating hard-coded values.	Use reusable variables.
Creating unnecessary variables.	Create variables only for reusable values.
Ignoring variable scope.	Understand local and global variables.


❌ Incorrect

button{

    background:#0d6efd;

}

.card{

    border-color:#0d6efd;

}

✔ Correct

:root{

    --primary:#0d6efd;

}

button{

    background:var(--primary);

}

.card{

    border-color:var(--primary);

}

Reusing variables reduces duplicate code and improves maintainability.

13. Browser Support

CSS Variables are supported by all modern web browsers. They are widely used in professional web development.

Browser	Support
Google Chrome	✔ Supported
Mozilla Firefox	✔ Supported
Microsoft Edge	✔ Supported
Safari	✔ Supported
Opera	✔ Supported

CSS Variables are fully supported in all modern browsers.

14. CSS Variables Interview Questions

What are CSS Variables?
Why are CSS Variables called Custom Properties?
How do you declare a global CSS Variable?
What is the purpose of the :root selector?
Which function is used to access CSS Variables?
What is the difference between local and global variables?
How do CSS Variables improve code maintenance?
Can CSS Variables be used with Media Queries?
How are CSS Variables useful for dark mode?
What happens if a variable is declared locally and globally with the same name?

These questions are frequently asked in Front-End Developer interviews.

15. Lesson Summary

In this lesson, you learned:

✔ Introduction to CSS Variables.
✔ Declaring Variables using :root.
✔ Using Variables with var().
✔ Local vs Global Variables.
✔ Benefits of CSS Variables.
✔ Updating Variables.
✔ CSS Variables with Media Queries.
✔ Light and Dark Themes.
✔ Best Practices and Common Mistakes.
✔ Browser Support and Interview Questions.

Congratulations! You have successfully completed the CSS Variables lesson. You can now create reusable, maintainable, and theme-friendly stylesheets using CSS Variables.

Quick Quiz

Which function is used to access a CSS Variable?

var()
calc()
rgb()

CSS3 Tutorial

CSS Variables