The root element is the top-level element in the document tree. In an HTML document, the <html> element contains <head> and <body>, making it the ancestor of every other element. CSS can target it with :root, which has the same reach as html but class-level specificity. section 2.2.2
Use the root element as a stable reference point for page-wide values and behavior:
- Set a page-wide default font size on :root; descendants inherit it unless a more specific rule changes it. section 2.3.1
- Use rem units when a measurement should remain relative to the root font size, regardless of nesting. section 2.2.2
- Define custom properties on :root for values shared across the page, then override them in a descendant context when needed. section 2.6.1
A root-relative panel
A panel can inherit the page’s root font size while using different units for different jobs: em for padding and corner radius, rem for the heading, and pixels for the border. With :root set to 0.875em, the whole page receives a 14px default based on the browser’s inherited value, while the heading remains predictably sized relative to the root. section 2.3.1
Listing 2.8 Specifying font size using rems
:root { #1
font-size: 1em; #2
}
ul {
font-size: 0.8rem;
}
This listing shows :root establishing the root font size and a nested list using rem so its text size remains constant at every nesting level. section 2.2.2
