CSS Variables

CSS Variables allow you to store reusable CSS values such as colors, spacing, font sizes, and other design values in one place.

---

What are CSS Variables?

CSS Variables, also called CSS Custom Properties, are reusable values that can be defined once and used in multiple places in a stylesheet.

They are especially useful for maintaining a consistent design system and making large websites easier to manage.

Interactive Design System

This visual represents a reusable color system. Hover over the image to see the colors smoothly change using CSS variables.

CSS Variable Syntax

:root {
    --primary-color: #2563eb;
    --text-color: #212529;
}

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

How CSS Variables Work

1. Defining Variables in :root

The :root selector is commonly used to define global CSS variables so they can be reused throughout the stylesheet.

:root {
    --primary-color: #2563eb;
    --secondary-color: #7c3aed;
    --text-color: #212529;
    --spacing: 20px;
}

2. Using CSS Variables

:root {
    --primary-color: #2563eb;
}

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

Output

3. Storing Multiple Values

CSS variables are not limited to colors. You can store spacing, border radius, font sizes, shadows, and many other reusable values.

:root {
    --primary-color: #2563eb;
    --card-radius: 12px;
    --card-padding: 24px;
    --heading-size: 28px;
}

Practical Example

:root {
    --primary-color: #2563eb;
    --card-background: #ffffff;
    --text-color: #212529;
    --card-radius: 12px;
}

.course-card {
    background-color: var(--card-background);
    color: var(--text-color);
    border: 2px solid var(--primary-color);
    border-radius: var(--card-radius);
}

Output

4. Changing a Variable

One major advantage of CSS variables is that changing one variable can update multiple elements that use it.

:root {
    --primary-color: #2563eb;
}

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

.card {
    border-color: var(--primary-color);
}

.heading {
    color: var(--primary-color);
}

5. Theme Example

CSS variables are very useful for creating themes. Different themes can use different variable values.

:root {
    --primary-color: #2563eb;
    --background-color: #ffffff;
    --text-color: #212529;
}

.dark-theme {
    --primary-color: #a78bfa;
    --background-color: #111827;
    --text-color: #f9fafb;
}

Interactive Theme Output

6. Local CSS Variables

Variables do not always need to be global. A variable can also be defined inside a specific element.

.course-card {
    --card-color: #7c3aed;

    border-color: var(--card-color);
}

7. Fallback Values

You can provide a fallback value in case a CSS variable is not available.

8. CSS Variables with calc()

CSS variables can also be used inside functions such as calc().

:root {
    --page-padding: 20px;
}

.container {
    width: calc(100% - (var(--page-padding) * 2));
}

Common Uses of CSS Variables

CSS Variables vs Normal CSS Values

Best Practices

• Use meaningful variable names.
• Keep global design values in :root.
• Group related variables together.
• Use variables for repeated values such as colors and spacing.
• Use fallback values when appropriate.
• Keep variable names consistent across the project.