As websites become larger and more feature-rich, managing CSS code efficiently becomes increasingly important. Modern websites often use the same colors, fonts, spacing, borders, and other design values across hundreds of CSS rules. Repeating these values again and again makes stylesheets difficult to maintain and update.
CSS Variables, also known as CSS Custom Properties, provide a simple and powerful solution to this problem. Instead of writing the same value multiple times, developers can define it once and reuse it throughout the stylesheet. If the value needs to change later, only one update is required, making the code cleaner and easier to manage.
CSS Variables are widely used in responsive websites, design systems, dashboards, blogs, e-commerce websites, educational portals, and modern web applications. They help developers write reusable, maintainable, and organized CSS while reducing duplication.
In this tutorial, you will learn the fundamentals of CSS Variables, understand how to create global and local variables, explore their advantages, and use them in practical examples to build professional websites.
CSS Variables are named values that store reusable CSS properties such as colors, font sizes, spacing, borders, shadows, or any other style value. Once a variable is defined, it can be used repeatedly throughout the stylesheet.
Instead of hardcoding the same color or spacing value in multiple places, developers create a variable and reference it wherever needed. This improves code readability and simplifies future modifications.
CSS Variables are officially known as CSS Custom Properties because developers can define their own property names according to project requirements.
Large websites often contain thousands of lines of CSS. If a website uses the same primary color throughout the stylesheet, changing that color manually everywhere becomes time-consuming and increases the risk of mistakes.
CSS Variables solve this problem by allowing developers to update a value in one place. Every CSS rule that references the variable automatically reflects the new value.
This approach saves development time, improves consistency, and makes stylesheets much easier to maintain.
CSS Variables are defined using two hyphens (--) followed by a custom variable name. To use the stored value, the var() function is used.
--variable-name:value;
property:var(--variable-name);
The var() function tells the browser to replace the variable with its stored value.
Global variables are accessible throughout the entire stylesheet. They are usually declared inside the :root selector, which represents the highest level of the HTML document.
Variables declared in :root can be used by every element on the webpage, making them ideal for defining common colors, font sizes, spacing values, and themes.
:root{
--primary-color:#0d6efd;
--text-color:#222222;
--border-radius:8px;
}
These variables are now available anywhere in the stylesheet.
Once global variables have been defined, they can be applied to any CSS rule using the var() function.
h1{
color:var(--primary-color);
}
button{
border-radius:var(--border-radius);
}
p{
color:var(--text-color);
}
If the value of --primary-color changes, every element using that variable automatically updates without modifying individual CSS rules.
Unlike global variables, local variables are available only within a specific selector. They are useful when a value is needed only for a particular section of a webpage.
.card{
--card-color:#198754;
background:var(--card-color);
}
The variable --card-color exists only inside the .card selector and cannot be accessed from other CSS rules.
The following example demonstrates how CSS Variables simplify website styling by storing reusable design values.
<button class="btn"> Learn CSS </button>
:root{
--button-color:#0d6efd;
--button-radius:6px;
}
.btn{
background:var(--button-color);
color:white;
padding:12px 24px;
border:none;
border-radius:var(--button-radius);
cursor:pointer;
}
The button uses two reusable variables for its background color and border radius. If these variables are updated later, every button using them automatically adopts the new values.
| Feature | Benefit |
|---|---|
| Reusable Values | Write a value once and use it many times. |
| Easy Maintenance | Update styles from one location. |
| Cleaner Code | Reduce duplicate CSS declarations. |
| Consistent Design | Maintain uniform colors and spacing. |
| Scalable Projects | Ideal for large websites and applications. |
One of the biggest advantages of CSS Variables is the ability to store multiple reusable values in a single location. Instead of repeatedly writing colors, font sizes, spacing, border styles, and shadows throughout a stylesheet, developers can define them once and reuse them wherever needed.
This approach creates cleaner CSS, improves consistency, and makes future updates much easier. If the design changes, only the variable values need to be modified instead of searching through the entire stylesheet.
:root{
--primary-color:#0d6efd;
--secondary-color:#198754;
--text-color:#333333;
--font-size:18px;
--spacing:20px;
}
These variables can now be reused throughout the website, reducing repetitive code and improving maintainability.
The scope of a CSS Variable determines where it can be accessed. Variables defined inside the :root selector are global and available throughout the stylesheet, while variables declared inside a specific selector are local and can only be used within that selector and its child elements.
.card{
--card-background:#f8f9fa;
background:var(--card-background);
}
The variable --card-background is only available inside the .card element. Other elements cannot use this variable unless they are inside the same scope.
CSS Variables naturally inherit their values through the HTML structure. Child elements can access variables defined by their parent elements unless a new value overrides them.
Inheritance helps developers apply consistent styles across sections of a webpage without redefining the same variables multiple times.
.container{
--main-color:#6610f2;
color:var(--main-color);
}
.container p{
color:var(--main-color);
}
Both the container and its paragraph elements display the same text color because the variable is inherited.
Sometimes a CSS Variable may not be defined. In such cases, developers can provide a fallback value using the var() function. The browser uses the fallback value whenever the specified variable does not exist.
property:var(--variable-name,fallback-value);
h2{
color:var(--heading-color,#0d6efd);
}
If --heading-color has not been defined, the browser automatically uses the fallback color #0d6efd.
CSS Variables are widely used for creating website themes. Instead of assigning colors individually to every element, developers define theme colors once and reuse them across the entire website.
:root{
--primary:#0d6efd;
--background:#ffffff;
--text:#222222;
}
body{
background:var(--background);
color:var(--text);
}
button{
background:var(--primary);
color:white;
}
Changing only the variable values updates the appearance of every element that uses those variables.
Buttons often share the same design throughout a website. CSS Variables make it easy to create reusable button styles that remain consistent across different pages.
<button class="btn"> Register </button>
:root{
--btn-color:#198754;
--btn-radius:6px;
--btn-padding:12px 24px;
}
.btn{
background:var(--btn-color);
color:white;
padding:var(--btn-padding);
border:none;
border-radius:var(--btn-radius);
cursor:pointer;
}
If the website design changes, developers only need to update the variable values instead of modifying every button individually.
CSS Variables can also be combined with the calc() function to perform simple mathematical calculations. This provides additional flexibility when defining spacing, sizing, or layout values.
:root{
--space:20px;
}
.box{
padding:calc(var(--space) * 2);
}
The padding becomes twice the value stored in the variable, making layouts easier to manage and update.
The following example demonstrates how CSS Variables can be used to build a reusable card component for educational websites, portfolios, blogs, and business websites.
<div class="course-card"> <h3>Modern CSS</h3> <p> Learn CSS Variables with practical examples. </p> </div>
:root{
--card-bg:#ffffff;
--card-border:#dddddd;
--card-radius:10px;
--card-shadow:0 5px 15px rgba(0,0,0,0.1);
}
.course-card{
background:var(--card-bg);
border:1px solid var(--card-border);
border-radius:var(--card-radius);
box-shadow:var(--card-shadow);
padding:25px;
}
The card uses reusable variables for its background, border, border radius, and shadow. This makes it easy to maintain a consistent design throughout the website.
CSS Variables can also simplify hover effects by storing colors and transition values. This approach keeps interactive styles consistent across multiple elements.
:root{
--normal:#0d6efd;
--hover:#084298;
}
.button{
background:var(--normal);
transition:0.3s;
}
.button:hover{
background:var(--hover);
}
When the user places the mouse pointer over the button, the background changes smoothly using the predefined variable values.
One of the most practical uses of CSS Variables is creating light and dark themes for a website. Instead of changing individual CSS properties, developers only need to update the values stored in the variables. Every element using those variables automatically adopts the new appearance.
This approach keeps the stylesheet organized, reduces duplicate code, and makes future design changes much easier.
:root{
--background:#ffffff;
--text:#222222;
--primary:#0d6efd;
}
.dark-mode{
--background:#1e1e1e;
--text:#f5f5f5;
--primary:#4dabf7;
}
body{
background:var(--background);
color:var(--text);
}
button{
background:var(--primary);
}
By changing only the variable values inside the .dark-mode class, the website instantly switches to a dark theme without rewriting the entire stylesheet.
CSS Variables work perfectly with Media Queries. Developers can assign different values to variables based on screen size, allowing the entire website to adapt automatically without modifying multiple CSS rules.
:root{
--heading-size:42px;
}
h1{
font-size:var(--heading-size);
}
@media(max-width:768px){
:root{
--heading-size:30px;
}
}
When the screen width becomes smaller than 768 pixels, the heading size automatically changes because the variable receives a new value.
Modern websites often follow a design system that defines standard colors, typography, spacing, borders, and component styles. CSS Variables make it easy to build and maintain these design systems by storing all commonly used values in one place.
:root{
--primary:#0d6efd;
--secondary:#198754;
--danger:#dc3545;
--warning:#ffc107;
--font-large:32px;
--font-normal:18px;
--space:20px;
}
Every page of the website can use these variables to maintain a consistent appearance.
CSS Variables are lightweight and supported by all modern browsers. Following a few simple practices can help keep stylesheets efficient and maintainable.
| CSS Variables | Traditional CSS Values |
|---|---|
| Reusable throughout the stylesheet. | Repeated wherever needed. |
| Easy to update. | Require manual editing. |
| Improve maintainability. | Become difficult to manage in large projects. |
| Support dynamic themes. | Not suitable for centralized theme management. |
| Reduce duplicate code. | Often increase code repetition. |
CSS Variables, also called Custom Properties, are reusable values that store CSS properties such as colors, spacing, font sizes, and borders.
The :root selector is commonly used to declare global CSS Variables that can be accessed throughout the entire stylesheet.
The var() function is used to retrieve the value stored in a CSS Variable.
Yes. CSS Variables can be assigned different values inside Media Queries, allowing responsive styles to update automatically.
A fallback value is an alternative value used by the browser when a CSS Variable has not been defined.
| Concept | Description |
|---|---|
| CSS Variable | Stores reusable CSS values. |
| :root | Defines global variables. |
| Local Variable | Available only inside a specific selector. |
| var() | Retrieves the value of a variable. |
| Fallback Value | Alternative value used when a variable is unavailable. |
| Inheritance | Allows child elements to access parent variables. |
| Theme | Uses variables to manage website colors and styles. |
CSS Variables have become an essential feature of modern CSS because they make stylesheets cleaner, more organized, and easier to maintain. By storing reusable values for colors, typography, spacing, borders, and other design properties, developers can create scalable websites that are simple to update and maintain.
Whether you are building a small personal website or a large web application, CSS Variables help improve code quality and reduce repetitive styling. When combined with Flexbox, Grid, Media Queries, Responsive Web Design, and modern CSS techniques, they enable developers to create professional, consistent, and efficient user interfaces that are easy to manage over time.