Quiz: Kennst du die CSS‑Grundlagen? (2025)
Bist du front‑end genug?
Quiz: Kennst du CSS?
- Modernes CSS? 🤔
- Soll CSS auf deinem Lebenslauf stehen??? 🚀
- Multiple‑Choice. 🤖 … Wie schwer kann das schon sein, oder?
Wähle das EINEN UNGÜLTIGEN ❌ 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 Zeichens0vmin– minimale Viewport‑Größevmax– maximale Viewport‑Größevh– Viewport‑Höhevw– 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
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.
Welches 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).
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. CSS‑Selektoren sind case‑sensitive, daher funktioniert #Home nicht, und Leerzeichen bedeuten Kind‑Elemente, was hier nicht zutrifft.
Der :contains()‑Selektor ist kein standardmäßiger CSS‑Selektor, ist aber in einigen JS‑Bibliotheken verfügbar.
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.
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.
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.
Welcher Selektor hat Vorrang?
Der a#quote‑Selektor hat Vorrang, weil die ID eine höhere Spezifität besitzt als tag‑ oder klassenbasierte Selektoren.
Wie kannst du “shit” in einer Box zentrieren?
Die Verwendung von text-align: center; ist der richtige Weg, um Text in einem Block-Element zu zentrieren. Die align‑Eigenschaften werden für Flexbox‑Layouts verwendet, und margin: 0 auto; dient dazu, Block-Elemente horizontal zu zentrieren.
Die align-content‑Eigenschaft wird für Grid‑Layouts genutzt, und text-content ist keine gültige CSS‑Eigenschaft.
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.
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.
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.
Ä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.
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.