2. Css: Formatierung und Anordnung mit Cascading Style Sheets

2.1 Gezielt Elemente per Css gestalten: Tags und Klassen

Css erlaubt Ihnen, zentral die Layout-Eigenschaften von HTML-Elementen zu verändern. Wenn Sie zum Beispiel erreichen wollen, dass alle <h1>-Überschriften nicht schwarz sondern blau erscheinen, dass können Sie das im Inline-Stil mit <h1 style="color:blue">Einführende Beispiele</h1> erreichen. Ein Beispiel sehen Sie in der Datei css-styling-h1-00.html. Bitte betrachten Sie unbedingt auch den Quellcode dieser Datei.

Den gleichen Effekt erreichen wir in css-styling-h1-01.html, indem wir die Fontfarbe blau per Css für alle <h1>-Tags definieren. Beachten Sie die neuen Zeilen im Head des HTML-Dokuments:

<style>
    h1 {
        color: blue;
    }
</style>

Was Sie zwischen dem <style>-Tag und dem schließenden </style>-Tag sehen, ist Css-Code. Im Allgemeinen folgt Css-Code diesem Format:

Wir können auch mehrere Elemente gleichzeitig ansprechen und mehrere Properties gleichzeitig definieren:

<style>
    h1, h2,h3 {
        color: blue;
        text-decoration: underline;
    }
</style>

Ein Beispiel sehen Sie in der Datei css-styling-h1-02.html. Wenn Ihr Css-Code eine gewisse Größe angenommen hat und insbesondere, wenn Sie den gleichen Code in mehreren HTML-Dokumenten verwenden wollen, sollten Sie ihn unbedingt in eine eigene .css-Datei auslagern. Sie binden ihn in die HTMl-Datei ein, indem Sie im Head folgende Zeile einfügen

<link rel="stylesheet" type="text/css" href="example.css"/>

und dann einfach den Css-Code ohne <style>-Tags in die Datei example.css (oder wie auch immer Sie sie nennen wollen) einfügen:

h1, h2, h3 {
    color: blue;
    text-decoration: underline;
}

Das Ergebnis sieht genau gleich aus, so zum Beispiel in der Datei css-styling-h1-03.html. Hier nochmal alle vier Beispieldateien zur Übersicht:

• css-styling-h1-00.html
• css-styling-h1-01.html
• css-styling-h1-02.html
• css-styling-h1-03.html

Sie haben nun im Prinzip gelernt, wie man für alle HTML-Elemente eines bestimmten Tag-Typs (zum Beispiel alle <h1>-Elemente) den Stil festlegt oder verändert. Ab jetzt gilt es, zwei Bereiche zu verstehen:

1. Auf welche Weise kann ich aus Css heraus HTML-Elemente gezielt ansprechen?
2. Welche Stilparameter kann ich wie verändern?

Auf die Frage, wie man denn den Stil definieren sollte, also zum Beispiel damit es gut, modern, chic, übersichtlich aussieht, darauf können wir nur beschränkt eingehen; es ist ja ein Kurs über Web-Engineering, nicht Web-Design.

Css-Klassen

Css-Kombinatoren

Sie haben zwei Weisen gelernt, HTML-Elemente von Css aus anzusprechen. Mit

xyz {
   property1: value1; 
   property2: value2;
}

setzen Sie die entsprechenden Eigenschaften für alle <xyz>-Elemente, also für alle Elemente, die durch einen <xyz>-Tag erzeugt worden sind. Die andere Weise ist über Klassen. Mit

.werbhjzxsdfjklw {
   property1: value1; 
   property2: value2;
}

setzen Sie die Eigenschaften für alle HTML-Elemente, die die Klasse werbhjzxsdfjklw besitzen; das heißt also, die durch einen Tag der Form <bla class="werbhjzxsdfjklw"> erzeugt worden sind. Der Terminus Technicus dafür lautet Css-Selektor. In unserem obigen Beispiel ist xyz ein Tag-Selektor, weil er alle HTML-Elemente eines gewissen Tags auswählt. Dahingegen ist .werbhjzxsdfjklw ein Klassen-Selektor, weil er alle Elemente mit Klasse .werbhjzxsdfjklw auswählt.

Sie können Selektoren kombinieren. Sie haben weiter oben schon h1, h2, h3 { ... } kennengelernt: das wählt alle Elemente aus, deren Tag <h1> oder <h2> oder <h3> ist. Ein weiterer häufiger Kombinator ist zum Beispiel tagname.classname {...} wie in

pre.racket {
   ...
}

was alle <pre>-Elemente auswählt, bei denen die Klasse racket gesetzt ist. Eine Liste vieler Kombinatoren finden Sie auf w3schools. Ich empfehle Ihnen, alles nach den ersten neun Selektoren erstmal zu ignorieren.

Fehlerquelle. Bitte beachten Sie, dass Css-Klassennamen immer mit voran gestelltem Punkt anspricht, also .keyword und .python und .code-comment. Wir tun dies auch, wenn wir über Klassennamen reden. Vergessen Sie aber nicht, dass der Klassenname, wenn er im HTML-Dokument gesetzt wird, ohne Punkt angegeben werden muss, also <pre class="python"> und nicht <pre class=".python">. Letzteres ist bei mir eine beliebte häufige Fehlerquelle.