Dan Levy

Quiz: Kennst du die CSS‑Grundlagen? (2025)

Bist du front‑end genug?

Quiz: Kennst du CSS?

1. 

Aufwärmen: Schriften

Wähle den EINZIGEN UNGÜLTIGEN ❌ Wert für font-size:

10cx ist falsch, weil cx keine echte CSS‑Einheit ist. (Zumindest zum Zeitpunkt des Schreibens.)

Beliebte Einheiten sind die bekannten px, rem, em.

Neuere Einheiten sind nützlich für dynamische, responsive Layouts.

  • ch – Breite des Zeichens 0
  • vmin – minimale Viewport‑Größe
  • vmax – maximale Viewport‑Größe
  • vh – Viewport‑Höhe
  • vw – Viewport‑Breite

Es gibt außerdem mehrere Einheiten, die es schon immer gab, aber selten verwendet werden, wie cm für Zentimeter, mm, in für Zoll, pt für Punkte

2. 

Aufwärmen: Farben

Kannst du den EINEN gültigen 👍 Hex-Code finden?

Hex-Codes können in CSS verwendet werden, um Farben darzustellen. Sie beginnen mit einem # und müssen 3, 4, 6 oder 8 hexadezimale Ziffern enthalten.

Der 3‑Zeichen‑Hex‑Code ist eine Kurzschreibweise für den 6‑Zeichen‑Code, bei dem jedes Zeichen verdoppelt wird. Der 4‑Zeichen‑Code enthält einen Alpha‑Kanal für Transparenz.

Zum Beispiel ist #ABC dasselbe wie #AABBCC und #ABCD dasselbe wie #AABBCCDD. Um mehr über den Umgang mit Hex‑Werten zu erfahren, sieh dir mein JavaScript‑Zahlen‑Quiz an.

3. 

Aufwärmen: Einheiten

Welche dieser Einheiten ist NICHT eine gültige ❌ CSS‑Einheit?

Neue Einheiten wie ch, vmin, vmax, vh, vw sind ziemlich nützlich für dynamische/reaktive Layouts.

Es gibt außerdem einige Einheiten, die es schon immer gab, aber selten verwendet werden, wie cm für Zentimeter, mm, in für Zoll, pt für Punkte, pc, cap für die Größe von Großbuchstaben und ex, das der Höhe des Buchstabens x entspricht.

Beliebte Einheiten sind das bekannte px für Pixel, em relativ zur Schriftgröße des Elements, und rem ist heimlich eine Hommage an die vergessene 90er‑Band R.E.M. (okay, nicht wirklich, es ist einfach eine relative em‑Einheit, die das Wurzelelement referenziert).

4. 

Selektor: Grundlagen

Welcher Selektor passt am besten zum folgenden HTML?

<a id="home" name="home" href="/home">Home</a>

Die richtige Antwort ist a#home[name='home'], da sie sowohl das id‑ als auch das name‑Attribut trifft. In HTML im Standards-Modus unterscheiden ID-Werte Groß- und Kleinschreibung, daher passt #Home nicht. Ein Leerzeichen ist ein Nachfahrenkombinator: a [id='home'] sucht innerhalb des Links, nicht den Link selbst.

Der :contains()‑Selektor ist kein standardmäßiger CSS‑Selektor, ist aber in einigen JS‑Bibliotheken verfügbar.

5. 

Selektor: Grundlagen

Welcher Selektor passt zu dem folgenden HTML‑Button?

<button onclick="openModal()">Contact</button>

Die richtige Antwort ist button[onclick], die das Vorhandensein des Attributs onclick anspricht.

Hinweis: :link greift nur unverbesuchte href‑Links, ::click ist kein gültiges Pseudo‑Element, und :focus greift nur das fokussierte Element an.

6. 

Selektor: Grundlagen

Welcher dieser Selektoren ist ungültig?

Der Selektor c > > d {} ist ungültig, weil der Kind‑Kombinator ohne Selektor zwischen den beiden >‑Zeichen wiederholt wird.

