The :root Pseudo-Class

:root Selector

:root selects the root element of the document — the <html> element. It has higher specificity than html and is the ideal place for CSS custom properties (variables).

Example

:root {
  /* Design tokens */
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --font-base: 16px;
  --radius: 4px;
  --shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Use anywhere in the stylesheet */
.btn { background: var(--color-primary); border-radius: var(--radius); }

CSS

Full Editor

Pro Tip

Define all design system values in :root — changing one variable updates every element using it across the whole site.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned