CSS Einführung
Warum überhaupt Cascading Style Sheets?
Warum Sie sich mit Cascading Style Sheets (CSS) beschäftigen sollten, erfahren Sie in diesem ersten Kapitel.
Am besten lässt sich diese Frage an dem folgenden Beispiel erörtern:
Stellen Sie sich eine kleine Tabelle mit einer Zeile und fünf Spalten vor. Der Inhalt der fünf Zellen soll immer gleich formatiert sein, also die gleiche Schriftart (Verdana), -größe (4) und -farbe (Rot) besitzen.
Damit die Tabelle auf den gängigsten Browser gleich aussieht, müsste der Quelltext folgendermaßen aussehen:
<TABLE border="1"> <TR> <TD><FONT color="red" face="verdana" size="4">Rhede</FONT></TD> <TD><FONT color="red" face="verdana" size="4">Bocholt</FONT></TD> <TD><FONT color="red" face="verdana" size="4">Berlin</FONT></TD> <TD><FONT color="red" face="verdana" size="4">Köln</FONT></TD> <TD><FONT color="red" face="verdana" size="4">München</FONT></TD> </TR> </TABLE>
Bei der Erstellung der Tabelle mit purem HTML, müssen Sie fünf Mal den gleichen FONT-Tag benutzen.
Die gleiche Tabelle - mit Hilfe von CSS formatiert - sieht so aus:
<TABLE border="1"> <TR> <TD>Rhede</TD> <TD>Bocholt</TD> <TD>Berlin</TD> <TD>Köln</TD> <TD>München</TD> </TR> </TABLE>
Im Kopf-Bereich (HEAD) oder in einer externen CSS-Datei müssen dabei noch die nachstehenden Angaben notiert sein:
TD {
color: red;
font-family: verdana;
font-size: large;
}
Unschwer lässt sich erkennen, dass Sie sich bei der zweiten Variante jede Menge Tipparbeit erspart haben. Auch ist der Quelltext der zweiten Tabelle deutlich kleiner. Natürlich ließe sich der FONT-Tag auch einmal schreiben und dann entsprechend oft über die Zwischenablage an den richtigen Stellen einfügen. Und die aus dem umfangreicheren Quellcode resultierende höhere Dateigröße stört heutzutage sowieso kaum noch jemanden (der immer noch existente einfache Modem-Benutzer wird es Ihnen danken). Was Sie aber des Weiteren bedenken sollten: die Tabelle könnte nicht nur 5, sondern 50 oder gar 500 Zellen haben. Bei der Benutzung des Stylesheets spielt das keine Rolle, bei der ersten Variante fällt erheblich mehr Tipp- beziehungsweise Kopierarbeit an und die Datei wird weiter unnötig aufgebläht. Aber es geht noch viel schlimmer: Sie haben 500 Seiten, in denen sich jeweils eine solche Tabelle befindet. Spätestens jetzt wird klar, dass ein solches Stylesheet erhebliche Vorteile bietet. Am Rande sei bemerkt, dass der FONT-Tag seit HTML 4.0 vom W3 Consortium als veraltert markiert ist; und dieser Standard wurde bereits am 18. Dezember 1997 veröffentlicht. Stattdessen wird die Benutzung von CSS-Angaben empfohlen.
Es gibt aber noch weitere Vorteile für den Einsatz von Stylesheets in einer Webseite:
Durch wenige Zeilen Quelltext können Sie einer gesamten Webseite ein einheitliches Design geben.
Sie können mit Stylesheets viele Eigenschaften der Webseite anpassen, die in reinem HTML nicht zu verändern wären (z.B. letter-spacing - der Abstand zwischen einzelnen Zeichen eines Wortes).
Viele weitere Einsatzmöglichkeiten und Vorteile (z.B. die “Cascade” - die Vererbung bestimmter Formatierungseigenschaften) ergeben sich im Laufe dieses Tutorials.
CSS und HTML
Grundsätzlich existieren zwei unterschiedliche Möglichkeiten, wie Sie CSS-Befehle in einem HTML-Dokument unterbringen können. Einerseits können Sie den CSS-Quellcode direkt im Dokument selbst, andererseits in einer externen CSS-Datei notieren.
Bei der ersten Variante notieren Sie die Stylesheet-Angaben entweder im Kopf der Webseite (zwischen
und ) oder Sie beeinflussen einen Tag direkt mit Hilfe des Attributes style=”".
<HTML>
<HEAD>
<TITLE>CSS und HTML</TITLE>
<LINK href="style.css" rel="stylesheet" type="text/css">
<STYLE type="text/css">
<!--
TD {
color: red;
font-family: verdana;
font-size: large;
}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Städte in Deutschland</H1>
<TABLE border="1">
<tr>
<TD>Rhede</TD>
<TD>Bocholt</TD>
<TD>Berlin</TD>
<TD>Köln</TD>
<TD>München</TD>
</TR>
</TABLE>
<SPAN style="color:#0000FF;font-family:verdana;font-size:x-small;">
Wichtige Städte in Deutschland
</SPAN>
</BODY>
</HTML>
Das obige Beispiel ist dabei folgendermaßen aufgebaut:
Man sieht hier die Einbindung eines externen Stylesheets
<LINK href="style.css" rel="stylesheet" type="text/css">
Das Attribut href=”" gibt bei diesem Tag den Pfad an, wo sich die Datei style.css befindet. Erlaubt sind hier alle gültigen HTTP-URLs (”http://www.meinedomain.de/style.css”) sowie relativen Pfade (”../..styles/style.css”).
Die Datei “style.css” sieht dann so aus:
H1 {
color: lime;
font-family: verdana;
text-align: center;
}
Diese Datei ist für die Formatierung der Überschrift über der Tabelle zuständig und nicht - wie das folgende Stylesheet im HTML-Dokument - für die Tabelle selbst.
Allgemein sieht eine Stylesheet-Definition in einer HTML-Seite demnach folgendermaßen aus:
<STYLE type="text/css"> <!-- --> </STYLE>
Diese Angabe wird immer im Kopf-Bereich der Webseite notiert und die Stylesheet-Angaben sind nur für diese HTML-Seite gültig. Zuerst wird angeben, dass der folgende Bereich Stylesheet-Angaben enthält (). Um Stylesheet-Definitionen vor versehentlichen Fehlinterpretationen älterer Browser zu schützen, sollten die Angaben innerhalb eines Kommentars notiert werden.
Die letzte Möglichkeit ein Stylesheet zu notieren, ist die direkte Angabe in einem HTML-Tag mit Hilfe des STYLE-Attributes - wie bei der Tabellen-Unterschrift. Um Bereiche einzuteilen, können Sie wie in diesem Beispiel den SPAN-Tag verwenden.
Dies sind die gängigsten Möglichkeiten Stylesheets in einem HTML-Dokument zu verwenden, in den nächsten Kapiteln des Tutorials geht es um die Struktur eines Stylesheets.