The StyleWorksCSS { Referenz · Labor · Übungen }

CSS Referenz { Cascading Style Sheets: alle Eigenschaften, Tutorials, interaktiv. Nicht nur lesen. Verändern. }

Die deutsche CSS Referenz zu allen 133 Eigenschaften von CSS 1 und CSS 2.1 – jede mit einem eigenen Labor, in dem sich der Wert ziehen, das Rendering beobachten und der berechnete Wert ablesen lässt.

Dazu Grundlagen zu Kaskade, Vererbung und Spezifität, Tutorials zu Layout und Navigation, Übungen mit Prüfung des Ergebnisses und ein Quiz. Alle Beispiele sind interaktiv und laufen direkt auf der Seite.

Eigenschaft nachschlagenZum Visual Lab
stylesheet.css · margin
.probe {
  margin: 24px;
}
Dies ist der 1. Absatz. Er steht in einer Box, deren Stil die Regel links oben bestimmt.
berechneter Wertmargin: 24px
Box-Breite–
Box-Höhe–
§1REFERENZ

Cascading Style Sheets, alle Eigenschaften alphabetisch – jede mit Labor

Kurzdarstellung wesentlicher Features aller CSS-Eigenschaften: mögliche Werte, Ausgangswert, Vererbung, Anwendbarkeit, Bezugswert für Prozentangaben und Mediengruppe. Die Schnellreferenz stellt sie tabellarisch nebeneinander, die Vollreferenz erläutert sie einzeln und mit den Neuerungen aus CSS 2.1.

Die CSS Referenz führt Selektoren, Pseudoklassen, Pseudoelemente und At-Regeln in eigenen Abschnitten in der Vollreferenz; ihr Labor zeigt interaktiv, welche Elemente eines Dokuments getroffen werden und mit welcher Spezifität.

§2VISUAL LAB

Welche Regel gewinnt? Kaskade, Spezifität und Box-Modell, interaktiv sichtbar gemacht

Vier Regeln zielen auf dasselbe Element. Der Kaskaden-Visualizer sortiert sie nach Herkunft, Spezifität und Reihenfolge und zeigt, warum genau eine übrig bleibt. Das Spezifitäts-Duell rechnet zwei Selektoren gegeneinander, das Box-Modell in Schichten beantwortet die Frage „Warum ist diese Box 342px breit?“, und der normale Fluss zeigt, was Block- und Inline-Elemente ohne jede Positionierung tun.

p { color: black; }0,0,0,1Autor
.text p { color: gray; }0,0,1,1Autor
#main .text p { color: #7A2FB0; }0,1,1,1Autor · gewinnt
p { color: navy; }0,0,0,1Browser
§3LERNEN

CSS Grundlagen und Tutorials – die Zusammenhänge hinter den Eigenschaften

CSS besteht nicht nur aus Eigenschaften, sondern erhält seine Möglichkeiten erst durch die Zusammenhänge und Interaktionen zwischen ihnen. Das Kapitel Grundlegendes erläutert die Konzepte und Definitionen, die Tutorials zeigen Anwendungen Schritt für Schritt.

  1. CSS einbinden – inline, style-Element, Stylesheet14 min
  2. Die KaskadeLabor
  3. Vererbung im DokumentbaumLabor
  4. Spezifität berechnenLabor
  5. Das Box-ModellLabor
  6. Farben und Farbwerte8 min
  7. Ein div zentrieren – horizontal und vertikalTutorial
  8. Navigation aus ListenTutorial · 6 Teile

Für wen ist diese Website?

Sie ist als technischer Ratgeber zum Thema CSS konzipiert und wendet sich an

  • alle, die nicht einfach nur fertige Losungen kopieren, sondern wissen wollen, wie sie funktionieren um z.B. auf Basis von CSS eine responsive Tabelle wie diesen Vergleich der besten Paysafe Online-Casinos zu erstellen;
  • alle, die noch skeptisch sind gegenüber CSS und sich fragen, worin der Vorteil gegenüber der überkommenen Arbeitsweise liegt;
  • alle, die die soliden theoretischen Grundlagen des CSS kennen lernen möchten;
  • alle, die eine Quelle für praktische Anwendungsmöglichkeiten, Lösungen und Ideen für den täglichen Gebrauch suchen;
  • alle, denen es letztendlich zu zeitraubend ist, bei jedem kleinen Problem die recht akademisch gehaltene Originalversion der Spezifikation zu lesen und zu interpretieren;
  • alle, die z. B. Layouts und Oberflachen von modernen Web-Apps oder Online-Casino-Apps entwickeln und dafur CSS optimal einsetzen mochten.
