CSS Variables & Custom Properties

CSS Variables let you store reusable values like colors, sizes, and more — making your styles easy to manage and update.

Example: Boxes using CSS Variables

Box 1

Box 2

Resize your browser to see the boxes adjust their size and font dynamically!

How CSS Variables Work

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 18px;
  --box-size: 150px;
}

.box {
  background-color: var(--secondary-color);
  font-size: var(--font-size);
  width: var(--box-size);
  height: var(--box-size);
}

Responsive Variables Example

@media (max-width: 600px) {
  :root {
    --box-size: 100px;
    --font-size: 14px;
  }
}

Quiz: Test Your Knowledge

1. How do you declare a CSS variable?

var(--my-variable)
--my-variable: value;
let my-variable = value;

2. Where should global variables be defined?

Inside :root
Inside body
Inside html

3. How do you use a variable in CSS?

var(--variable-name);
--variable-name;
use(--variable-name);