CssHow-ToBeginner · 3 min read

How to Use :root in CSS for Global Variables

The :root selector in CSS targets the highest-level element in the document, usually the html element. It is commonly used to define global CSS variables (custom properties) that can be reused throughout your stylesheets for consistent and easy theming.

📐

Syntax

The :root selector targets the root element of the document, which is the html element in HTML. Inside :root, you can define CSS custom properties (variables) using the syntax --variable-name: value;. These variables can then be accessed anywhere in your CSS using the var(--variable-name) function.

css

:root {
  --main-color: #3498db;
  --padding: 1rem;
}

💻

Example

This example shows how to define colors and spacing variables inside :root and use them in other CSS rules. This makes it easy to change the theme by updating variables in one place.

css

/* Define variables globally */
:root {
  --primary-color: #4CAF50;
  --secondary-color: #ff9800;
  --font-size: 1.2rem;
  --padding: 10px;
}

/* Use variables in styles */
body {
  background-color: var(--primary-color);
  color: white;
  font-size: var(--font-size);
  padding: var(--padding);
}

button {
  background-color: var(--secondary-color);
  border: none;
  padding: var(--padding);
  color: white;
  font-size: var(--font-size);
  cursor: pointer;
}

Output

A webpage with a green background, white text, and a button with orange background and white text, all sized and padded consistently using the variables.

⚠️

Common Pitfalls

Forgetting to use var() when accessing variables, which causes the styles to not apply.
Defining variables outside :root limits their scope, so they may not be accessible globally.
Using invalid variable names (must start with -- and contain only letters, digits, hyphens).
Not providing fallback values in var() can cause issues if the variable is missing.

css

/* Wrong: missing var() */
body {
  color: --primary-color; /* This will not work */
}

/* Correct: use var() */
body {
  color: var(--primary-color);
}

/* Wrong: variable defined outside :root, limited scope */
.some-class {
  --main-color: red;
}

/* Correct: define in :root for global use */
:root {
  --main-color: red;
}

📊

Quick Reference

:root targets the top-level element (html). Use it to define global CSS variables with --variable-name. Access variables with var(--variable-name). Variables help keep styles consistent and easy to update.

Concept	Description	Example
:root	Selects the root element (html)	:root { --color: blue; }
Custom Property	CSS variable name starting with --	--main-bg-color: #fff;
Using Variable	Access variable with var()	background: var(--main-bg-color);
Scope	Variables in :root are global	Available anywhere in CSS
Fallback	Provide default if variable missing	color: var(--text-color, black);

✅

Key Takeaways

Use :root to define global CSS variables for consistent styling.

Access variables with var(--variable-name) anywhere in your CSS.

Always prefix variable names with -- and define them inside :root for global scope.

Provide fallback values in var() to avoid missing variable issues.

Using :root variables makes theme changes easy by updating one place.