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
Which of the following is a valid custom property name?
Answer: --my-color
Valid custom property names must start with exactly two hyphens (`--`), followed by at least one character.
How can CSS custom properties be used to implement a dark mode theme?
Answer: Both A and B are valid approaches
You can redefine custom properties inside both a class/attribute selector for manual toggle and inside `prefers-color-scheme: dark` media query for automatic OS-level dark mode.
Can CSS custom properties store complex values like `1px solid red`?
Answer: Yes, custom properties can store any valid CSS token sequence
CSS custom properties can hold any sequence of tokens, including complex values like `1px solid red`, which can then be used with `var()` in a border declaration.
What is the scope of a CSS custom property declared inside a `.card` selector?
Answer: It is scoped to .card elements and their descendants
Custom properties declared on `.card` are available to `.card` itself and all of its descendant elements through CSS inheritance.
Which media query allows you to set custom property values specifically for users who prefer a dark color scheme?
Answer: @media (prefers-color-scheme: dark)
The `prefers-color-scheme: dark` media feature detects the user's OS dark mode preference, allowing you to redefine custom properties for dark themes.
What CSS property allows you to explicitly declare which color schemes an element supports, working alongside custom properties for theming?
Answer: color-scheme
The `color-scheme` property tells the browser which color schemes an element can render in, enabling system UI components like form inputs to match the chosen theme.