What is :root in css variables

CssConceptBeginner · 3 min read

:root in CSS Variables: What It Is and How to Use It

:root in CSS is a special selector that targets the highest-level element in the document, usually the <html> element. It is commonly used to define CSS variables globally, so they can be accessed anywhere in the stylesheet.

⚙️

How It Works

Think of :root as the top boss of your webpage's structure. It selects the very first element that contains everything else, which is usually the <html> tag. When you define CSS variables inside :root, you are setting global values that any part of your page can use.

This is like setting a company-wide rule that everyone follows. For example, if you set a color variable in :root, all sections, headers, and buttons can use that color without redefining it. This makes your styles easier to manage and update.

💻

Example

This example shows how to define a color variable in :root and use it in different parts of the page.

css

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

body {
  background-color: var(--main-color);
  padding: var(--padding);
  color: white;
  font-family: Arial, sans-serif;
}

h1 {
  color: var(--main-color);
  background-color: white;
  padding: var(--padding);
  border-radius: 0.5rem;
}

Output

A webpage with a blue background and white text. The heading (h1) has blue text on a white background with some padding and rounded corners.

🎯

When to Use

Use :root when you want to create CSS variables that apply to your entire website or app. This is helpful for colors, fonts, spacing, or any style values you want to keep consistent.

For example, if you have a brand color or a standard font size, define it in :root. Later, if you want to change the look, you only update the variable once, and all parts of your site update automatically. This saves time and reduces mistakes.

✅

Key Points

:root targets the top-level element, usually <html>.
It is used to define global CSS variables accessible anywhere.
Using :root helps keep styles consistent and easy to update.
Variables defined in :root can be overridden in more specific selectors if needed.

✅

Key Takeaways

:root is the best place to define global CSS variables for your whole site.

Variables in :root make styling consistent and easy to maintain.

Changing a variable in :root updates all uses automatically.

Use :root for colors, fonts, spacing, and other common style values.