:root
Matches the root element of the document — `<html>` on a web page.
Syntax
:root { … }Examples
Custom properties for the whole page are declared in :root:
<style>
:root { --accent: darkorange; }
h3 { color: var(--accent); }
button { background: var(--accent); border: 0; padding: 6px 12px; }
</style>
<h3>Accent heading</h3>
<button>Accent button</button>Notes
:root is the same element as html, but with the specificity of a class. rem units are counted from the font size of this element.
See also
- var() — Inserts the value of a custom property (a CSS variable).
- color-scheme — Tells the browser which color schemes the page supports, so built-in controls and scrollbars match.
- px, em, rem, %, vw, vh — Units for lengths in CSS: absolute pixels and relative units.
Related recipes
In the tutorial
- CSS variables — Custom properties — how to declare a variable, read it with var(), override it and give a fallback value.