Die anderen Selektoren sind gültig. Ein Typ-Selektor wie c {} ist syntaktisch gültiges CSS, selbst wenn c kein Standard‑HTML‑Element ist.

7. 

Welcher Selektor trifft den letzten Link im folgenden HTML?

<nav>
  <a name="home" href="/home">Home</a>
  <a name="login" href="/login">Login</a>
  <a name="help" href="/help">Help</a>
</nav>

Der korrekte Selektor ist a:last-child, der das letzte <a> auswählt, wenn es zugleich das letzte Kind seines Eltern‑Elements ist. nav:nth-child(3) würde ein <nav>‑Element treffen, das das dritte Kind seines eigenen Eltern‑Elements ist.

8. 

Selektor: Spezifität

Welcher Selektor hat Vorrang?

Der a#quote‑Selektor hat Vorrang, weil die ID eine höhere Spezifität besitzt als tag‑ oder klassenbasierte Selektoren.

9. 

Layouts: Zentrieren

Welche Deklaration zentriert Inline-Text horizontal innerhalb seines umgebenden Blocks?

text-align: center; zentriert Text innerhalb eines Blockelements. Eine CSS-Eigenschaft align gibt es nicht. margin: 0 auto; kann einen Block mit begrenzter Breite zentrieren, aber nicht dessen Text.

align-content richtet Inhalte in unterstützten Layouts wie Grid und mehrzeiligem Flexbox aus; es ist keine Eigenschaft zur Textausrichtung. text-content ist keine gültige CSS-Eigenschaft.

10. 

Layouts: Zentrieren

Wie zentrierst du Inhalte vertikal innerhalb eines Blockcontainers im modernen Flow‑Layout?

Die Verwendung von align-content ist der moderne Weg, um den Inhalt eines Blockcontainers vertikal im Flow‑Layout zu zentrieren.

align-items und justify-content werden für Flexbox‑ und Grid‑Layouts verwendet, nicht jedoch für Flow.

Sowohl margin: 0 auto; als auch margin: auto; zentrieren ein Blockelement horizontal, jedoch nicht vertikal.

11. 

Layouts: Einheiten

Wie groß ist die Pixelgröße des Textes des <a>‑Links im folgenden HTML?

<body style="font-size: 40px !important;">
  <nav style="font-size: 50%;">
    <a style="font-size: 25%;">HOME</a>
  </nav>
</body>

Die font-size für <a> wird zu 5 px berechnet: 40 px (body) * 50 % (nav) = 20 px, dann 20 px * 25 % = 5 px.

12. 

Einheiten: REM

Wie groß wird die Pixelgröße von 1.2rem für den “HOME”‑Link im folgenden HTML?

<html style="font-size: 10px;">
  <body style="font-size: 20px;">
    <a style="font-size: 1.2rem;">HOME</a>
  </body>
</html>

1.2rem entspricht 12 px, weil rem‑Einheiten die Schriftgröße des Wurzelelements <html> referenzieren, das hier auf 10 px gesetzt ist.

13. 

Einheiten: EM

Ähnlich wie bei der vorherigen Frage, welche Pixelgröße hat 1.2em für den „HOME“-Link im folgenden HTML?

<html style="font-size: 10px;">
  <body style="font-size: 20px;">
    <a style="font-size: 1.2em;">HOME</a>
  </body>
</html>

1.2em entspricht 24px, weil em‑Einheiten die vererbte Schriftgröße referenzieren, die hier auf 20px gesetzt ist.

14. 

Selektor: Spezifität

Welcher Selektor hat die niedrigste Spezifität?

:where(.card) .title hat die niedrigste Spezifität. Die Pseudoklasse :where() und alles darin trägt 0-0-0 bei, sodass nur .title zählt. :is(.card) .title behält die Spezifität von .card bei, .card .title hat zwei Klassen, und #card .title enthält eine ID.

Loading comments...