CSS Variables — Custom Properties for Reusable Values

CSS Variables (aka Custom Properties) let you store values in one place and reuse them throughout your stylesheet, making your CSS easier to maintain and update.

Syntax

Defining a variable

Variables are defined inside a selector (commonly :root for global scope) using -- prefix:

:root {  --main-color: #3498db;  --padding: 16px;  --font-stack: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}

Using a variable

Use the var() function to use the variable’s value:

body {  color: var(--main-color);  padding: var(--padding);  font-family: var(--font-stack);}

Benefits

• Easy to update colors, fonts, spacing, etc. in one place.

• Can be scoped to specific elements (not just global).

• Supports fallback values: var(--unknown, fallback)

• Can be updated dynamically with JavaScript.

Example

:root {  --primary-color: #ff6347;  --secondary-color: #4caf50;  --font-size-large: 2rem;}h1 {  color: var(--primary-color);  font-size: var(--font-size-large);}button {  background-color: var(--secondary-color);  color: white;  padding: 10px 20px;  border: none;  border-radius: 4px;}

Using fallback value

p {  color: var(--text-color, black); /* uses black if --text-color is not defined */}

Updating variables with JavaScript

document.documentElement.style.setProperty('--primary-color', '#1abc9c');

Want me to help you create a theme switcher using CSS variables or show scoped variables usage?