How can CSS custom properties be defined and reused across a stylesheet?

How can CSS custom properties be defined and reused across a stylesheet?

• A. Use with var(--name) to apply value
• B. Define custom properties with --name and use with var(--name)
• C. Define with $name
• D. Define inline styles only

Answer: (B)

CSS custom properties (CSS variables) are defined by naming them with a dash-dash prefix, like --name, inside a selector (often in :root for global scope). You reuse their values by calling the var() function with that exact name, var(--name). This combination lets you store a value once and reference it in many declarations, so a single change updates all places that use it. The value is part of the cascade, so you can override it in more specific selectors or within media queries, and the browser will apply the most appropriate value. Choosing a syntax with a dollar sign is from CSS preprocessors such as Sass, not standard CSS, so it won’t define reusable values in a plain CSS stylesheet. Inline styles can override a variable’s value, but they don’t establish reusable, stylesheet-wide definitions. Defining the custom property with --name and using it with var(--name) is the correct approach for defining and reusing values across a stylesheet.

CSS custom properties (CSS variables) are defined by naming them with a dash-dash prefix, like --name, inside a selector (often in :root for global scope). You reuse their values by calling the var() function with that exact name, var(--name). This combination lets you store a value once and reference it in many declarations, so a single change updates all places that use it. The value is part of the cascade, so you can override it in more specific selectors or within media queries, and the browser will apply the most appropriate value.

Choosing a syntax with a dollar sign is from CSS preprocessors such as Sass, not standard CSS, so it won’t define reusable values in a plain CSS stylesheet. Inline styles can override a variable’s value, but they don’t establish reusable, stylesheet-wide definitions. Defining the custom property with --name and using it with var(--name) is the correct approach for defining and reusing values across a stylesheet.