CSS Box Model, Selectors and Media Queries: A Flashcard Study Guide

CSS is easy to read and surprisingly hard to recall: you know position: absolute exists, but is it relative to the viewport or the nearest positioned ancestor? Which is stronger, an ID or ten classes? Does em follow the parent or the root? The CSS: Box Model, Selectors & Media Queries deck on Flip It (code UZ5568, 129 cards) turns those questions into flashcards so the answers arrive before you reach for MDN. Here is how to study it.

Sample cards

Everything the 129 cards cover

• Box model & layout — content/padding/border/margin, box-sizing, margin collapse, shorthand order (top-right-bottom-left), display block/inline/inline-block/none vs visibility: hidden, position static/relative/absolute/fixed/sticky, z-index, overflow hidden/scroll/auto, max-width, min-height.
• Flexbox & Grid — flex-direction, justify-content, align-items, flex-wrap, flex: 1, grid-template-columns/rows, the fr unit, gap, grid-column: span 2.
• Selectors — type, class, ID, universal, [attr], [attr="value"]; descendant, child >, adjacent +, general sibling ~ combinators; pseudo-classes :hover, :active, :focus, :visited, :first-child, :last-child, :nth-child(n), :nth-of-type(n), :not(), :is(), :has(), :where(), :empty, :checked, :disabled, :enabled, :required, :valid/:invalid; pseudo-elements ::before, ::after, ::first-letter, ::first-line, ::selection, ::placeholder.
• Cascade — specificity, !important, the cascade algorithm.
• Typography & color — font-size, font-family, font-weight, text-align, text-decoration, line-height, letter-spacing, text-transform, white-space: nowrap, rgba(), opacity, border shorthand, border-radius, box-shadow, cursor: pointer.
• Units — em, rem (1rem ≈ 16px), vh, vw.
• Media queries — syntax, max-width vs min-width, combining with and/commas, common breakpoints, the viewport meta tag.
• Motion — transition shorthand and timing functions, what can and cannot be transitioned, animation shorthand, @keyframes, iteration-count, direction, fill-mode, play-state, transform translate/rotate/scale/skew, transform-origin, will-change.

Two tips for this deck

Turn the combinator and pseudo-class cards into a scratch file. About 40 cards are selectors. Each time one comes up, type its example (h1 ~ p, li:nth-child(odd), div:has(img)) into a CodePen with three or four elements and watch what turns red. The deck's backs already contain runnable snippets, so the cost is thirty seconds per card, and a selector you've seen match is far stickier than one you've read.

Learn the "pairs" cards together. The deck is full of near-twins that cause real bugs: display: none vs visibility: hidden, em vs rem, max-width vs min-width media queries, :nth-child vs :nth-of-type, :is() vs :where(), transition vs animation. When one twin appears in review, say the other one's answer too. That converts a confusable pair into a single, stable contrast.

Where to find it

Sign in to Flip It and open UZ5568 — CSS: Box Model, Selectors & Media Queries. At roughly 20 new cards a day the deck takes a week to seed, after which daily reviews shrink to a few minutes — cheaper than looking up flex-basis for the fifth time.