Mastering CSS Variables for Beginners

Introduction

When writing CSS, you often repeat the same colors, font sizes, or spacing values again and again, This repetition makes your code harder to maintain.

CSS variables, also called CSS custom properties, solve this problem by allowing you to store values in one place and reuse them throughout your stylesheet.

This guide explains CSS variables step by step, using very simple examples suitable for absolute beginners.

What Are CSS Variables?

CSS variables are reusable values defined in CSS.

Instead of repeating values like colors or sizes, you store them in a variable and use that variable anywhere in your CSS.

Think of a CSS variable like a label for a value.

Example:

--main-color: blue;

Here, –main-color stores the value blue.

Why Use CSS Variables?

CSS variables make your code:

• Easier to read
• Faster to update
• More consistent
• Better for large projects

If you change a value in one place, it updates everywhere.

How to Define CSS Variables

Using the :root Selector

The :root selector defines variables globally, meaning they can be used anywhere in the CSS.

:root {
--primary-color: #3498db;
--font-size: 16px;
}

✔ This is the most common and recommended approach.

How to Use CSS Variables

To use a CSS variable, you use the var() function.

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

The browser replaces the variable with its stored value.

Simple Example

:root {
--bg-color: #f5f5f5;
--text-color: #333;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}

✔ Change the colors once, and the entire page updates.

CSS Variables vs Normal CSS Values

Without variables:

h1 {
color: blue;
}
p {
color: blue;
}

With variables:

:root {
--main-color: blue;
}
h1 {
color: var(--main-color);
}
p {
color: var(--main-color);
}

✔ Cleaner and easier to maintain.

Local (Scoped) CSS Variables

CSS variables can also be defined inside a specific selector.

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

✔ This variable only works inside .card.

Using Fallback Values

You can provide a fallback value in case the variable is missing.

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

✔ If –secondary-color is not defined, black will be used.

Common Use Cases for CSS Variables

• Theme colors (light / dark mode)
• Font sizes
• Spacing values
• Reusable layouts
• Design systems

Beginner Mistakes to Avoid

• Forgetting — when defining variables
• Using variables without var()
• Defining too many unnecessary variables
• Not using :root for global values

Conclusion

CSS variables are a powerful yet beginner-friendly feature that helps you write cleaner, smarter, and more maintainable CSS.

Once you start using them, managing styles becomes much easier especially as your projects grow.

Practice defining and using variables in small projects to build confidence.

At Developer Hint we simplify web development concepts so beginners can learn faster with clear examples and practical code.

Advertisements