CSS-Regeln
Mithilfe der Selektoren können wir jetzt beliebige Elemente unseres HTML-Dokuments auswählen. Nun müssen wir nur noch lernen, wie wir diesen Elementen dann mit CSS auch Stilanweisungen geben können. Dies funktioniert immer nach dem Schema, dass einer Eigenschaft (z.B. Farbe) ein Wert (z.B. rot) zugewiesen wird. Eigenschaft und Wert werden dabei durch einen Doppelpunkt getrennt. Solch ein Ausdruck wird dann auch eine CSS-Deklaration oder CSS-Regel genannt:
eigenschaft: wert;Mit dem Semikolon am Schluss wird klar gemacht, dass die CSS-Regel hier zu Ende ist. Das ist wichtig, da ja in den meisten Fällen noch viele weitere Regeln folgen, die klar von einander getrennt werden müssen. Es gibt eine sehr große Anzahl an möglichen CSS-Eigenschaften und zugehörigen Werten. Wir werden uns in diesem Kurs ein paar der wichtigsten davon ansehen, um mit ihnen CSS zu üben.
CSS-Deklarationsblöcke
Wie gesagt haben wir meistens mehrere CSS-Regeln für einen Selektor, die wir anwenden wollen. Deshalb müssen alle Regeln, auf die sich der CSS-Selektor beziehen soll, zu einem Deklarationsblock zusammengefasst werden. Dafür werden geschweifte Klammern verwendet, was dann so aussieht:
{
eigenschaft1: wert1;
eigenschaft2: wert2;
eigenschaft3: wert3;
}Vollständige CSS-Anweisung
Fassen wir nun unser Wissen über Selektoren und CSS-Regeln zusammen, so können wir damit eine vollständige CSS-Anweisung aufschreiben:
p.wichtig {
color: red;
font-weight: bold;
}Was die beiden Regeln jeweils genau zur Folge haben, werden wir in den kommenden Abschnitten lernen. Jetzt können wir aber schon erkennen, dass mit diesem Code-Beispiel jedem <p>-Element, das den Klassennamen wichtig hat, die Eigenschaft color mit dem Wert red und die Eigenschaft font-weight mit dem Wert bold zugewiesen werden.
Diese vollständige CSS-Anweisung kann direkt so in einem Texteditor eingegeben und als eine Datei mit der Endung .css abgespeichert werden.