Um uns überhaupt mit den Designmöglichkeiten von CSS vertraut zu machen, benötigt man zuerst einmal etwas, das man designen können. Dazu braucht es eine HTML-Datei mit einem einfachen Grundgerüst: Einer Überschrift und einem Absatz.
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
</head>
<body>
<h1>Ich bin eine Überschrift</h1>
<p>Ich bin ein Absatz.</p>
</body>
</html>
Nachdem man die Seite gespeichert und im Browser geöffnet hat, sollte die Überschrift und der Absatz wie gewohnt angezeigt werden. Wir werden die Überschrift jetzt farblich herausheben, indem wir mittels eines Selektors allen <h1>-Tags auf der Seite eine Farbe zuweisen. Das würde wie folgt aussehen:
[tag] {
[attribut]: [wert];
}
Also in unserem Beispiel konkret:
h1 {
color: red;
}
Sofern man den CSS-Code in der gleichen Datei wie den Inhalt speichert (mehr dazu im nächsten Kapitel), wird dieser in den <head>-Bereich des Dokuments geschrieben – und zwar mit den Tags <style> und </style> begrenzt. Das HTML-Dokument hat also nun folgende Form:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
H1 {
Color: red;
}
</style>
</head>
<body>
<h1>Ich bin eine Überschrift</h1>
<p>Ich bin ein Absatz.</p>
</body>
</html>
Sehen Sie sich nun das Ergebnis im Browser an.
Der Selektor beschreibt dabei immer, welches Element bzw. welches HTML-Tag nun das im CSS-Code bestimmte Design übernehmen soll – im Beispiel oben die Farbe Rot für alle <h1>-Tags.
Was ist aber zu tun, wenn nicht alle Überschriften im Dokument dieselbe Farbe haben sollen? Dafür gibt es zwei „richtige“ Möglichkeiten und eine „schlampige“ Lösung. Fangen wir beim einfachsten an.
CSS-Klassen
Eine Klasse ist ein Selektor, der dafür bestimmt ist eine Gruppe von Elementen mit einem Design zu versehen. Wenn also beispielsweise nur manche Überschriften auf der Seite eingefärbt werden sollen, bestimmen wir im CSS-Code das Design nicht für das <h1>-Tag generell, sondern lediglich für eine Klasse, die wir definieren. Dieser Klasse werden dann die HTML-Tags, die das Design übernehmen sollen, mittels des class-Attributs zugeordnet. Im Falle unserer roten Überschrift würde das so aussehen:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
.farbig1 {
Color: red;
}
.farbig2 {
Color: blue;
}
</style>
</head>
<body>
<h1 class=“farbig1″>Ich bin rot</h1>
<h1 class=“farbig1″>Ich bin rot</h1>
<h1 class=“farbig2″>Ich bin blau</h1>
<h1 class=“farbig2″>Ich bin blau</h1>
<h1>Ich bin normal</h1>
</body>
</html>
Beachten wir, dass der Name einer Klasse im CSS-Code stets mit einem Punkt (.) eingeleitet wird. Dieser Punkt unterscheidet ihre selbst definierten Klassen von Standard-HTML-Tags (Klassennamen, die es auch als HTML-Tag gibt sind also theoretisch möglich, allerdings der Übersicht halber nicht zu empfehlen). Der Name einer Klasse darf weiters nur alphanumerische Zeichen enthalten und nicht mit einer Ziffer beginnen.
CSS-IDs
IDs funktionieren im Aufbau exakt gleich wie Klassen. Im Gegensatz zu Klassen werden IDs aber dazu verwendet, gezielt nur ein einziges Element auf der Website anzusprechen.
Eine ID sollte also in unserem Beispiel nur für genau eine Überschrift verwendet werden. Die Namen der von Ihnen definierten IDs beginnen im CSS-Code mit einem Rautezeichen (#). Das gewünschte HTML-Element wird der ID über das Attribut id zugeordnet.
Probieren wir es aus:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
#farbe1 {
Color: red;
}
#farbe2 {
Color: blue;
}
</style>
</head>
<body>
<h1 id=“farbe1″>Ich bin rot</h1>
<h1 id=“farbe2″>Ich bin blau</h1>
<h1>Ich bin normal</h1>
</body>
</html>
Spaghetti Code
Wie bereits angekündigt, gibt es neben den Klassen und IDs (den beiden „korrekten“ Selektoren) auch eine nicht so elegante Möglichkeit, um einzelne Elemente zu gestalten.
Aufgrund der Übersichtlichkeit im Code und der Ladezeit der Website sollte man den sogenannten Spaghetti Code tunlichst vermeiden. Da er aber zu Testzwecken manchmal schneller und einfacher zu implementieren ist, gehen wir darauf kurz ein.
Man spricht von „Spaghetti Code“, wenn CSS-Code nicht wie vorhin beschrieben, im <head> Bereich des Dokumentes sind, sondern über das style-Attribut direkt in das HTML-Tag geschrieben werden. Um bei unserem Beispiel zu bleiben:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
</head>
<body>
<h1 style=“color:red;“>Ich bin rot</h1>
<h1 style=“color:blue;“>Ich bin blau</h1>
<h1>Ich bin normal</h1>
</body>
</html>
Wenn man davon ausgeht, dass jedes Element im Durchschnitt fünf bis zehn CSS-Eigenschaften besitzt, bekommt man leicht einen Eindruck darüber, warum der exzessive Einsatz von Spaghetti Code verpönt ist.
Prinzipiell ist es auch möglich, ein HTML-Element auf mehreren Wegen gleichzeitig zu gestalten. Zum Beispiel, ihm sowohl eine Klasse als auch eine ID zuzuweisen und unter Umständen auch noch zusätzlich das style-Attribut zu benutzen. Dabei gilt es, die Prioritätenreihung zu beachten.
Was passiert also, wenn man für das <h1>-Tag die Farbe rot festlegt und es dann mit einer Klasse versehen, die ihm die Farbe blau gibt? Und wenn es dann noch einer ID zugeordnet ist, die es gelb machen möchte?
Wenn mehrere Parameter miteinander in Konflikt treten, setzt sich die Angabe durch, die dem zu gestaltenden Element am nächsten steht, also den schmalsten Fokus auf das Element hat:
Spaghetti > ID > Klasse > Generelles Design
Im genannten Fall würde das Element also die Farbe gelb annehmen, weil die ID die genaueste Beschreibung für das Element darstellt. Die ID könnte nun wiederum überschreiben werden, indem per style -Tag ein Spaghetti Code in das HTML-Tag direkt gesetzt wird.
Es werden allerdings nur die Eigenschaften innerhalb eines Definitionsbereichs (Klasse, ID, etc.) überschrieben, die schon gesetzt wurden. Ansonsten gilt das Additionsprinzip: Es kommen sowohl die Eigenschaften, die in der Klasse stehen, als auch die Eigenschaften aus der ID und dem Spaghetti-Code zum Tragen. Sehen wir uns dazu ein ausführlicheres Codebeispiel an.
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
.farbig1 {
Color: green;
}
#wichtiges1 {
Color: red;
}
#wichtiges2 {
Color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<h1 class=“farbig1″>Ich bin grün</h1>
<h1 class=“farbig1″ id=“wichtiges1″>Ich bin rot</h1>
<h1 class=“farbig1″ id=“wichtiges2″ style=“color:blue;“>Ich bin blau</h1>
<h1>Ich bin normal</h1>
</body>
</html>
Die Klasse farbig1 bestimmt für alle ihr zugehörigen Elemente die Farbe Grün, was bei der ersten Überschrift zum Tragen kommt. In der zweiten Überschrift wird die Farbe durch die ID wichtiges1 auf Rot geändert, da eine ID eine höhere Priorität hat, als eine Klasse. In der dritten Überschrift verwenden wir die ID wichtiges, welche ebenfalls die Farbe rot erzwingt und außerdem den Text unterstreicht (text-decoration – mehr zu dieser Property in den späteren Kapiteln). Die Unterstreichung wird übernommen, die Farbe wird allerdings durch das im Spaghetti Code definierte Blau abgelöst.
Wir werden uns in den folgenden Kapiteln noch zahlreiche weitere Selektoren und Propertys ansehen. Lassen wir uns der Form halber aber vorerst zu einem anderen Thema übergehen.