6.2.1 CSS Syntax – Befehle definieren
Um eine fremde Sprache zu lernen, benötigen wir sowohl Kenntnisse über die Vokabeln als auch über den Satzbau. Ebenso bei CSS: Die Deklaration, also der Aufbau eines CSS-Befehls und die Schreibweise, sind grundlegend, da ein Stylesheet andernfalls nicht erkannt und bearbeitet wird.
Ein Stylesheet besteht aus einer oder mehreren Anweisungen zur Darstellung von Elementen. Solch eine Anweisung besteht aus zwei Teilen: dem Selektor und der Deklaration. Der Selektor bestimmt, auf welches HTML-Element die Anweisung angewendet wird. Die Deklaration beschreibt, was auf das Element angewendet wird. Sie besteht aus einer Eigenschaft, die das Element besitzt, und einem Wert, den die Eigenschaft bekommen soll.
Wenn wir von „Elementen“ sprechen, sind damit die HTML-Elemente im HTML-Dokument gemeint. Selektoren gehören zu den CSS-Dokumenten, haben jedoch die gleiche Bezeichnung: HTML-Element: <h1>...</h1>
, dazugehöriger Selektor: h1 { ... }
.
Einige Regeln zur Syntax
-
Hinter dem Selektor steht die Deklaration in geschweifte Klammern eingeschlossen
{ ... }
. -
Eine Eigenschaft wird durch einen Doppelpunkt (
:
) vom Wert getrennt. -
Wertdeklarationen werden mit einem Semikolon abgeschlossen (wichtig bei mehreren Werten).
-
Mehrere Eigenschaft/Wert-Paare werden zur Übersichtlichkeit untereinander geschrieben.
Wie in jeder anderen Programmierung auch, muss die Syntax stimmen, denn andernfalls funktioniert der Befehl nicht. Moderne Browser ignorieren fehlerhafte Deklarationen, verarbeiten jedoch gültige Anweisungen. Das erleichtert die Fehlersuche, wenn ein Teil eines Stylesheets nicht wie erwartet funktioniert.
Erweiterung: CSS-Farben
CSS-Farben können auf fünf verschiedene Weisen definiert werden:
-
Farbname: z. B.
red
. -
Hexadezimalwert: z. B.
#ff0000
. -
RGB-Wert: z. B.
rgb(255, 0, 0)
. -
HSL-Wert: z. B.
hsl(0, 100%, 50%)
. -
CSS Custom Properties: Variablen, die in
:root
definiert werden können, z. B.--main-color: #ff0000;
.
Custom Properties erlauben es uns, Werte zentral zu speichern und wiederzuverwenden. Änderungen an einer Stelle wirken sich automatisch auf alle verknüpften Elemente aus.
CSS ist nicht case-sensitive, aber Eigenschaften und Werte sollten immer klein geschrieben werden. Klassen- und ID-Namen in HTML sind jedoch case-sensitive, daher ist Konsistenz bei der Schreibweise wichtig.
Überschriften mit unterschiedlichen CSS-Regeln
In den nächsten Kapiteln lernen wir CSS-Deklarationen in HTML-Dokumente einzubetten. Mit diesem Wissen schaffen wir die Grundlage für die Gestaltung flexibler und moderner Layouts.