§4ÜBEN

CSS Übungen mit Prüfung – Ziel, Ergebnis, Hinweis, Lösung

Jede Übung zeigt ein Ziel und das Ergebnis des eigenen Codes nebeneinander. Der Prüfer liest den berechneten Wert aus dem Rendering, nicht aus dem Quelltext: Wer den Abstand zwischen zwei Boxen auf 24 Pixel bringen soll, kann das mit margin, mit padding oder mit border lösen – gezählt wird das Ergebnis. Hinweise lassen sich einzeln aufklappen, die Lösung zuletzt.

  1. Zwei Absätze, ein Abstand – zusammenfallende AußenabständeBox-Modell
  2. Einen Block horizontal zentrierenLayout
  3. Welche Regel gewinnt? Spezifität im DuellKaskade
  4. Alle 15 ÜbungenÜbersicht
§5TESTEN

CSS Quiz – zwölf Runden, jede Antwort mit Erklärung

Zehn Fragen pro Runde zu Box-Modell, Farben und Hintergründen, Selektoren, Text, visueller Formatierung und Allgemeinem. Jede Antwort wird sofort bewertet und begründet. Zum Quiz.

FRAGE 4 VON 10 · SPEZIFITÄT

Welcher Selektor hat die höhere Spezifität: ul li a.active oder #nav a?

Antwort anzeigen

#nav a – eine ID wiegt schwerer als jede Zahl von Klassen und Typselektoren. Spezifität ist kein Punktesystem, sondern ein Tupel: (0,1,0,1) schlägt (0,0,1,3).

§6FRAGEN

Häufige Fragen zur CSS Referenz

Was ist eine CSS Referenz und was steht darin?

Eine CSS Referenz beschreibt jede Eigenschaft von Cascading Style Sheets einzeln: welche Werte sie annimmt, welchen Ausgangswert sie hat, ob sie vererbt wird, auf welche Elemente sie anwendbar ist und wie Browser sie umsetzen. Diese Referenz deckt CSS 1 und CSS 2.1 vollständig ab, 133 Eigenschaften, dazu Selektoren, Pseudoklassen, Pseudoelemente und At-Regeln.

Wozu dient das Labor auf den Referenzseiten?

Jede Eigenschaftsseite trägt ein Labor: die Regel steht als Code, ein Regler oder Auswahlfeld verändert den Wert, die Box darunter folgt sofort, und die Anzeige nennt den berechneten Wert samt Box-Größe. So lässt sich eine Eigenschaft ausprobieren, statt sie nur zu lesen. Ohne JavaScript bleibt Code und Rendering am Ausgangswert stehen.

Gilt CSS 2.1 heute noch?

CSS 2.1 ist die Grundlage aller späteren Module. Box-Modell, Kaskade, Spezifität, Vererbung, Positionierung, Floats und Selektoren funktionieren in jedem aktuellen Browser genau so, wie CSS 2.1 sie definiert. Neuere Module wie Flexbox, Grid oder Custom Properties bauen darauf auf; der Abschnitt „CSS 3 und neuer“ behandelt sie.

Wie unterscheiden sich Vollreferenz und Schnellreferenz?

Die Vollreferenz erklärt jede Eigenschaft ausführlich mit Erläuterungen, Beispielen und Browserunterstützung. Die Schnellreferenz fasst dieselben Eigenschaften in Tabellen zusammen, nach Kapiteln der Spezifikation geordnet, und lässt sich als PDF herunterladen.

Wo fängt man an, wenn man CSS lernen will?

Mit dem Kapitel Grundlegendes: CSS einbinden, Regelsyntax und Werte, dann Kaskade, Spezifität und Vererbung, danach das Box-Modell. Die Tutorials zeigen anschließend Anwendungen Schritt für Schritt, die Übungen prüfen das Ergebnis, das Quiz das Wissen.

Warum stehen in der Referenz auch Eigenschaften, die kein Browser kennt?

CSS 2 definierte 20 aurale Eigenschaften für Sprachausgabe, die nie umgesetzt wurden, und einige wenige Eigenschaften wurden in CSS 2.1 gestrichen. Sie bleiben dokumentiert, weil eine Referenz den Standard vollständig abbilden soll und weil ältere Stylesheets sie enthalten können. Jede dieser Seiten trägt einen entsprechenden Hinweis.