Why give a CSS value a name?
Imagine a page where the same blue appears in links, buttons, and card borders. If you write the color separately in every rule, changing it means finding every copy. A CSS custom property gives that value a name, so you can update its definition instead. Custom properties are useful for colors, spacing, font sizes, and other values you expect to reuse or adjust.
To follow the examples, you need a text editor and a modern web browser that supports CSS custom properties. No library or build tool is required. You can add these rules to an existing stylesheet and open the page in your browser. The examples use standard CSS rather than features tied to a particular framework version.
Define a value and use it with var()
A custom property name starts with two hyphens. For example, :root { --brand-color: #2458a6; --card-space: 1rem; } defines two properties on the document’s root element. That makes the values available to elements throughout the page unless a more local definition takes precedence.
Use the var() function where you want the value: .card { border-left: 4px solid var(--brand-color); padding: var(--card-space); } .card a { color: var(--brand-color); } Now the border and link use the same named color. If you change --brand-color in the root rule, both uses can pick up the new value. The names are yours to choose; descriptive names such as --brand-color are easier to maintain than names tied to one specific shade.
A custom property does not apply a style by itself. Defining --brand-color does not turn every element blue. It supplies a value that a CSS declaration can request with var(). Also, the two hyphens are part of the name: --brand-color and brand-color are not interchangeable.
Change a value within one part of the page
Custom properties follow the CSS cascade and can be inherited. This means you can define a general value on :root and replace it for a particular component. For example: :root { --accent: #2458a6; } .notice { --accent: #8a3b12; } .button { background-color: var(--accent); } A button inside a notice can use the notice’s accent, while a button elsewhere can use the root accent.
This pattern is helpful when components share the same styling rules but need different colors or spacing. Rather than making a separate button rule for every context, you change the input value on a parent element. Scope changes deliberately: a value defined on .notice is available to its descendants, not automatically to unrelated elements elsewhere on the page.
If a result surprises you, check where the property is defined and which element uses var(). A definition on a child does not change the value used by its parent. Other CSS rules can also override a declaration such as background-color, even when that declaration contains var().
Add a fallback for an optional value
The second argument to var() provides a fallback when the named property has no usable value for that substitution. For example, .badge { background-color: var(--badge-color, #2458a6); } uses --badge-color when one is available and the blue value otherwise. A parent can set --badge-color for a particular group of badges without requiring every badge to have its own definition.
A fallback is useful for optional customization, but it is not a general repair for every CSS mistake. The replacement value must still make sense for the property receiving it. For instance, a spacing value cannot serve as a valid color. Keep fallbacks simple, and inspect the computed style in your browser’s developer tools if a declaration does not behave as expected.
Keep your variables easy to maintain
Start with a small set of values you actually reuse. Names such as --text-color, --accent-color, and --section-gap describe a value’s purpose. Avoid creating a custom property for every single declaration: that can make the stylesheet harder to read without reducing repetition. You can add more as patterns emerge.
When you change a shared value, look at each place that uses it. A color that works on a border may not provide readable text contrast when used as a background. Custom properties make changes faster, but they do not replace checking the result in the browser. A practical first exercise is to replace two repeated colors in an existing stylesheet with one custom property, change its definition, and confirm that both intended styles update.
