Die CSS-Regel

Ein einziges fehlendes Semikolon, und zwei Angaben sind weg, ohne dass irgendwo etwas rot wird. Wenn du weißt, woraus eine Regel besteht, findest du so etwas schnell. Sonst sucht man in der falschen Zeile. Eine CSS-Datei besteht aus Regeln, und jede Regel sagt zwei Dinge: wen sie meint und was dort gelten soll.

<h1>Projekte</h1>
<p>Eine Auswahl aus den letzten Jahren.</p>

h1 {
  color: #2563eb;
}

In diesen drei Zeilen steckt alles, was eine Regel braucht. Am besten liest man sie von außen nach innen.

Der Selektor steht vorn, hier h1. Er legt fest, welche Elemente gemeint sind. Ein Selektor kann sehr einfach sein wie hier oder ziemlich ausgefeilt, und darum geht es im nächsten Abschnitt.

Die geschweiften Klammern dahinter sind der Deklarationsblock. Alles zwischen ihnen gilt für die getroffenen Elemente. Die zwei gehören immer zusammen. Eine öffnende ohne schließende ist einer der teuersten Tippfehler in CSS, mehr dazu in Lektion 1.4.

Darin steht die Deklaration, und die besteht aus zwei Teilen, der Eigenschaft (color) und dem Wert (#2563eb). Dazwischen steht ein Doppelpunkt, dahinter ein Semikolon.

Die Begriffe sind kein Selbstzweck. Wenn du später jemanden um Hilfe fragst, ist „das CSS geht nicht“ etwas ganz anderes als „mein Selektor trifft nicht“.

01 / 02Mehrere Deklarationen, mehrere Regeln

Ein Block kann beliebig viele Deklarationen enthalten, und eine Datei beliebig viele Regeln.

<h1>Projekte</h1>
<p>Eine Auswahl aus den letzten Jahren.</p>

h1 {
  color: #2563eb;
  font-size: 44px;
  text-align: center;
}

p {
  color: #52525b;
  font-size: 18px;
  text-align: center;
}

Jede Deklaration bekommt ihr eigenes Semikolon. Beim allerletzten im Block darf man es weglassen. Ich setze es trotzdem immer, sonst fehlt es genau dann, wenn ich eine Zeile darunter ergänze, und das ist der Fehler aus dem dritten Beispiel.

Wie du das formatierst, ist dem Browser völlig egal. Du könntest die ganze Regel in eine Zeile schreiben oder zwischen color und dem Doppelpunkt zehn Leerzeichen setzen, und der Browser würde einfach darüber hinweglesen. Eine Deklaration pro Zeile und zwei Leerzeichen Einzug sind reine Konvention. Ich halte mich dran, weil ich den Code später auch wieder lesen muss.

Zwei Dinge sind dagegen nicht egal.

Eigenschaftsnamen werden kleingeschrieben und mit Bindestrich getrennt. Es heißt font-size, nicht fontSize und nicht Font-Size.

Der Wert muss zur Eigenschaft passen. color will eine Farbe, font-size eine Größe. Kann die Eigenschaft mit einem Wert nichts anfangen, wird er verworfen. Und zwar still.

02 / 02Was passiert, wenn ein Semikolon fehlt

Das dritte Beispiel sieht auf den ersten Blick harmlos aus.

<h1>Projekte</h1>
<p>Eine Auswahl aus den letzten Jahren.</p>

h1 {
  color: #2563eb
  font-size: 44px;
  text-align: center;
}

Auf der Seite ist die Überschrift weder blau noch größer geworden. Nur die Zentrierung greift.

Mit dem Inspector hast du statt einer Vermutung einen Beweis. An der Überschrift steht im Auskunftsstreifen color: rgb(0, 0, 0), font-size: 32px und text-align: center. Die ersten beiden Werte sind exakt die aus dem Browser-Stylesheet, dieselben wie an der Überschrift ganz ohne CSS. Das Blau und die 44 Pixel sind also nicht halb angekommen, und von etwas anderem überstimmt wurden sie auch nicht. Sie sind gar nicht angekommen.

Fehlt das Semikolon, liest der Browser die nächste Zeile als Teil desselben Werts. Aus color: #2563eb wird für ihn color: #2563eb font-size: 44px, und das ist keine gültige Farbe. Also fliegt die ganze Deklaration raus, beide Angaben sind weg. Die Zeile danach hat wieder ihr Semikolon und kommt sauber durch.

Ein fehlendes Semikolon kostet dich damit zwei Deklarationen statt einer. Nur hinter der letzten im Block kostet es gar nichts, denn danach kommt keine Zeile mehr, die es mit hineinziehen könnte. Deshalb fühlt sich der Fehler beim Suchen so seltsam an. Du hast eine Zeile im Verdacht, und schuld ist die darüber.

Eine Fehlermeldung gibt es nicht. Der Reiter „Console“ bleibt leer, die Seite lädt normal. Der Editor hier unterstreicht immerhin gepunktet, wo die Grammatik stolpert, nur ist das nicht die Stelle des Fehlers. Die Marke sitzt am Doppelpunkt hinter font-size, also eine Zeile tiefer. Erst dort fällt auf, dass der Wert von color noch nicht zu Ende war.

CSS verwirft ungültige Deklarationen kommentarlos und macht mit der nächsten weiter. Auch im Auskunftsstreifen siehst du nur die halbe Geschichte. Da steht, welcher Wert gilt, aber nicht, welche Zeile unterwegs verloren gegangen ist. Warum das so gebaut ist und wie du damit umgehst, kommt in Lektion 1.4.

Jetzt schreibst du erst einmal selbst ein paar Regeln.