Справочник HTML & CSS

:root

Срабатывает у корневого элемента документа — на веб-странице это `<html>`.

Синтаксис

:root { … }

Примеры

Пользовательские свойства для всей страницы объявляют в :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>

Примечания

:root — тот же элемент, что и html, но со специфичностью класса. Единицы rem считаются от размера шрифта этого элемента.

См. также

var() — Подставляет значение пользовательского свойства (переменной CSS).
color-scheme — Сообщает браузеру, какие цветовые схемы поддерживает страница, чтобы встроенные элементы и полосы прокрутки им соответствовали.
px, em, rem, %, vw, vh — Единицы длины в CSS: абсолютные пиксели и относительные единицы.

Вопросы и ответы по теме

Как использовать CSS-переменные для цветов

В учебнике

CSS-переменные — Пользовательские свойства — как объявить переменную, прочитать её через var(), переопределить и задать запасное значение.

Спасибо, что читаете!