CSS Variables

CSS Variables, also known as Custom Properties, are a powerful tool for making your CSS code more organized and easier to update. They allow you to store values (like colors, font sizes, or spacing) and reuse them throughout your stylesheet. Think of them as variables in programming, but for your CSS!

What is a CSS Variable?

A CSS variable is a container for a specific value that you can use in your CSS rules. You define a variable using a -- prefix followed by a name (e.g., --main-color). You then assign a value to that variable. Later, you can use the var() function to use the value of your variable wherever needed in your CSS. This is incredibly helpful when you need to change a value globally, as you only need to update the variable definition, rather than changing it in multiple places.

Basic Example

Let’s see a simple example. We’ll define a variable for our primary color and use it to style a heading and a paragraph.


<!DOCTYPE html>
<html>
<head>
<title>CSS Variables Example</title>
<style>
:root {
  --primary-color: #007bff; /* Define the variable */
  --font-size-base: 16px;
}
 
h1 {
  color: var(--primary-color); /* Use the variable */
  font-size: calc(var(--font-size-base) * 2); /* Another example */
}
 
p {
  color: var(--primary-color);
  font-size: var(--font-size-base);
}
</style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph styled with CSS variables.</p>
</body>
</html>

In the code above:

:root is a special selector that applies the variables globally.
--primary-color and --font-size-base are our defined variables.
var(--primary-color) and var(--font-size-base) are used to retrieve and apply the variable values. Notice how we use calc() to multiply our base font size by 2, showing flexibility.

Practical Usage

Let’s imagine we’re building a website with a consistent design. We can use CSS variables to manage our theme’s colors and spacing.


<!DOCTYPE html>
<html>
<head>
<title>Theme Example</title>
<style>
:root {
  --primary-color: #3498db; /* Blue */
  --secondary-color: #2ecc71; /* Green */
  --background-color: #f4f4f4; /* Light Gray */
  --padding-size: 10px;
  --border-radius: 5px;
  --font-family: sans-serif;
}
 
body {
  font-family: var(--font-family);
  background-color: var(--background-color);
  margin: 0;
  padding: 0;
}
 
.container {
  padding: var(--padding-size);
}
 
.button {
  background-color: var(--primary-color);
  color: white;
  padding: var(--padding-size);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
}
 
.button:hover {
  background-color: var(--secondary-color);
}
</style>
</head>
<body>
  <div class="container">
    <button class="button">Click Me</button>
  </div>
</body>
</html>

In this example:

We define variables for colors, padding, border-radius and font family.
The .button’s background color and hover effect are controlled by these variables.
Changing --primary-color will instantly update the button’s background.

Key Takeaways

CSS variables make your CSS more organized and readable.
They allow you to easily change values in one place, affecting your entire website.
Use the :root selector to define global variables.
Use var(--variable-name) to use a variable’s value.
CSS variables are a modern best practice for web development.