Syntax
Die Syntax ist mit einem Regelwerk gleichzusetzen, in dem beschrieben ist, wie der Code strukturiert wird.
Die Struktur einer CSS-Regel ist ganz einfach. Eine Regel besteht aus dem "Selektor" und dem "Deklarationsblock".
Der "Deklarationsblock" wird mit geschweiften Klammer gekennzeichnet. Innerhalb eines geschweiften Klammernpaares stehen die "Deklarationen".
Selektor
Der "Selektor" bezeichnet das Element, welches in HTML verändert werden soll.
In diesen Zusammenhang wird auch von "Element selektieren" gesprochen.
Die einfachste Variante ist der "Element-Selektor". Dabei werden alle Elemente mit gleichem Elementnamen ausgewählt.
p {color: blue;}
Dieser Selektor spricht alle <p>-Elemente an.
Deklarationsblock
Der "Deklarationsblock" enthält die Anweisungen (Deklarationen).
Die "Deklarationen" bestehen aus "Eigenschaften" und ihre "Werte". "Eigenschaft" und "Wert" werden mithilfe des Doppelpunkts voneinander getrennt.
p {
color: blue;
background: yellow;
}
Wenn mehrere "Deklarationen" vergeben werden, ist das Semikolon als Trennzeichen zwischen den "Deklarationen" Pflicht. Daraus ergibt sich auch, dass bei einzelnen "Deklarationen" oder der letzten "Deklaration" in einem "Deklarationsblock" kein Semikolon gesetzt werden muss. Damit ist der nachfolgende Code auch syntaktisch korrekt.
p {
color: blue;
background: yellow
}
Eigenschaft
Die "Eigenschaft" (Farbe, Größe usw.) des Elements, welches gestaltet werden soll, steht nach der öffnenden geschweiften Klammer aber noch vor dem Doppelpunkt.
Vor und nach dem Doppelpunkt können Leerzeichen verwendet werden (optional), in der Praxis hat sich ein Leerzeichen nach dem Doppelpunkt und kein Leerzeichen vor dem Doppelpunkt durchgesetzt.
Wert
Der "Wert" der "Eigenschaft" steht nach dem Doppelpunkt und vor der schließenden geschweiften Klammer.
Wenn nach dieser "Deklaration" in einem "Deklarationsblock" noch weitere "Deklarationen" geschrieben werden, ist nach dem Wert noch ein Semikolon zu setzen. Wenn bei Abständen oder anderen "Eigenschaften" ein Zahlenwert vergeben wird, der kleiner ist als eine Einheit, dann kann in CSS entweder: "0.5" oder: ".5" geschrieben werden. Beide Varianten werden vom Browser gleichermaßen verstanden.
Anmerkung
In der Praxis werden CSS-Anweisungen mal in einer und mal in mehreren Zeilen geschrieben.
Einzelne "Deklarationen" werden häufig mit dem "Selektor" in einer Zeile geschrieben. Wenn mehrere "Deklarationen" geschrieben werden, dann wird in der ersten Zeile der "Selektor" mit der öffnenden Klammer angegeben und in den nachfolgenden Zeilen werden erst die "Deklarationen" definiert, bis in der letzten Zeile die schließende Klammer gesetzt wird.
Fehlermeldungen
CSS erstellt keine Fehlermeldungen.
Die meisten Fehler sind auf falsch gesetzte Zeichen wie dem Doppelpunkt oder dem Semikolon zurückzuführen. Die Verwendung eines Texteditors mit Syntax highlighting zeigt oft auf dem ersten Blick, wo sich ein Fehler eingeschlichen hat.
Kommentieren
Umso mehr Code geschrieben wird, umso wichtiger ist es für sich oder auch für andere Leute an bestimmten Stellen ein Kommentar da zu lassen.
Ein Kommentar wird an einer beliebigen Stelle im Dokument durch: /* eingeleitet und durch: */ beendet.
Alles was zwischen "/*" und "*/" steht, wird vom Browser ignoriert und nicht ausgewertet.
/*Kommentar schreiben*/
p { /*Absatzelement*/
color: blue; /*Text wird in blauer farbe dargestellt*/
}
Weiter mit Selektor