CSS Variables (Custom Properties) Explained with Examples

Introduction

CSS Variables, also known as custom properties, allow you to store values and reuse them throughout your stylesheet.

👉 They help you write clean, reusable, and maintainable CSS.

What You’ll Learn

What are CSS variables
How to declare variables
How to use var()
Benefits of variables
Real-world usage

What are CSS Variables?

CSS variables are used to store values like colors, fonts, and spacing.

👉 Instead of repeating values, you define them once and reuse them.

🔹 Creating a Variable

Variables are declared using -- (double dash).

:root {
  --primary-color: blue;
  --font-size: 16px;
}

👉 :root represents the top-level element (HTML document).

🔹 Using a Variable

Use the var() function to apply variables.

p {
  color: var(--primary-color);
  font-size: var(--font-size);
}

👉 This makes your CSS more flexible.

🔹 Why Use CSS Variables?

✔ Reusability

Define once, use many times

✔ Easy updates

Change value in one place

✔ Cleaner code

Less repetition

Without variables:

h1 {
  color: blue;
}

button {
  background-color: blue;
}

If you change brand color, you must update everywhere.

With variables:

:root {
  --primary-color: blue;
}

h1 {
  color: var(--primary-color);
}

button {
  background-color: var(--primary-color);
}

Now change only once.

🔹 Using Variables Inside Variables

:root {
  --base-size: 16px;
  --heading-size: calc(var(--base-size) * 2);
}

👉 You can combine variables with functions like calc().

🔹 Local vs Global Variables

Global (using `:root`)

:root {
  --color: red;
}

👉 Available everywhere

Local Variables

.card {
  --color: green;
  color: var(--color);
}

👉 Works only inside .card

🔹 Multiple Variables Example

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-large: 24px;
}

Use them:

h1 {
  color: var(--primary-color);
  font-size: var(--font-size-large);
}

🔹 Fallback Value

color: var(--main-color, black);

If variable not found → use black.

🔹 Organizing Variables (Important for Projects)

Group related variables together.

:root {
  /* Colors */
  --primary-color: #3498db;
  --text-color: #333;  /* Spacing */
  --padding: 10px;
  --margin: 20px;
}

👉 This makes your CSS structured and easy to manage.

🔹 Real-World Usage

CSS variables are used in:

Theme systems (light/dark mode)
Design systems
Reusable UI components
Large projects

👉 Very important for modern web development.

🔹 Modern Usage: Dark Mode Example

:root {
  --bg-color: white;
  --text-color: black;
}

.dark-mode {
  --bg-color: black;
  --text-color: white;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

👉 Switching class changes entire theme.

🔹 Real-World Example: Button System

:root {
  --btn-bg: blue;
  --btn-color: white;
}button {
  background-color: var(--btn-bg);
  color: var(--btn-color);
}

👉 Changing variables updates all buttons instantly.

🔹 Advantages of CSS Variables

Easy to update styles
Reduces repetition
Improves code readability
Makes design consistent
Useful in large projects

🔹 Limitations of CSS Variables

Can be confusing for beginners
Overuse can make code complex
Not supported in very old browsers

👉 Use them wisely.

🔹 When to Use CSS Variables

Use variables when:

You repeat values frequently
You build reusable components
You want theme switching
You work on large projects

Avoid when:

Small one-time styles
Very simple pages

🔹 Performance and Flexibility

Reduce duplicate code
Easier maintenance
Better scalability

👉 Especially useful in large websites.

🔹 Common Mistakes

Forgetting -- in variable names
Using variables without var()
Overusing too many variables
Not organizing variables properly

Practical Tasks

Task 1: Basic Variables

Create variables for:

Color
Font size

Task 2: Theme Change

Change one variable and update entire design.

Task 3: Local Variables

Use variables inside a class.

Task 4: Dark Mode

Create light/dark theme using variables.

Task 5: Mini Project

Create a UI with:

Buttons
Text
Background

👉 Use variables for all values

Task 6: Fallback Value

Use var() with fallback.

Task 7: Spacing System

Create spacing variables and apply them.

Task 8: Button Theme

Create buttons using variables.

Task 9: Organize Variables

Group variables into sections.

Important Points to Remember

✔ Variables start with --
✔ Use var() to access them
✔ :root is used for global variables
✔ Makes CSS reusable and scalable

Conclusion

CSS variables make your code cleaner, reusable, and easier to manage. They are an essential part of modern CSS and are widely used in real-world projects.

👉 Use variables in all projects
👉 Keep them organized
👉 Build scalable designs