Die Syntax von CSS

Die CSS-Syntax legt fest, wie Regeln für das Styling von HTML-Elementen geschrieben werden. Das Verständnis der Syntax ist für den effektiven Einsatz von CSS unerlässlich.

Aufbau einer CSS-Regel

Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock. Die Deklaration enthält Eigenschaften und deren Werte, die das Styling des Elements bestimmen.

Selektoren in CSS

Mit Selektoren wird bestimmt, auf welche HTML-Elemente die Regeln angewendet werden. Am häufigsten sind Element-, Klassen- und ID-Selektoren.

Element-Selektor

Der Element-Selektor bezieht sich direkt auf den Namen des HTML-Elements, z. B. auf alle <p>-Elemente.

Klassen-Selektor

Der Klassen-Selektor richtet sich an Elemente mit einem bestimmten class-Attribut und beginnt immer mit einem Punkt.

ID-Selektor

Der ID-Selektor richtet sich an ein Element mit einer eindeutigen ID und beginnt immer mit einem Rautezeichen (#).

Mehrere Deklarationen in einer Regel

Eine CSS-Regel kann mehrere Deklarationen enthalten, die das Erscheinungsbild eines Elements genau festlegen.

Which selector is recommended for styling multiple elements?

Selected: #id (1/3)

#id.classstyle

/* Choose the correct selector type */
#id {
  background-color: yellow;
}

Move the slider to set the value, then check your answer.

Tipps zur Verwendung der CSS-Syntax

Die richtige Verwendung der Syntax hilft, sauberen und leicht wartbaren CSS-Code zu schreiben.

Beende Deklarationen immer mit einem Semikolon, um Fehler zu vermeiden.
Verwende Einrückungen und Zeilenumbrüche für bessere Lesbarkeit.
Wähle aussagekräftige Klassennamen, damit andere Entwickler den Code leicht verstehen können.