Abakada: Back to Basics > Language References > CSS Properties > Pseudo-Classes > root Pseudo-class
Represents the root element of a document.
:root { property: value; }
| property |
Any valid CSS property. |
| value |
Any of the range of values available to the corresponding property. |
The :root pseudo-class applies styles to the root element of a tree representing the document.
In HTML, :root represents the <html> element and is identical to the selector html.
The syntax for using the :root pseudo-class is straightforward. Nothing precedes the pseudo-class.
For example, to change the background color of the entire page:
:root { background-color: ghostwhite }
:root can be helpful for declaring styles that will apply to the entire page.
:root {
font: 12pt verdana, arial, sans-serif;
margin-left: 20px; margin-right: 20px;
background: ghostwhite;
}
The following demonstrates use of the :root pseudo-class in an embedded stylesheet to set styles for the entire page.
Show me
html