Working with custom properties

Let’s start with a simple use case, storing a font-family name that we can then reference more simply later in the style sheet. This is what a custom property definition looks like:

:root {
    --MainFont: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Here, we are using the :root pseudo-class to store the custom property in the document root. You don’t have to store them in the root, but storing them here means that any descendent element has access to them.

But custom properties respect the cascade. As we will see shortly, being able to reassign custom properties in different scopes is one of their superpowers.

The :root pseudo-class always references the topmost parent element in a document structure. In an HTML document, this would always be the HTML tag, but for an SVG document (we looked at SVG in Chapter 10, SVG), it would reference a different element.

When we set a custom property,...