Grundsätzliches über CSS

Was ist CSS und warum man es verwenden sollte

Kaskadenbrunnen

Dieses Bild basiert auf dem Bild "Kaskadenbrunnen aus Stein" aus der freien Enzyklopädie Wikipedia und steht unter der GNU-Lizenz für freie Dokumentation. Der Urheber des Bildes ist Don Bühl.

CSS ist die Abkürzung für "Cascading-Style-Sheets". Übersetzt man das mit "Kaskadierenden Stil-Blättern" ist man auch noch nicht viel weiter. Stellt euch vielleicht mal einen Kaskadenbrunnen vor, wo das Wasser Stufe um Stufe von oben nach unten fließt. So ähnlich funktioniert CSS: Elementeigenschaften, die auf einer höheren Ebene definiert werden (z.B. die Hintergrundfarbe im Body) setzen sich in untergeordnete Ebenen (z.B. in den Head- oder Navi-Bereich) fort, was man auch als "Vererbung" bezeichnet. Dennoch kann man die untergeordneten Elemente abweichend von den übergeordneten formatieren. Einmal abgesehen von diesem nützlichen Effekt lässt sich CSS vereinfacht vielleicht auch so zusammenfassen:

CSS ist eine Formatierungssprache mit der das Format einer Homepage definiert wird. Während HTML (Textbeschreibungssprache) für den Inhalt einer Seite verantwortlich ist, wird über CSS die Formatierung vorgenommen. Mit CSS wird also z.B. definiert, wie groß bestimmte Objekte sein sollen, an welchen Stellen sie positioniert werden, welchen Abstand sie voneinander haben, welche Farben Schrift und Hintergrund sie haben, wie die Links einer Navigation gestaltet werden - kurz: wie eben das gesamte Layout und die Formatierung aussehen soll.

Das hat mehrere Vorteile:
Dadurch, dass sich HTML auf den Inhalt beschränkt, wird der Quelltext äußerst übersichtlich, denn er enthält eben nur diesen Inhalt. Durch entsprechende Auszeichnungen wird eine Referenz zu CSS hergestellt und die Formatierung übernommen. Damit kann man auf eine Vielzahl vordefinierter Elemente zurückgreifen und muss im HTML-Teil nicht immer wieder auf's Neue Formatierungsangaben machen. Das erspart natürlich auch Zeit bei einem Layoutwechsel. Ist man die rosa-rote Hintergrundfarbe seiner Website leid, so ändert man nur an einer Stelle (wir kommen darauf später zurück) den Farbcode und hat sich die Arbeit erspart, Änderungen auf jeder Einzelseite vorzunehmen.

Bis heute werden HTML-Tabellen nicht nur für strukturierte Darstellungen, sondern gerade auch für das Gesamtlayout einer Homepage verwendet. Das macht mitunter den Quelltext nicht nur äußerst umfangreich und unübersichtlich, sondern auch anfälliger für Code-Fehler. Mit CSS werden Tabellen für reine Layoutzwecke (nahezu) überflüssig.

Die Möglichkeiten von CSS sind äußerst vielfältig, aber das wird sich im Laufe des Kurses noch zeigen. Am Ende des Einsteigerkurses solltet ihr in der Lage sein, eine einfache Homepage mit Header, Navi und Content in Kombination von HTML und CSS zu erstellen.

Weiter geht's mit einigen vorbereitenden Maßnahmen.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: