-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating
Responsive Web Design with HTML5 and CSS - Fourth Edition
By :
Let’s start with a simple use case: storing a font-family name that we can then reference more simply later in the stylesheet. 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 re-assign custom properties in different scopes is one of their superpowers.
The
:rootpseudo-class always references the top-most parent element in a document structure. In an HTML document, this would always be the HTML tag, but for an SVG document (we look at SVG in Chapter 10, SVG), it would reference a different element.
When we set a custom property, the syntax is that it should always...