How to Use CSS Variables (Custom Properties)

CSS Variables, officially called CSS Custom Properties, are a modern CSS feature that lets you store certain values in variables and reuse them throughout your stylesheet. This feature makes CSS code easier to manage and more consistent, and it supports features like theming and dark mode. This article covers how to use them from the ground up.

What Are CSS Variables?

A CSS Variable is a value that you define once and can reuse many times. If you want to change your website's primary color, you only need to change a single value — every element that uses that variable will update automatically.

How to Define a CSS Variable

CSS Variables are defined with a two-hyphen prefix (--). They are usually placed inside the :root selector so they are available globally:

:root {
  --primary-color: #3b82f6;
  --secondary-color: #10b981;
  --text-color: #1e293b;
  --background-color: #f8fafc;
  --base-font-size: 16px;
  --border-radius: 8px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

How to Use a CSS Variable

Use the var() function to access a variable's value:

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-size: var(--base-font-size);
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  box-shadow: var(--shadow);
}

.button-success {
  background-color: var(--secondary-color);
  color: white;
  padding: 10px 20px;
  border-radius: var(--border-radius);
}

Fallback Values

You can provide a fallback value in case the variable is not defined:

.element {
  color: var(--custom-color, #333333);
  /* If --custom-color does not exist, use #333333 */
}

CSS Variables Are Cascading

CSS Variables follow the CSS cascade and inheritance rules. You can redefine a variable on a specific selector to give it a different value:

:root {
  --card-bg-color: #ffffff;
}

.dark-card {
  --card-bg-color: #1e293b;
}

.card {
  background-color: var(--card-bg-color); /* differs depending on the parent */
  padding: 20px;
  border-radius: 8px;
}

<!-- White card -->
<div class="card">A regular card</div>

<!-- Dark card -->
<div class="dark-card">
  <div class="card">A card inside a dark div</div>
</div>

Practical Example: A Consistent Color System

:root {
  --blue-100: #dbeafe;
  --blue-500: #3b82f6;
  --blue-700: #1d4ed8;
  --gray-100: #f1f5f9;
  --gray-800: #1e293b;
}

.header {
  background: var(--blue-700);
  color: white;
}

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

.button-primary:hover {
  background: var(--blue-700);
}

.soft-background {
  background: var(--gray-100);
}

.dark-text {
  color: var(--gray-800);
}

Example: Changing the Theme with CSS Variables

CSS Variables are very easy to combine with JavaScript to create dynamic themes:

<!-- HTML -->
<button onclick="switchTheme()">Switch Theme</button>
<div class="box">This box will change color</div>

<style>
:root {
  --bg: #ffffff;
  --text: #000000;
}

.box {
  background: var(--bg);
  color: var(--text);
  padding: 20px;
  transition: all 0.3s ease;
}
</style>

<script>
function switchTheme() {
  const root = document.documentElement;
  const bg = getComputedStyle(root).getPropertyValue('--bg').trim();
  if (bg === '#ffffff') {
    root.style.setProperty('--bg', '#1e293b');
    root.style.setProperty('--text', '#ffffff');
  } else {
    root.style.setProperty('--bg', '#ffffff');
    root.style.setProperty('--text', '#000000');
  }
}
</script>

Tips for Using CSS Variables

• Group variables by category: colors, typography, spacing, shadows, and so on.
• Use descriptive names like --primary-color rather than --c1.
• CSS Variables have an edge over preprocessors like Sass because they can be changed at runtime through JavaScript.
• Make sure there is a fallback value for older browsers that do not yet support CSS Variables (although nearly all modern browsers support them today).

Conclusion

CSS Variables are a very useful feature for writing more structured, maintainable CSS code that supports dynamic features like theming. By defining variables in :root and using them with var(), you can change the appearance of an entire website just by editing a few lines of code. Start applying CSS Variables in your projects now for cleaner, more professional code.