CSS CSS Custom Properties & Variables

Question 1

How do you declare a CSS custom property (variable) named `--brand-color`?

Accepted Answer

--brand-color: #3498db;

Answer

CSS custom properties are declared with a double-dash prefix (e.g., `--brand-color: value;`) inside a selector block.

Question 2

Which CSS function is used to reference a custom property value?

Accepted Answer

var()

Answer

The `var()` function retrieves the value of a CSS custom property, e.g., `color: var(--brand-color);`.

Question 3

Where should you declare global CSS custom properties to make them available to all elements?

Accepted Answer

:root

Answer

Declaring custom properties on `:root` places them at the top of the document tree, making them accessible globally throughout the stylesheet.

Question 4

What does the second argument in `var(--color, blue)` represent?

Accepted Answer

A fallback value if --color is not defined

Answer

The second argument to `var()` is a fallback value that is used when the specified custom property is undefined or invalid.

Question 5

Are CSS custom properties (variables) case-sensitive?

Accepted Answer

Yes, --Color and --color are different properties

Answer

CSS custom properties are case-sensitive, so `--Color` and `--color` are treated as two distinct properties.

CSS Language Practice Test