Lesson 2 of 8
Custom properties
- 13 min
- 4 checks
- 3 hints
- Go to task
Goal
One value in one place
01
Explanation
A custom property, often called a CSS variable, is a property whose name starts with two hyphens, and you read its value with the var() function.
You define one like this: :root { --brand: #1d4ed8 }, and use it like this: color: var(--brand).
What sets them apart from Sass variables is that they work in the browser itself and are inherited by nested elements. Redefine one on any element and its value changes for everything inside that element, which is why dark mode takes two rules instead of a whole second stylesheet.
02
Your task
Define --brand on :root and use it in .btn, then redefine it inside .alt so the second button shows a different color without writing any new color rule.
Checks
4 checks- The --brand variable is defined
- The button gets its background from var()
- The .alt selector redefines the variable
- The two buttons show different colors