Modern CSS — Chapter Quiz

Question 1

1

How do you read a custom property --brand?

A$brandBvar(--brand)C@brandD--brand

var(--name) reads. The second argument is a fallback — var(--brand, blue).

Question 2

2

Custom properties can be updated at runtime from JavaScript.

TTrueFFalse

element.style.setProperty("--brand", "tomato") updates it. Every rule using var(--brand) re-evaluates.

Question 3

3

What does clamp(1rem, 2vw, 1.5rem) evaluate to on a 768px wide viewport?

A1remB1.5remCWhichever is in range — about 15.36px ≈ 0.96rem clamped to 1remD0.96rem (no clamping)

2vw of 768px is 15.36px ≈ 0.96rem, below the 1rem min — so it's clamped to the min, 1rem.

Question 4

4

Which selector matches a <form> that contains an element with class error?

Aform.errorBform > .errorCform:has(.error)Dform .error

:has() matches the parent based on what's inside. The others match the descendant, not the form.

Question 5

5

:where() and :is() match the same elements, but they differ in specificity.

TTrueFFalse

:is() takes the highest specificity inside its argument. :where() adds zero specificity — useful for low-priority defaults.

Question 6

6

To detect the user's preferred color scheme, use…

A@media (prefers-color-scheme: dark)B@media (theme: dark)C@media (color: dark)DJS only — CSS can't see it

prefers-color-scheme exposes the user's OS preference. Combine with custom property overrides for a theme swap.

Question 7

7

What does @layer reset, base, components, utilities; do?

AImports four CSS filesBDeclares four cascade layers in priority order — later winsCDefines responsive breakpointsDSets up a 4-column layout

Cascade layers group rules by priority. Layers listed later beat earlier ones, regardless of specificity.

Question 8

8

To replace margin-left with a writing-direction-aware property, use margin-inline-______.

margin-inline-start is the logical equivalent of margin-left (in LTR; flips to right in RTL). Logical properties make i18n much easier.

Test what you learned.