Study CSS in Spanish: 129 Flashcards from the Box Model to Keyframe Animations

Deck RU7713, CSS: Modelo de Caja, Selectores y Media Queries, is the Spanish edition of Flip It's largest CSS deck: 129 cards whose fronts keep the real English property names — box-sizing, :nth-child(), @media — while every explanation is written in Spanish. That split is the point: CSS syntax is never translated, so you learn the concept in your own language without memorising vocabulary you would have to unlearn the moment you open the spec. Note that the title undersells the deck — past card 115 you are no longer in box-model territory but in transform, @keyframes and animation-*.

Tarjetas de ejemplo

Lo que cubren las 129 tarjetas

• Modelo de caja y flujo — contenido, padding, borde, margen ; box-sizing (content-box contra border-box), fusión de márgenes, orden del atajo arriba-derecha-abajo-izquierda ; display block, inline, inline-block, none frente a visibility: hidden ; position static, relative, absolute, fixed, sticky ; z-index, overflow, max-width, min-height.
• Flexbox y Grid — flex-direction, justify-content, align-items, flex-wrap, flex: 1, grid-template-columns, grid-template-rows, la unidad fr, gap, grid-column: span 2.
• Selectores — tipo, clase, ID, universal, [attr], [attr="value"] ; combinadores descendiente, hijo >, hermano adyacente +, hermano general ~ ; pseudoclases :hover, :active, :focus, :visited, :first-child, :nth-child(), :nth-of-type(), :not(), :is(), :has(), :where(), :empty, :checked, :disabled, :required, :valid / :invalid ; pseudoelementos ::before, ::after, ::first-letter, ::first-line, ::selection, ::placeholder.
• Cascada — especificidad, el orden en línea > IDs > clases > elementos, !important, el algoritmo de la cascada.
• Tipografía y unidades — font-size, font-family, font-weight, line-height, letter-spacing, text-align, text-transform, opacity, rgba(), border-radius, box-shadow ; em contra rem (1rem ≈ 16px), vh, vw.
• Media queries y movimiento — sintaxis @media, max-width contra min-width, combinación con and y comas, la etiqueta meta viewport, transition y sus funciones de temporización, @keyframes, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, transform translate/rotate/scale/skew, transform-origin, will-change.

Dos bloques, doce duplicados

The deck is two lists glued together. Cards 1 to 77 give short, bare answers; cards 78 to 129 re-explain the same ground with code examples. The overlap is not subtle: Universal selector, Class selector, ID selector, Descendant combinator, :hover, :nth-child(), ::before, ::after, the @media syntax and the transition shorthand each appear twice — about a dozen pairs. Suspend the first version of each: the second carries a:hover { color: red; } instead of a bare definition.

Tres tarjetas que corregir

Cards 110 and 111 have their labels swapped: min-width is the mobile-first pattern (style the small screen, then layer upwards) and max-width the desktop-first one. The deck says the opposite, and that confusion shapes every stylesheet you write — fix it now. Card 116 claims you cannot transition visibility; you can, and pairing it with opacity is the classic fade-out (since 2023 even display works, via transition-behavior: allow-discrete). And the pixel ranges on card 112 contradict the advice printed on the same card: choose breakpoints where your layout breaks, not where a device sits.

Dos consejos

1. Añade tú mismo las container queries. The deck stops at viewport-based @media, but @container — sizing a component against its parent rather than the window — is now the default tool for reusable components. Three cards of your own (container-type, container-name, @container (min-width: 400px)) close the deck's biggest gap.

2. Answer in Spanish, then say the property out loud in English. The twenty-odd pseudoclass cards are the hardest block, so review them by family — form (:checked, :disabled, :required, :valid), position (:first-child, :nth-child(), :nth-of-type()), relation (:is(), :where(), :not(), :has()) — instead of twenty near-identical cards in a row.

Dónde encontrarlo

Entra en flip-it.app y busca el código RU7713 en la biblioteca. La versión inglesa del mismo contenido está cubierta aquí: CSS Box Model, Selectors and Media Queries: A Flashcard Study Guide.