CSS variable
A CSS custom property is an author-defined property, typically named with a leading double hyphen, whose value can be inherited and referenced in other declarations.
Web Components in Action
A CSS variable is a custom CSS property whose value can be defined and substituted throughout a stylesheet or component style.
- How it is used
- Uses custom properties to theme encapsulated Web Components and keep styling choices consistent across an application.
- How deep it goes
- Works through declarations, `var()` references, shadow-boundary use, and component-wide theme changes; does not detail CSS variable resolution internals.
- Examples
- Shows nested text colors, a shadow-styled component, a root-level green theme, and shared values in slider and color-picker styles.
- What you can do after
- Operate/configure it to change shared component styling through named CSS values and add a ponyfill when supporting IE11.
CSS in Depth, Second Edition
A CSS custom property is an author-defined CSS property whose name begins with two hyphens and whose value can be substituted with the var() function.
- How it is used
- Reuses shared CSS values while allowing colors, spacing, and component styles to change with their context.
- How deep it goes
- Works through declaration, var() fallbacks, cascading overrides, palette organization, and typed registration for transitions.
- Examples
- Uses a shared font stack, light and dark panels, a breakpoint-dependent gap, and a hue-transitioning button.
- What you can do after
- Build it from scratch to centralize values, adapt components to their surroundings, and register a property for transitions.
Read how CSS in Depth, Second Edition explains CSS variable →
Tiny CSS Projects
A CSS custom property is an author-defined property whose value can be stored and reused in CSS through the var() function.
- How it is used
- Reuses profile-card styling values and form theme colors across CSS declarations.
- How deep it goes
- Explains declaration and `var()` syntax, descendant access, value types, and a behavioral contrast with Sass; does not explore browser internals.
- Examples
- Shows a profile-card palette and image size, a form’s shared error color, and contrasting CSS and Sass variable assignments.
- What you can do after
- Build it from scratch by defining custom properties in a CSS rule and reusing them with `var()` in styling declarations.
Math for Web Design
A CSS variable, also called a custom property, is a CSS property defined with a double-hyphen name whose value can be reused through var().
- How it is used
- Centralizes reusable design values for maintainable calculations, typography, and color themes.
- How deep it goes
- Defines custom properties and demonstrates unit rules, fallbacks, calculated typography, and modular scales.
- Examples
- Uses global color, spacing, and font variables; a fallback heading; calculated article metrics; and a golden-ratio type scale.
- What you can do after
- Apply it via CSS custom properties and calc() to update related layout and typography values from shared inputs.
Related concepts
- @propertyconfigured by · The CSS @property at-rule registers a custom property by defining its syntax, inheritance behavior, and initial value.
- inheritanceuses · Inheritance is a mechanism by which a child type or element receives properties, values, or behavior from a parent, subject to system rules and possible overrides.
- Shadow DOMuses · Shadow DOM is a web platform mechanism for attaching a DOM subtree to an element while encapsulating its structure and styles from the surrounding document.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.