Aufbau von CSS

zum Anfang der SeiteFormatierung mit CSS

Webdesign: Unterschied zwischen einzelnen Formatierungen mittels HTML und zentraler Formatierung mittels CSS

zum Anfang der SeiteAufbau einer CSS-Regel

Aufbau einer Regel: »Selektor {Eigenschaft: Wert;}«

Die Gruppe »Eigenschaft: Wert;« wird Deklaration genannt, sind mehrere Deklarationen vorhanden, wird oft vom Deklatationsblock gesprochen.

Abbildung einer CSS-Regel

Reihenfolge des Aufbaus nochmals im Detail:

Selektor
geschwungene/geschweifte Klammer auf
eine oder mehrere Deklaration(en) aus
     Eigenschaft
     Doppelpunkt
     zugeordneter Wert
     Strichpunkt
geschwungene/geschweifte Klammer zu

Anmerkung: Bei der letzten Deklaration muss kein Strichpunkt stehen. Man sollte ihn aber auf alle Fälle setzen, da diese Variante übersichtlicher und weniger fehleranfällig ist.

Zeilenumbrüche und Abstände sind beliebig und dienen nur der besseren Übersichtlichkeit für uns Menschen
Denn der Webbrowser (Computer) orientieren sich nur an den geschwungenen/geschweiften Klammern, Doppelpunkt und Strichpunkt als Trennzeichen zwischen den Selektoren, den Eigenschaften und den Werten.

zum Anfang der SeiteTypische Darstellung einer CSS-Regel in der Codeansicht

CSS-Regeln, die man in einem Web-Editor über einen Assistenten bzw. Dialogfenster eingibt, werden von diesem als Regel formuliert und meist in folgender typischen Darstellung "geschrieben": 

Selektor {
    Eigenschaft: Wert;
    Eigenschaft: Wert;
}
Selektor {
    Eigenschaft: Wert;
}

Der Selektor oder die Selektoren stehen in einer Zeile, die "geschwungene/geschweifte Klammer auf" steht meist nach einem Leerzeichen in der selben Zeile.
Dadurch wird Platz gespart und in einem Fenster können bei gleicher Höhe mehr Regeln auf einmal eingesehen werden - dies führt zu mehr Übersicht.

Die Deklarationen werden eingerückt und jede steht in einer eigenen Zeile. Auch die letzte Deklaration wird mit einem Strichpunkt abgeschlossen. Zwischen Eigenschaft und Doppelpunkt wird kein Leerzeichen geschrieben. Danach folgt ein Leerzeichen um Eigenschaft und Wert optisch zu trennen. Zwischen Wert und Strichpunkt ist wiederum kein Leerzeichen geschrieben.

Die "geschwungene/geschweifte Klammer zu" steht ohne Einrückung in einer eigenen Zeile.
Da in dieser Zeile nur ein einziges Zeichen ganz links steht, wirkt sie fast wie eine Leerzeile. Dadurch trennt sie optisch die folgende Regel von dieser Regel.

Die nächste Regel folgt ohne Zwischenraum, also ohne Leerzeile. Diese ist nicht nötig, da durch die letzte Zeile der vorherigen Regel ("geschwungene/geschweifte Klammer zu") schon "fast" eine Leerzeile vorhanden ist.
Dadurch wird Platz gespart und in einem Fenster können bei gleicher Höhe mehr Regeln auf einmal eingesehen werden - dies führt zu mehr Übersicht.

Der Beginn jeder Regel ist optisch leicht erkennbar, da die Zeile mit dem Selektor die einzige ist, die ohne Einrückung dargestellt ist und daher ganz links beginnt. Die letzte Zeile der vorherigen Regel ("geschwungene/geschweifte Klammer zu") ist zwar auch ohne Einrückung dargestellt, aber sie ist optisch kaum wahrnehmbar und damit nicht störend.

Beispiel der Darstellung:

h1 {
    color: #4F3A80;
    text-transform: uppercase;
}
.wichtig {
    font-weight: bold;
}

Manchmal kann es übersichtlicher sein, wenn die Regeln jeweils in einer einzigen Zeile stehen.

Selektor {Eigenschaft: Wert; Eigenschaft: Wert;}

Beispiel der Darstellung

h1 {color: #993333; font-size: 2.5em; margin-top: 2.5em;}
h2 {color: #CC3333; font-size: 1.8em; margin-top: 1.8em;}
h3 {color: #FF3333; font-size: 1.5em; margin-top: 1.5em;}

zum Anfang der SeiteKommentare

Kommentare: In den CSS-Code (und anderen formalen Sprachen) kann man auch Kommentare einfügen. Das sind Texte, die der Browser ignoriert und nicht benutzt. Kommentare dienen der/dem AutorIn, um Zusatzinformationen an beliebigen Stellen im Code zu schreiben: z.B. um Stellen zu markieren und wiederfinden, Erläuterungen oder Hinweise zu haben etc.

In CSS beginnt ein Kommentar mit /* und mit */ endet er (in HTML: <!-- und -->). Alles was dazwischen geschrieben steht, wird vom Browser nicht interpretiert.

Da Kommentare vom Browser nicht interpretiert werden, kann man hier Umlaute und Sonderzeichen verwenden

Vorsicht: Der gesamte Text zwischen /* und */ (bzw. <!-- und -->) ist Kommentar und wird ignoriert, auch um einen Zeilenumbruch herum. Will man Kommentare über zwei Zeilen verfassen, so dürfen keine CSS-Regeln dazwischen sein. Ansonsten muss man den Kommentar in zwei Teile teilen.
Beispiele aus HTML, CSS und andere Sprachen funktionieren gleichermaßen::