Lädt...

CSS-Syntax

Sie wissen bereits, dass CSS das Aussehen von HTML steuert. In dieser Lektion schauen wir uns den Aufbau einer Regel genau an – damit Sie Stile lesen und schreiben können, ohne zu raten, wohin geschweifte Klammern, Doppelpunkte und Semikolons gehören.

Was ist die CSS-Syntax?

Die CSS-Syntax ist das feste Schema, nach dem eine Stilregel geschrieben wird. Fast jede alltägliche Regel folgt derselben Form: Sie legen fest, was gestaltet werden soll (der Selektor), öffnen mit { einen Deklarationsblock, schreiben eine oder mehrere Deklarationen und schließen mit }. Jede Deklaration verbindet eine Eigenschaft mit einem Wert.

Aufbau einer CSS-Regel

Zerlegen Sie eine Regel in ihre benannten Bestandteile. Wenn Sie jedes Teil benennen können, finden Sie Tippfehler deutlich schneller.

📊 Bestandteile einer CSS-Regel

Teil Beispiel Aufgabe
Selektor p Wählt die Elemente aus, für die die Regel gilt
Deklarationsblock { … } Fasst eine oder mehrere Deklarationen in geschweiften Klammern zusammen
Deklaration color: teal; Eine einzelne Anweisung aus Eigenschaft und Wert, meist mit ; abgeschlossen
Eigenschaft color Das Merkmal, das Sie ändern möchten
Wert teal Die Einstellung, die Sie dieser Eigenschaft zuweisen
Doppelpunkt / Semikolon : / ; Der Doppelpunkt trennt Eigenschaft und Wert, das Semikolon beendet die meisten Deklarationen

Eine Regel mit beschrifteten Teilen

Hier sehen Sie eine möglichst einfache Regel, in der alle wichtigen Teile vorkommen. Selektoren vertiefen wir in späteren Lektionen – jetzt geht es um die richtige Struktur.

CSS-Regel mit beschrifteten Teilen

css
CSS Code 
p {
color: teal;
}

Von links nach rechts gelesen

  • p – Selektor (jeder Absatz)
  • { … } – Deklarationsblock
  • color – Eigenschaft
  • : – trennt Eigenschaft und Wert
  • teal – Wert
  • ; – beendet die Deklaration
    Leerzeichen und Zeilenumbrüche sind frei wählbar. Sie könnten p{color:teal;} auch in eine Zeile schreiben; der Browser behandelt beides gleich. Zum Lernen und für die Arbeit im Team ist die lesbare, mehrzeilige Schreibweise aber die bessere Wahl.

Mehrere Deklarationen in einem Block

Eine Regel kann für denselben Selektor viele Eigenschaften festlegen. Schreiben Sie jede Deklaration in eine eigene Zeile und schließen Sie sie mit einem Semikolon ab.

Mehrere Deklarationen

css
CSS Code 
.note {
color: #0f172a;
background-color: #e0f2fe;
padding: 1rem;
border-radius: 0.5rem;
}

Warum das funktioniert

  • .note ist ein Klassenselektor (Klassen üben Sie später noch ausführlicher)
  • Vier Deklarationen teilen sich einen Deklarationsblock
  • Der Browser wendet alle auf Elemente mit class="note" an
  • Fehlt zwischen zwei Deklarationen das Semikolon, kann die nächste Eigenschaft wirkungslos bleiben

Selektoren gruppieren

Brauchen mehrere Selektoren dieselben Stile, trennen Sie sie einfach mit Kommas. Ein Deklarationsblock gilt dann für alle.

Gruppierte Selektoren

css
CSS Code 
h1, h2, h3 {
font-family: Georgia, serif;
color: #1e293b;
}

Wann sich Gruppieren lohnt

Gruppieren erspart Ihnen Copy-and-paste, wenn Überschriften (oder andere Elemente) gleich aussehen sollen. Braucht ein Selektor später einen eigenen Stil, schreiben Sie dafür lieber eine eigene Regel, statt die Gruppe zu überladen.

Behalten Sie beim Schreiben diese kurze Liste im Kopf:

  • Geschweifte Klammern umschließen den Deklarationsblock
  • Der Doppelpunkt steht zwischen Eigenschaft und Wert
  • Das Semikolon beendet jede Deklaration (vor der nächsten ist es Pflicht; auch nach der letzten ist es eine gute Gewohnheit)
  • Kommas trennen gruppierte Selektoren – nicht Eigenschaften
  • Eigenschaftsnamen und die meisten Schlüsselwörter sind nicht von Groß- und Kleinschreibung abhängig, üblich ist aber die Kleinschreibung

Probieren Sie es selbst aus

  1. Legen Sie die Datei syntax.html an, mit einem Absatz <p class="note">Syntax practice</p> und einem <style>-Block im head.
  2. Fügen Sie die .note-Regel mit den mehreren Deklarationen aus dieser Lektion hinzu.
  3. Ändern Sie background-color auf #fef3c7, speichern Sie und laden Sie die Seite neu.
  4. Ergänzen Sie als fünfte Deklaration font-size: 1.125rem; im selben Block, speichern Sie und laden Sie erneut neu.
  5. Prüfen Sie, ob sich sowohl der Hintergrund als auch die Schriftgröße ändern. Falls nicht, kontrollieren Sie Klammern und Semikolons.

Typische Fehler

  • color teal ohne Doppelpunkt – der Browser kann die Deklaration nicht lesen
  • Eine fehlende { oder }, sodass Deklarationen außerhalb eines Blocks stehen und ignoriert werden
  • Fehlendes Semikolon zwischen zwei Deklarationen, sodass die zweite Eigenschaft nie angewendet wird
  • Ein Komma statt eines Doppelpunkts zwischen Eigenschaft und Wert (color, teal)
  • Eine Eigenschaft allein in einer Zeile, ohne Selektor und Klammern – das ist keine vollständige Regel

Zusammenfassung

  • CSS-Syntax = Selektor + Deklarationsblock { } mit Deklarationen
  • Eine Deklaration hat die Form property: value;
  • Ein Block kann viele Deklarationen für denselben Selektor enthalten
  • Kommas gruppieren Selektoren, die dieselben Stile teilen
  • Sorgfalt bei Klammern, Doppelpunkten und Semikolons verhindert stille Fehler
  • Üben Sie, indem Sie Werte ändern und Deklarationen ergänzen – und danach die Seite neu laden

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial