CSS-Syntax & -Schreibweise
Ein fehlerfrei geschriebener CSS-Code ist wichtig, damit das gewünschte Styling auch funktioniert. Darüber hinaus liegt die Kunst darin, möglichst effizienten CSS-Code zu schreiben.

CSS ist eine Auszeichnungssprache für HTML. Sie ermöglicht es u.a., die verschiedenen Eigenschaften von HTML-Elementen zu verändern – zum Beispiel Farbe, Größe oder Position. CSS ist somit für die Gestaltung einer Website verantwortlich. Die CSS-Syntax arbeitet größtenteils mit sog. Rulesets sowie mit At-Rules.
CSS Regelsätze
Ein CSS-Regelsatz (Ruleset) besteht aus:
- einem Selektor (Selector) – mit dem das Objekt ausgewählt wird, das gestaltet werden soll – z.B. eine Überschrift
- und einer Deklaration (Declaration), die festlegt, was verändert werden soll. Diese besteht wiederum aus:
- einer Eigenschaft (Property) – z.B. der Farbe
- und einem Wert (Value)– z.B. Blau
Die Deklarationen werden in geschweiften Klammern zusammengefasst. Mehrere Deklarationen müssen durch ein Semikolon voneinander getrennt werden. Die letzte Deklaration benötigt eigtl. kein Semikolon mehr, aber es ist gängige Praxis dieses dennoch zu setzen.
selektor {
eigenschaft: wert;
eigenschaft: wert;
eigenschaft: wert;
}

Der folgende Code färbt eine Überschrift 1 blau ein und vergibt eine serifenlose Schriftart.
h1 {
color: blue;
font-family: sans-serif;
}
CSS-Selektoren
Die Kunst bei CSS liegt u.a. darin, mit möglichst cleveren Selektoren genau die Elemente auf der Website anzusprechen, die verändert werden sollen. Es gibt sehr viele verschiedene CSS-Selektoren – also Möglichkeiten Objekte auszuwählen. Schlechte Selektoren sind oft zu ungenau. Das führt dazu, dass das Styling auch auf nicht erwünschte Objekte Auswirkungen hat.
Es gibt auch Selektoren, die zu genau – überspezifisch – sind. In diesem Fall funktioniert der Code zwar meist, aber er ist aufgebläht und schlecht zu warten. In diesem Zusammenhang ist das Thema CSS Spezifität sehr relevant.
Kommentare
Kommentare werden im CSS-Code mit /* Kommentar */
gekennzeichnet. Die Kommentare sind im CSS-Quellcode sichtbar.
/* Ich bin ein Kommentar. */
Vererbung
CSS-Eigenschaften werden auf Kind-Elemente im HTML-Code weitervererbt. Im nachfolgenden Beispiel werden sowohl die Überschrift <h1>
als auch der Text <p>
rot eingefärbt, da dem übergeordneten <div>
die Eigenschaft für roten Text zugewiesen wurde.
<div>
<h1>Headline</h1>
<p>Hier steht ein wenig Text. </p>
</div>
div {
color: red;
}
Best Practises für das Schreiben von CSS
Die offizielle Syntax von CSS ist das Eine – gut strukturierter Code nach »Industry Standards« das Andere. Um guten CSS-Code zu schreiben, solltet ihr euch daher auch mit den wichtigsten CSS Coding Guidelines vertraut machen.