Using Custom Properties Locally

Custom properties can also be scoped to specific elements by defining them in a selector other than :root. This makes the variable accessible only within that scope.

section {
    --section-color: #f2972e;
}
section h1 {
    color: var(--section-color);
}
section nav ul li a {
    background-color: var(--section-color);
}

In this case:

• --section-color is only...