CSS from zero: a custom property is a named value

A color written in five rules is five edits when the color changes. A custom property stores the value once, under a name you invent. var(--ink) reads it. The type is still the type of the value. --ink holds a color because you stored a color there.

A custom property is a variable that inherits#

--ink is not a built-in property. You invent the name, the two dashes mark it as yours, and the value is stored on the element. Custom properties inherit, so a child can read --ink set on .price. var(--ink) substitutes that value when color is computed. The type is still checked at the use: if the stored value is not a color, the color declaration is invalid. var(--ink, #0b0b0c) is the fallback for a name that was never set. Name the property for the job, not for the hex.

1. --inkcolor#12342c
2. colorvar(--ink)#12342c

.price {
  --ink: #12342c;
  color: var(--ink);
}

The two dashes mark your name#

--ink is not a built-in property. The browser stores it on .price and on the elements inside .price, because custom properties inherit. color: var(--ink) sets the text color to that stored value. Change --ink and the color follows. A heading inside the price can use var(--ink) too.

var(--ink, #0b0b0c) supplies a fallback for the case where --ink was never set. Without a fallback, an unknown name makes the declaration invalid at the point of use. The property you set with var is then dropped. Name the custom property in a selector that definitely matches, usually the same class, or on :root when the whole page should see it.

The name should say what it is for#

--ink says how it is used. --12342c says nothing a teammate can reuse. Store the intent. A second name, --paper, can hold the background. The rule stays short, and the palette lives in the names. The next lesson lets one class style the elements inside it, so the label and the amount stay one object.