CSS essentials check

Test the cascade, box model, sizing, Flexbox, Grid, typography, themes, responsiveness, container queries, and interaction states.

Question 1 of 12Before adding a more specific selector to fix a styling conflict, what should you do first?

Inspect which declaration is currently winning and whyAdd !important immediatelyRepeat the class name several times

Question 2 of 12What does box-sizing: border-box change?

Declared width and height include padding and borderMargins are removed from the elementOverflow becomes impossible

Question 3 of 12Which display mode is appropriate when child elements need coordinated one-dimensional alignment?

display: flexdisplay: inlinedisplay: none

Question 4 of 12Which CSS function is useful for a value that should grow fluidly but stay between a minimum and maximum?

clamp()url()attr()

Question 5 of 12What does flex: 1 commonly allow a flex item to do?

Grow and shrink to use available spaceBecome fixed to the viewportCreate a new CSS Grid automatically

Question 6 of 12Which layout primitive best coordinates rows and columns together?

CSS GridFlexboxInline layout

Question 7 of 12Which positioning mode is a good choice for a sidebar that should remain visible as its container scrolls past?

position: stickyposition: staticdisplay: none

Question 8 of 12Which unit is especially useful for limiting text to a readable line length based on character width?

chdegms

Question 9 of 12Why are semantic custom properties useful for themes?

Components can consume purpose-based tokens while themes change the token valuesThey disable the CSS cascadeThey compile CSS into JavaScript

Question 10 of 12What is a strong default strategy for responsive CSS?

Start with a layout that works in narrow space, then add complexity when content requires itDesign only for one desktop widthCreate a separate stylesheet for every known phone model

Question 11 of 12What does a container query primarily respond to?

The size of a containing elementThe user's browser historyThe user's network speed

Question 12 of 12Which pair supports accessible interaction styling?

:focus-visible and prefers-reduced-motionoutline: none with no replacementA hover style with no keyboard focus state

Choose one answer for every question, then check your answers.