· 3 min read

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

Learn CSS in German with 129 flashcards: Box-Modell, Flexbox, Grid, Selektoren, Media Queries and animations, plus the duplicate and wrong cards to fix first.

Flat illustration of layered boxes for the CSS box model beside a colorful grid of blocks

Studying. But it's also a video game. 🎮

Flashcards, quizzes and games that make you actually remember.

Start playing — it's free

Posted by

Deck KP4884 – CSS: Box-Modell, Selektoren & Media Queries is the German edition of our CSS deck: 129 cards with English property names on the front and German explanations on the back. That combination is exactly how German-speaking developers work day to day — code in English, thinking in German — so it's a great way to learn CSS without translating every concept twice.

Study this deck: CSS: Box-Modell, Selektoren & Media Queries

1 / 10
Question

CSS

Knew itLearning

Tap the card for the answer · swipe right if you knew it, left if not

Sample cards (real German backs)

FrontBack
CSS box modelDas Layout-Modell, das jedes Element als rechteckigen Kasten aus Inhalt, Innenabstand (Padding), Rahmen (Border) und Außenabstand (Margin) beschreibt
Box-sizing: border-boxSorgt dafür, dass width und height Padding und Border einschließen
Margin collapseVertikale Außenabstände benachbarter Block-Elemente vereinen sich zu einem (der größere der beiden)
Position: stickyWechselt je nach Scroll-Position zwischen relative und fixed
Flex: 1Kurzform für flex-grow: 1, flex-shrink: 1, flex-basis: 0%
:where()Wie :is(), aber mit Spezifität null
:has(selector)Eltern-Selektor (relationale Pseudoklasse)
Animation-fill-modenone, forwards (Endzustand beibehalten), backwards, both

Vokabular & Konzepte im Deck: Innenabstand, Außenabstand, Rahmen, Dokumentfluss, Stapelreihenfolge (z-index), Hauptachse/Querachse, fraktionale Einheit (fr), Kombinatoren (Nachfahren, Kind, Nachbar, Geschwister), Spezifität, Kaskade, :nth-of-type, :not, :is, :focus, :checked, :valid/:invalid, ::first-letter, ::selection, ::placeholder, em vs rem, vh/vw, rgba(), Viewport-Meta-Tag, @keyframes, transform (translate, rotate, scale, skew), transform-origin, will-change.

Ein Deck, zwei Blöcke

The deck is two lists stitched together. Cards 1–77 are a compact reference (box model, display, position, Flexbox, Grid, typography); cards 78–129 restart with example-rich versions of the same topics plus forms, animations and transforms. That creates about ten near-duplicates at the seam — 33/81, 34/79, 35/80, 36/84, 40/85, 41/91, 42/103, 43/104, 75/109, 77/115. Keep the second version each time: it carries the code example (li:last-child, .clearfix::after), which is what you'll actually type.

Karten, die du korrigieren solltest

  • Cards 110 and 111 are swapped. @media (min-width: 768px) is the mobile-first pattern (base styles for small screens, then widen); max-width queries are desktop-first. Rewrite both backs: „min-width = Mobile-First“, „max-width = Desktop-First“.
  • Card 116 says visibility cannot be animated. It can — it switches discretely. And with transition-behavior: allow-discrete (supported in current browsers), even display can take part in a transition.
  • Card 112 lists device breakpoints (480/768/1024 px) while saying „an den Inhalt anpassen“. Trust the second half and add a card for container queries (@container), which the deck never mentions.

A tip for German speakers

Watch the terminology: Rahmen in the deck means border, not a frame or container, and Eigenschaft is a CSS property. When you review, say the English keyword out loud before reading the German back — you'll recognise it instantly in DevTools and in English documentation.

Prefer to study in English? Our original guide covers the same material: CSS box model, selectors and media queries — a flashcard study guide.

Search KP4884 in the library on Flip It and merge the duplicates before your first session.

Ready to learn faster? 🚀

Join FLIP IT for free and turn studying into a game.

Create my free account