Aufbau einer CSS-Anweisung

Eine CSS-Anweisung setzt sich zusammen aus einem Selektor und den Eigenschaften, die der Selektor annehmen soll. Die zugewiesenen Eigenschaften werden in geschweiften Klammern { } hinter den Selektor geschrieben. Innerhalb der Klammern wird zunächst die Eigenschaft genannt, gefolgt von einem Doppelpunkt, dem Wert der Eigenschaft und einem Semikolon.

Selektor x {Eigenschaft: Wert;}

Der Selektor kann auch als Gruppe von Elementen angegeben werden. Das hat den Vorteil, dass man eine Anweisung, die für mehrere Elemente gleichermaßen gelten soll, im CSS nur einmal definieren muss.

Beispiel 1: Ein Selektor mit mehreren Eigenschaften

Selektor y {
	Eigenschaft1: Wert-a;
	Eigenschaft2: Wert-b;
}

Beispiel 2: Eine Gruppe von Selektoren mit einer Eigenschaft

Selektor y, Selektor z {
	Eigenschaft: Wert-c;
}

Bei der Eingabe der CSS-Anweisung sind Sie frei in der Gestaltung: Solange die Syntax eingehalten wird, können Sie den Leerraum um die Anweisung herum frei gestalten. Um Syntaxfehler zu vermeiden und die Übersichtlichkeit der Anweisungen zu erhöhen, werden zum Beispiel die Eigenschaften häufig in einzelne Zeilen geschrieben.

Beispiel 3: CSS-Anweisung für die Überschrift h1, jede Eigenschaft auf einer eigenen Zeile

h1 {
	font-size: 1.8em;
	margin: 0 5 px;
	color: #3F84B4;
	font-weight: bold;
}

CSS-Anweisungen im CSS-Modell eintragen

Ihre Anweisungen geben Sie direkt im Editor des CSS-Modells ein.

CSS-Anweisungen zur feldgenauen Layout-Definition

In einem CSS-Modell können Sie das Layout feldgenau festlegen. Dies kann hilfreich sein, wenn beispielsweise ein Feldbezeichner aufgrund des Hintergrunds schwer lesbar ist.

Beispiel: Die schwarze Überschrift der Eingabefelder Vorname und Nachname ist aufgrund des dunklen Hintergrunds nicht lesbar

Für eine feldgenaue Definition des Layouts gibt es in einem CSS zwei Varianten: Man kann das Layout für ein Feld mit Hilfe seines eindeutigen Feldbezeichners festlegen oder eine Zusatzklasse definieren.

Layout-Definition über den Feldbezeichner

In dieser Variante wird das zu ändernde Feld im CSS über eine eindeutige ID, seinen Feldbezeichner, angesprochen.

Layout-Definition über eine CSS-Zusatzklasse

Eine zweite Variante, das Layout für ein bestimmtes Formularfeld festzulegen, ist das Zuweisen einer Zusatzklasse. Zusatzklassen haben den Vorteil, dass man sie auch für weitere Felder verwenden kann, sollte dies im Laufe der Layoutarbeiten nötig sein. In unserem Beispiel sind von dem dunklen Hintergrundbild gleich zwei Eingabefelder betroffen. Statt im CSS für beide Felder jeweils eine weiße Überschrift zu definieren, reicht es aus, eine CSS-Zusatzklasse zu erstellen.

Häufig genutzte CSS-Eigenschaften