CSS Master Code Examples: Chapter 3 Custom Properties

Custom properties and the cascade

The cascade also applies to custom properties. We've set the value of --primary-color: to hsl(190, 95%, 51%); Turquoise blue as part of the :root rule set, and redefined it as hsl(280, 95%, 51%) Hot purple it in the body rule set, which follows :root.

Use your browser's developer tools to toggle the --primary-color: hsl(10, 95%, 51%); rule on and off.

Primary color swatch