Learn CSS in French: Box Model, Selectors and Media Queries in 129 Flashcards

Learning CSS in your own language removes one translation step from an already dense subject. Flip It deck LC8319, CSS : modèle de boîte, sélecteurs et media queries, is the French edition of the platform's largest CSS deck: 129 cards whose fronts keep the real property names — box-sizing, :nth-child(), @media — while every explanation is written in French. Property names are never translated, so nothing you memorise here has to be unlearned when you read the spec or an English codebase.

Sample cards

Ce que couvrent les 129 cartes

• Modèle de boîte et mise en page — contenu, padding, bordure, marge ; box-sizing (content-box par défaut), fusion des marges, ordre du raccourci haut-droite-bas-gauche ; display block, inline, inline-block, none face à visibility: hidden ; position static, relative, absolute, fixed, sticky ; z-index, overflow hidden/scroll/auto, max-width, min-height.
• Flexbox et Grid — flex-direction, justify-content, align-items, flex-wrap, flex: 1, grid-template-columns, grid-template-rows, l'unité fr, gap, grid-column: span 2.
• Sélecteurs — type, classe, ID, universel, [attr], [attr="value"] ; combinateurs descendant, enfant >, frère adjacent +, frère général ~ ; pseudo-classes :hover, :active, :focus, :visited, :first-child, :last-child, :nth-child(), :nth-of-type(), :not(), :is(), :has(), :where(), :empty, :checked, :disabled, :required, :valid / :invalid ; pseudo-éléments ::before, ::after, ::first-letter, ::first-line, ::selection, ::placeholder.
• Cascade — spécificité, !important, algorithme de la cascade.
• Typographie, couleurs, unités — font-size, font-family, font-weight, text-align, text-decoration, line-height, letter-spacing, text-transform, white-space: nowrap, rgba(), opacity, border, border-radius, box-shadow, cursor: pointer ; em, rem (1rem ≈ 16px), vh, vw.
• Media queries — syntaxe @media, max-width contre min-width, combinaison avec and et les virgules, points de rupture courants (mobile 0-480px, tablette 481-768px, bureau 769-1024px, grand écran 1025px+), balise meta viewport.
• Transitions et animations — raccourci transition, fonctions de temporisation, propriétés animables, @keyframes, animation-iteration-count, direction, fill-mode, play-state, transform translate/rotate/scale/skew, transform-origin, will-change.

Two tips for this deck

1. Answer in French, then say the property out loud in English. The deck is bilingual by construction: French explanation, English property name. Forcing both directions in one pass means you can discuss a layout bug with a French colleague and search Stack Overflow for margin collapse without a pause.

2. Group the twenty-odd pseudo-class cards into form, position and relation. :checked, :disabled, :required, :valid belong to forms; :first-child, :last-child, :nth-child() to position; :is(), :where(), :not(), :has() to relation and specificity. Reviewing by family beats reviewing 20 near-identical cards in a row.

Où le trouver

Connectez-vous sur flip-it.app et cherchez le code LC8319 dans la bibliothèque. La version anglaise du même contenu est couverte ici : CSS Box Model, Selectors and Media Queries: A Flashcard Study Guide.