Tutorials zur Webentwicklung

1.4 Der CSS-Code

CSS Code besteht aus einer Aneinander­reihung von CSS Eigen­schaften. Diese Eigen­schaften werden bestimmten HTML Elementen zu­geordnet und sorgen für deren Aus­sehen.

HTML Element
  |
 <h1>Willkommen auf unserer Internetseite</h1>

 (Mit CSS können wir einem HTML Element Layout­eigenschaften zuweisen!)

Die Zu­ordnung zu den HTML Elementen kann auf ver­schiedene Arten realisiert werden. In unserem Beispiel hängen wir eine CSS Eigen­schaft direkt als Attribut an das ent­sprechende Element.

Öffnen Sie das HTML Dokument aus Ihrem Projekt­ordner. Ändern Sie den Code wie im folgenden Listing dar­gestellt. Speichern Sie die Datei ab und betrachten Sie das Ergebnis.

Erste Veränderung

Wir erweitern den HTML Code um ein style="..." Attribut im öffnenden <h1> Element und notieren als Wert die CSS Regel color: #B40000; um die Schrift­farbe zu ändern.

<h1 style="color: #B40000;">Willkommen auf unserer Internetseite</h1>

Ansicht im Browser

Betrachten wir nun das bearbeitete Dokument, so erhalten wir das folgende Ergebnis.

Yeah! Wir haben eine CSS Regel erfolg­reich auf ein HTML Element über­tragen!

1.4.1 CSS Regeln

Der Auf­bau von CSS Regeln ist denk­bar simpel. In Listing 1.4.1 haben wir eine Regel direkt einem HTML Element zu­geordnet. Dazu haben wir das style="..." Attribut genutzt.

<h1 style="color: #B40000;">Willkommen auf unserer Internetseite</h1>

CSS Regeln bestehen aus einem Eigen­schaft-Wert Paar. Die Eigen­schaften werden uns vor­gegeben und erwarten bestimmte Werte.

Eigenschaft: Wert;

So kann zum Beispiel die Eigen­schaft color auf das <h1> Element an­gewendet werden. Als Wert erwartet diese Eigen­schaft einen Farb­wert. Der Farb­wert wird, durch einen Doppel­punkt getrennt, der Eigen­schaft angehängt. Nach dem Doppel­punkt darf ein Frei­zeichen stehen. Die komplette Regel wird mit einem Semikolon (;) be­endet!

color: #B40000;