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

$brand-color: #3498db;

Answer

@brand-color: #3498db;

Answer

var-brand-color: #3498db;

Question 2

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

Accepted Answer

var()

Answer

ref()

Answer

get()

Answer

use()

Question 3

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

Accepted Answer

:root

Answer

body

Answer

html

Answer

*

Question 4

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

Accepted Answer

A fallback value if --color is not defined

Answer

A secondary variable to cascade

Answer

The default color of the browser

Answer

An override for inherited values

Question 5

Are CSS custom properties (variables) case-sensitive?

Accepted Answer

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

Answer

No, they are case-insensitive like other CSS properties

Answer

Only in some browsers

Answer

Only when declared inside :root

Question 6

Can a CSS custom property be overridden for a specific element by redeclaring it in that element's selector?

Accepted Answer

Yes, the new declaration scopes the variable to that element and its descendants

Answer

No, custom properties declared on :root are immutable

Answer

Only if the element has the !important flag

Answer

Only inline styles can override custom properties