Practice Test GeeksCSS Language Practice Test
← All CSS Flashcard Decks

CSS Custom Properties & Variables Flashcards

6 cards from real CSS practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.

Read the first 6 CSS Custom Properties & Variables flashcards as text

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

    Answer: --brand-color: #3498db;

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

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

    Answer: var()

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

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

    Answer: :root

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

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

    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.

  5. Are CSS custom properties (variables) case-sensitive?

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

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

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

    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.