CSS-Regeln

Aufbau einer Regel

Die Formatierung einzelner HTML-Elemente wird in CSS mit Hilfe von Regeln festgelegt. Eine typische CSS-Regel sieht so aus:

em
{
  color: blue;
  font-weight: bold;
}

Die vorliegende Regel legt Eigenschaften zur Darstellung eines <em>-Elements fest: Die Schriftfarbe soll hier blau sein und zudem soll die Schrift fett dargestellt werden.

Eine Regel beginnt immer mit einem sogenannten Selektor - das ist hier der Elementname ohne die spitzen Klammern. Die Festlegung der zugehörigen Eigenschaften folgt in geschweiften Klammern. Jeder Eigenschaft wird hier ein Wert zugewiesen. Die verschiedenen Zuweisungen werden jeweils mit einem Semikolon abgeschlossen.

Will man gleiche Eigenschaften für verschiedene Elemente festlegen, so kann man Regeln auch wie folgt zusammenfassen:

h1, em
{
  font-weight: bold;
  font-style: normal;
}

Aber Achtung: Wenn man das Komma in der Regel oben weglässt, so ergibt sich eine ganz andere Bedeutung. Im nächsten Abschnitt werden wir genauer hierauf eingehen.

Aufgabe

Erstelle eine neue Datei mit CSS-Regeln und speichere sie unter einem geeigneten Namen (z. B. meinStil.css) im selben Verzeichnis wie der HTML-Quelltext ab. Vergiss nicht, den HTML-Quelltext mit den CSS-Regeln zu verknüpfen. Kontrolliere die Ergebnisse mit dem Browser.