CSS Tutorial – Die Syntax

Der CSS-Syntax im Detail

Eine CSS-Regel besteht aus zwei Hauptteilen: einem Selektor und einer oder mehreren
Deklarationen. Zusammen bestimmen sie, wie Elemente auf einer Webseite formatiert werden.

Der Selektor bestimmt, welches Element oder welche Gruppe von Elementen formatiert wird.

Die Deklarationen innerhalb des Blockes legen fest, wie das gewählte Element
aussehen soll. Jede Deklaration besteht aus einer Eigenschaft und einem
Wert, getrennt durch einen Doppelpunkt (:) und abgeschlossen mit einem
Semikolon (;). Der gesamte Deklarationsblock ist von geschweiften Klammern
{ } umgeben.

Beispiel einer kompakten CSS-Regel:

h1 { color: blue; text-align: center; }

Für bessere Lesbarkeit sollten Deklarationen jedoch **immer in separaten Zeilen** geschrieben werden:

h1 {
    color: blue;
    text-align: center;
}

In diesem Beispiel ist h1 der Selektor, color und
text-align sind CSS-Eigenschaften, deren Werte blue und
center lauten.

Kommentare in CSS schreiben

Kommentare dienen der besseren Verständlichkeit des Codes. Sie sind besonders nützlich, wenn mehrere
Personen am selben Stylesheet arbeiten oder wenn du selbst später noch nachvollziehen möchtest, warum
du etwas auf eine bestimmte Art umgesetzt hast. Kommentare werden von Browsern ignoriert und haben
keinen Einfluss auf die Darstellung der Seite.

Ein Kommentar beginnt mit /* und endet mit */:

/* Dies ist ein Kommentar */
h1 {
    color: blue;
    text-align: center;
}

/* Und das ist ein Kommentar,
   der mehrere Zeilen hat */
p {
    font-size: 18px;
    text-transform: uppercase;
}

Kommentare können auch genutzt werden, um Teile des Codes für Debugging-Zwecke auszuschalten:

h1 {
    color: blue;
    text-align: center;
}

/*
p {
    font-size: 18px;
    text-transform: uppercase;
}
*/

Groß- und Kleinschreibung in CSS

CSS-Eigenschaftsnamen und die meisten Werte sind **nicht** case-sensitive. Das bedeutet:
color und COLOR funktionieren identisch. Selektoren hingegen können
case-sensitive sein, insbesondere wenn sie auf Klassen oder IDs verweisen.

Beispiel: Der Klassenselektor .maincontent ist nicht derselbe wie
.mainContent. Aus Gründen der Konsistenz solltest du immer davon ausgehen, dass
Schreibweise wichtig ist.

Im nächsten Kapitel beschäftigen wir uns mit den verschiedenen

Arten von CSS-Selektoren.