Aufbau (Syntax) von CSS-Befehlen

Der Aufbau einer CSS-Anweisung ist eigentlich sehr einfach. Wichtig ist im ersten Schritt das Verständnis des Aufbaus der CSS-Anweisungen (sprich was von Computercracks immer so hübsch als Syntax bezeichnet wird).

CSS-Anweisung flapsig in Deutsch beschrieben:

BEI WEM soll welche EIGENSCHAFT einen bestimmten WERT annehmen.

Als Beispiel:
Alle <h2> Überschriften sollen bei Ihrer Eigenschaft Schriftfarbe den Wert blau annehmen.

oder

Alle Bilder (<img ...>) sollen bei der Eigenschaft Rahmen diesen in Blau mit 1 Pixel Rahmenstärke angezeigt werden.

Die oben genutzten Farben finden sich nun im Quellcode wieder. Die Schreibweise im Quellcode, mit Eigenschaft und Wert, sieht dann wie folgt aus. Wichtig ist, dass es geschweifte Klammern sind!

h2 { color: blue; }

In den folgenden Darstellungen wird zwecks Übersichtlichkeit, anstelle der Hintergrundfarbe, die Schrift mit der entsprechenden Farbe dargestellt werden!

h2 { color: blue; }

Geschweifte Klammern bei CSS { }

Die geschweiften Klammern {} umfassen die Kombination Eigenschaft und Wert. Die Klammern sind deshalb wichtig, da es möglich ist (und in der Realität sehr häufig vorkommt), dass mehrere verschiedene Anweisungen in Form von „Eigenschaft: Wert“ für ein Element vorhanden sind.

FÜRWEN { 
  Eigenschaft1: Wert1; 
  Eigenschaft2: Wert2; 
  Eigenschaft3: Wert3; 
}

Beispielweise Festlegung von Vordergrundfarbe, Hintergrundfarbe und Rahmen.

Ich ziehe es vor, jeder Eigenschaft-Wert-Kombination im Quellcode eine eigene Zeile zu gönnen, was den Quellcode übersichtlicher macht.

Als Beispielcode für Vorder- und Hintergrundfarbe:

h2 { 
    color: blue; 
    background-color: black; 
}

Die geschweiften Klammern erhält man unter Windows durch die Kombination der Taste Alt Gr und der Taste 7 bzw. die schließende Klammer mit Alt Gr + 0. Es gibt eine weitere Möglichkeit unter Windows für Nutzer, die die rechte Seite der Tastatur nicht mögen (wo die Taste Alt Gr sitzt): die öffnende geschweifte Klammer erhält man unter Windows auch mit der Tastenkombination Strg + Alt + 7 und die schließende geschweifte Klammer mit Strg + Alt + 0.

Beim Mac erhält man die öffnende geschweifte Klammer über alt + 8 und die schließende Klammer über alt + 9.

Der beliebteste Fehler bei CSS

Das Semikolon ; nach dem Wert ist wichtig – extrem wichtig! Es schließt die Kombination von „Eigenschaft: Wert;“ ab. Das ist deshalb so wichtig, da mehrere Eigenschaften festlegbar sind.

Fehlt das Semikolon, funktioniert es nicht und man wundert sich, dass es nicht so funktioniert, wie man es sich vorgestellt hat!

Und genau das wird jedem früher oder später passieren – ein Semikolon ist schnell vergessen. Also nicht wundern, sondern nach fehlenden Semikola Ausschau halten! In den meisten Editoren werden Fehler im CSS farblich hervorgehoben – wenn also eine Zeile nicht so aussieht wie die anderen, könnte es am fehlenden Semikolon liegen (meist in der Zeile darüber).

Computer-Slang: damit man mit den korrekten Bezeichnungen um sich werfen kann (und auf Partys beeindrucken)

Was bisher mit „Für Wen“ und Eigenschaft-Wert-Kombination bezeichnet wurde, hat natürlich auch schöne Fachbegriffe. Die Bezeichnung für das „für Wen“ ist korrekt der Selektor – sprich auf was es sich bezieht. Später wird auch zwischen verschiedenen Arten von Selektoren unterschieden.

Unsere „Eigenschaft-Wert“-Kombination ist die Deklaration.

Vor dem ersten Test ...

Eigentlich will man natürlich sofort sein neues Wissen testen und z.B. die Welt bunt machen. Davor steht aber noch das Integrieren der CSS-Anweisungen in die HTML-Seite. Das wird im folgenden Kapitel gezeigt.