CSS Variables | CSS Tutorial

CSS Variables (also called custom properties) let you store values (like colors, font sizes, margins) in one place and reuse them throughout your stylesheet. This makes your code cleaner, easier to maintain, and more consistent.

Instead of repeating the same color or size everywhere, you can define a variable once and use it multiple times.

Syntax

:root {
  --variable-name: value;
}

:root → defines global variables available across the page.
--variable-name → variable name (always starts with --).
var(--variable-name) → used to access the variable.

Example 1: Basic CSS Variables

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Example</title>
  <style>
    /* Defining variables */
    :root {
      --main-bg: lightblue;
      --main-color: darkblue;
      --padding: 15px;
      --radius: 10px;
    }
 
    body {
      background-color: var(--main-bg);
      font-family: Arial, sans-serif;
      text-align: center;
      padding: var(--padding);
    }
 
    h1 {
      color: var(--main-color);
      background: white;
      padding: var(--padding);
      border-radius: var(--radius);
    }
 
    p {
      color: var(--main-color);
    }
  </style>
</head>
<body>
  <h1>CSS Variables Demo</h1>
  <p>This paragraph also uses the same variable color!</p>
</body>
</html>

Output:

Background = light blue.
Heading has dark blue text with white background, padding, and rounded corners.
Paragraph text is also dark blue.

Notice how both <h1> and <p> share the same color variable, so if you change it once in :root, it updates everywhere!

Example 2: Overriding Variables Locally

You can also redefine variables inside specific elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variable Override</title>
  <style>
    :root {
      --box-bg: lightcoral;
      --box-color: white;
    }
 
    .box {
      background: var(--box-bg);
      color: var(--box-color);
      padding: 20px;
      margin: 10px;
      border-radius: 8px;
    }
 
    /* Override variable inside container */
    .container {
      --box-bg: teal;
      --box-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box">I use global variable (lightcoral bg)</div>
 
  <div class="container">
    <div class="box">I use overridden variable (teal bg, yellow text)</div>
  </div>
</body>
</html>

First box → light coral background with white text.
Second box → teal background with yellow text (because container overrides the variables).

Why Use CSS Variables?

Easy to update values (change in one place, reflect everywhere).
Useful for themes (light mode, dark mode).
Cleaner and more consistent styling.
Reduces mistakes from repeating values.

Quick Recap:

Define variables with --name inside :root.
Use them with var(--name).
Can override inside elements for flexibility.
Great for colors, spacing, fonts, themes, etc.