In this chapter, you will learn about CSS Variables, also called CSS Custom Properties. They help you store values such as colors, font sizes, or spacing and reuse them in different places. Instead of writing the same value again and again, you can store it once in a variable and use it whenever needed. Let’s understand it step by step.
What are Variables in CSS?
A Variable is a custom value that you create yourself. For example, instead of writing the same color many times:
color: blue;
background-color: blue;
border-color: blue;You can create a variable for that color and reuse it. CSS Variables are created using two hyphens (--). For example:
--main-color: blue;To use the variable, you write:
var(--main-color);1. Creating a CSS Variable
Variables in css are commonly created inside the :root selector. The :root selector represents the main root element of the webpage.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Variables</title>
<style>
:root {
--main-color: blue;
}
h1 {
color: var(--main-color);
}
p {
color: var(--main-color);
}
</style>
</head>
<body>
<h1>CSS Variables</h1>
<p>
This text uses a CSS Variable.
</p>
</body>
</html>
Here:
--main-coloris the variable name.blueis the value stored in the variable.var(--main-color)uses the variable.
Both the heading and paragraph use the same color.
2. Why Use Variables in CSS?
Variables are useful when the same value is used multiple times. For example, imagine a website uses the same color for:
- Headings
- Buttons
- Borders
- Backgrounds
Without a variable, you would need to write the same color value repeatedly. With a CSS Variable, you can change the value in one place.
Example
<!DOCTYPE html>
<html>
<head>
<title>Using CSS Variables</title>
<style>
:root {
--main-color: blue;
}
h1 {
color: var(--main-color);
}
.box {
padding: 30px;
background-color: var(--main-color);
color: white;
}
button {
padding: 10px 20px;
background-color: var(--main-color);
color: white;
border: none;
}
</style>
</head>
<body>
<h1>My Website</h1>
<div class="box">
This box uses the main color.
</div>
<br>
<button>Click Me</button>
</body>
</html>
If you change:
--main-color: blue;to:
--main-color: green;the heading, box, and button will all use the new color.
3. Naming CSS Variables
Variable names must start with two hyphens (--). You can choose meaningful names.
For example:
--primary-color: blue;
--secondary-color: gray;
--main-font-size: 18px;
--spacing: 20px;Using clear names makes your CSS easier to read and manage.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Variable Names</title>
<style>
:root {
--primary-color: blue;
--secondary-color: gray;
--main-font-size: 18px;
--main-spacing: 20px;
}
h1 {
color: var(--primary-color);
}
p {
color: var(--secondary-color);
font-size: var(--main-font-size);
}
.box {
padding: var(--main-spacing);
background-color: lightblue;
}
</style>
</head>
<body>
<h1>CSS Variables</h1>
<div class="box">
<p>
CSS Variables make repeated values easier to manage.
</p>
</div>
</body>
</html>
4. Using Variables for Different Values
Variables are not limited to colors. You can store many types of values, such as:
- Colors
- Font sizes
- Spacing
- Border radius
- Widths
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Variable Values</title>
<style>
:root {
--box-color: lightblue;
--box-padding: 30px;
--box-radius: 10px;
--text-size: 20px;
}
.box {
background-color: var(--box-color);
padding: var(--box-padding);
border-radius: var(--box-radius);
font-size: var(--text-size);
}
</style>
</head>
<body>
<div class="box">
This box uses multiple CSS Variables.
</div>
</body>
</html>
This makes it easier to manage repeated design values.
5. Variables Inside a Specific Element
You do not always have to create variables inside :root. You can also create a variable inside a specific selector. In that case, the variable is mainly available inside that element and its child elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>Local CSS Variables</title>
<style>
.box {
--box-color: lightgreen;
padding: 30px;
background-color: var(--box-color);
}
.box p {
color: var(--box-color);
background-color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<p>
This paragraph uses a variable created inside the box.
</p>
</div>
</body>
</html>
The variable --box-color is created inside .box. It can also be used by elements inside that box.
6. Changing a Variable Value
One useful feature of Variables in css is that you can change their value in another selector.
Example
<!DOCTYPE html>
<html>
<head>
<title>Changing CSS Variables</title>
<style>
:root {
--main-color: blue;
}
.box {
padding: 30px;
background-color: var(--main-color);
color: white;
}
.special-box {
--main-color: green;
}
</style>
</head>
<body>
<div class="box">
Blue Box
</div>
<br>
<div class="box special-box">
Green Box
</div>
</body>
</html>
The first box uses the value from :root. The second box creates a new value for --main-color, so it becomes green.
7. Using a Fallback Value
Sometimes, a variable in css may not have a value. You can provide a fallback value inside var().
The syntax is:
var(--variable-name, fallback-value);Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Variable Fallback</title>
<style>
.box {
padding: 30px;
background-color: var(--box-color, lightblue);
}
</style>
</head>
<body>
<div class="box">
This box uses a fallback color.
</div>
</body>
</html>
In this example, --box-color has not been created. So, the browser uses lightblue as the fallback value.
8. A Practical Example
Variables in css are especially useful when creating a consistent design. For example, a website may have primary and secondary colors that are used in many places.
Example
<!DOCTYPE html>
<html>
<head>
<title>Practical CSS Variables</title>
<style>
:root {
--primary-color: #0E1528;
--secondary-color: #FF6200;
--light-color: #f5f5f5;
--spacing: 20px;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
padding: var(--spacing);
background-color: var(--primary-color);
color: white;
text-align: center;
}
.container {
padding: var(--spacing);
}
.box {
padding: var(--spacing);
background-color: var(--light-color);
border-left: 5px solid var(--secondary-color);
}
button {
margin-top: var(--spacing);
padding: 10px 20px;
background-color: var(--secondary-color);
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<div class="container">
<div class="box">
<h2>CSS Variables</h2>
<p>
This page uses CSS Variables to manage colors and spacing.
</p>
<button>Learn More</button>
</div>
</div>
</body>
</html>
If you want to change the main colors or spacing, you can simply update the values inside :root. This can save time, especially when working on larger websites.
Quick Recap
- CSS Variables are also called Custom Properties.
- Variables are created using two hyphens, such as
--main-color. - Use
var()to access a CSS Variable. :rootis commonly used to create global variables.- Variables in css can store colors, sizes, spacing, and other values.
- Variables can also be created inside specific selectors.
- Fallback values can be added inside
var(). - Variables make CSS easier to manage and update.
Frequently Asked Questions (FAQs)
Q1. What are CSS Variables?
CSS Variables, also called CSS Custom Properties, allow you to store values such as colors, spacing, and font sizes and reuse them in your CSS.
Q2. How do you create a Variable in css?
You can create a CSS Variable using two hyphens (--) followed by a name, such as --main-color: blue;.
Q3. How to use CSS Variables?
CSS Variables are accessed using the var() function. For example, var(--main-color) uses the value stored in the --main-color variable.
Q4. Is this CSS Variables tutorial for beginners?
Yes. This CSS Variables tutorial for beginners explains Custom Properties, :root, var(), local variables, and fallback values with simple examples.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
