CSS CSS Custom Properties & Variables 1 — Questions and Answers
Question 1: How do you declare a CSS custom property (variable) named `--brand-color`?
- --brand-color: #3498db; (Correct answer)
- $brand-color: #3498db;
- @brand-color: #3498db;
- var-brand-color: #3498db;
Correct answer: --brand-color: #3498db;
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?
- var() (Correct answer)
- ref()
- get()
- use()
Correct answer: var()
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?
- :root (Correct answer)
- body
- html
- *
Correct answer: :root
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?
- A fallback value if --color is not defined (Correct answer)
- A secondary variable to cascade
- The default color of the browser
- An override for inherited values
Correct answer: A fallback value if --color is not defined
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?
- Yes, --Color and --color are different properties (Correct answer)
- No, they are case-insensitive like other CSS properties
- Only in some browsers
- Only when declared inside :root
Correct answer: Yes, --Color and --color are different properties
CSS custom properties are case-sensitive, so `--Color` and `--color` are treated as two distinct properties.
Question 6: Can a CSS custom property be overridden for a specific element by redeclaring it in that element's selector?
- Yes, the new declaration scopes the variable to that element and its descendants (Correct answer)
- No, custom properties declared on :root are immutable
- Only if the element has the !important flag
- Only inline styles can override custom properties
Correct answer: Yes, the new declaration scopes the variable to that element and its descendants
Custom properties follow the cascade — redeclaring a variable inside a more specific selector scopes the new value to that element and its children.
CSS CSS Custom Properties & Variables 1
How do you declare a CSS custom property (variable) named `--brand-color`?