Cascading Stylesheets (CSS)

CSS ist eine Ergänzungssprache zu HTML. CSS dient zur Formatierung von HTML-Seiten, vergleichbar mit Formatvorlagen in Word.

CSS ist heute Standard für die Formatierung von HTML-Seiten. Der HTML-Code legt nur mehr die Grundstruktur der Seiten fest, sämtliche Formatierungen werden mit CSS definiert.

Die Formatierungen können mit dem style-Attribut direkt im betreffenden Tag eingegeben werden, meist werden sie aber in den Head-Bereich geschrieben oder in eine eigene CSS-Datei, die dann in die HTML-Datei verlinkt wird. Die letzte Möglichkeit hat den Vorteil, dass man diese CSS-Datei auf verschiedene HTML-Seiten anwenden kann. Man braucht damit nicht jede Seite extra formatieren und man hat für alle Seiten ein einheitliches Design.

Die Formatierungen können dann im Body-Bereich auf HTML-Tags generell angewendet werden (z.B. auf <p> oder <h1>) oder es können eigene Klassen (mit beliebigem Namen) erstellt werden, die mit dem Attribut class="Name der Klasse" auf jedes beliebige Tag angewendet werden können. Weiters kann man eine ID definieren, die dann meist nur auf ein spezifisches Element mit dieser ID angewendet wird. Außerdem sind noch sogenannte Pseudoformate oder zusammengesetzte Formate möglich.

Beisiel 1: Formatierung eines spezifischen Tags mit dem style-Attribut

Absatz 1

Abstatz 2

Betrachte den Code im Body-Bereich im betreffenen p-Tag.

Übung: Wende den style auch auf Absatz 2 an, mit anderer Farbe und Schriftgröße. Was ist der Nachteil dieser Methode?

Beispiel 2: Formatierung eines Tags <h1> im Head-Bereich

Hauptüberschrift 1

Hauptüberschrift 2

Betrachte den Code im Head-Bereich und erstelle dieses Beispiel.

Übung: Wende die Formatierung auf Hauptüberschrift 2 an. Was ist der Vorteil dieser Methode?

Beispiel 3: Erstellung einer Klasse im Head-Bereich und Anwendung auf eine Überschrift

Hauptüberschrift 3

Absatz

Betrachte den Code im Head-Bereich und die Anwendung auf die Überschrift mit dem Attribut class. Mache dies nach. Beachte, die Formatierung der Klasse hat Vorrang gegenüber der generellen Formatierung des h1-Tags.

Übung: Wende diese Formatierung auf den 1. Absatz nach der Überschrift in dieser Datei an.

Beispiel 4: Erstellung einer eigenen CSS-Datei, in der der Body-Tag definiert werden soll und eine ID, die auf dieses Wort angewendet werden soll.

Betrachte den Code in der CSS-Datei ("css-Datei") und die Verlinkung in dieser Datei im Head-Bereich. Beachte bei der Anwendung der ID auf das Wort, dass ein Tag vorhanden sein muss, auf den die ID angewendet werden kann. Für ein einzelnes Wort, kann man den Tag <span> verwenden.

Übung: Erstelle eine zweite HTML-Datei, in der du z.B. deinen Namen rein schreibst. Verlinke darin die eben erstellte CSS-Datei. Erstelle in der CSS-Datei eine zweite ID (z.B ID2) mit beliebiger Formatierung und wende diese auf deinen Nachnamen an.