Regeln und Kommentare

Willkommen zur zweiten CSS-Lektion! In der vorigen Lektion hast du deine erste Regel geschrieben. Sehen wir uns ihre Teile und deren Namen genauer an, denn wir brauchen sie ständig:

• Eine Regel ist das Ganze: ein Selektor und Deklarationen in geschweiften Klammern.
• Der Selektor wählt die Elemente aus, die die Regel gestaltet. Der Selektor h1 wählt alle h1-Elemente aus.
• Eine Deklaration sagt, was sich wie ändern soll. Sie besteht aus einer Eigenschaft und einem Wert, getrennt durch einen Doppelpunkt, und endet mit einem Semikolon.
• Die Eigenschaft ist das, was wir ändern, zum Beispiel die Farbe des Textes (color).
• Der Wert ist das, worauf wir die Eigenschaft ändern, zum Beispiel blue.

Ein Stylesheet ist einfach eine Liste von Regeln. Leerzeichen und Zeilenumbrüche sind dem Browser egal, h1{color:blue} würde also auch funktionieren. Regeln, die über mehrere Zeilen geschrieben sind und deren Deklarationen eingerückt sind, lassen sich aber viel leichter lesen.

Ein Stylesheet kann auch Kommentare enthalten: Notizen für Menschen, die der Browser ignoriert. Ein Kommentar beginnt mit /* und endet mit */ und kann über mehrere Zeilen gehen:

/* Hauptüberschrift */
h1 {
	color: blue;
}

/*
p {
	color: green;
}
*/

Kommentare erklären den Code, und man kann mit ihnen auch einen Teil davon vorübergehend ausschalten: Die Regel für p oben steht in einem Kommentar und bewirkt deshalb nichts. Vorsicht: Der HTML-Kommentar <!-- --> funktioniert in CSS nicht. Hier geht nur /* */.

In style.css haben wir die Regel aus der vorigen Lektion gelassen und den Inline-Stil von der Hauptüberschrift entfernt, damit er nicht stört.