In diesem Tutorial, das sich in erster Linie an Einsteiger in Sachen Webdesign wendet, geht es um die Frage, auf welche unterschiedlichen Weisen man die CSS-Anweisungen eigentlich mit dem HTML verknüpfen kann.
externe CSS-Datei
Die erste und zugleich empfehlenswerteste Methode ist es, ein externes Stylesheet zu verwenden. Dies bedeutet, dass alle Formatierungsangaben in eine eigene Datei geschrieben und somit ausgelagert werden. Dieses Stylesheet bindet man im Head-Bereich der Seite ein, sodass der Browser darauf zugreifen und die Webseite entsprechend darstellen kann. Bei dieser Methode spricht man von dokumentübergreifenden Stylesheet-Regeln – das Stylesheet kann von beliebig vielen Unterseiten einer Webseite und sogar von anderen Webseiten aus angesprochen werden.
Wichtig ist, dass man hier so viele unterschiedliche Stylesheets einbinden kann, wie man denn möchte. So bietet es sich bei umfangreichen Formatierungsanweisungen etwa an, ein Stylesheet für die Navigation zu erstellen, eines für das Verhalten der unterschiedlichen Links und eines für den Rest.
Es gibt zwei verschiedene Möglichkeiten, externe Stylesheets einzubinden.
Die geläufigere von beiden stellt folgende Notation dar:
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
Bei Bedarf kann man noch das Attribut media hinzufügen, um für die verschiedenen Ausgabemöglichkeiten – etwa screen für die gewohnte Darstellung am Monitor, oder print für die Druckversion der Seite – jeweils eigene Formatierungen festzulegen. Es ist beispielsweise ratsam, unabhängig vom Web-Layout den Hintergrund der Druckversion als weiß und die Schriftfarbe als Schwarz festzulegen.
<head>
<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css" media="print" />
</head>
Eine Übersicht über die zahlreichen verschiedenen Ausgabemedien, und wie man sie anspricht, findet sich hier auf SelfHTML.
Alternativ zu der oben beschriebenen Methode, die mit dem link-Tag ja die HTML-Syntax verwendet, kann man externe Stylesheets auch mit Hilfe der CSS-Syntax einbinden. Das Ergebnis ist das gleiche. ;-)
<head>
<style type="text/css">
@import url("screen.css") screen;
@import url("print.css") print;
</style>
</head>
Ob man nach der Klammer nach einem Leerzeichen noch das jeweilige Ausgabemedium angibt, ist optional.
dokumentweite Anweisungen
Die zweite Möglichkeit ist, die CSS-Anweisungen innerhalb des style-Tags im Header zu platzieren. Dadurch müssen sie auf jeder Seite von Neuem notiert werden, was im Zweifelsfall dazu führt, dass man bei einer Styleänderung Dutzende von Dateien anpacken muss. Dementsprechend bezeichnet man sie als dokumentweite Stylesheet-Regeln.
In den meisten Fällen ist diese Methode also ziemlich unpraktisch, da sie unnötig Arbeit macht, und man sollte auf sie verzichten. Aber sie macht durchaus Sinn, wenn man die Formatierungsanweisungen aus dem externen Stylesheet auf nur einigen Seiten umändern möchte: die dokumentweiten Anweisungen haben nämlich Vorrang vor den dokumentübergreifenden – das heißt, wenn eigentlich sämtliche Links auf einer Webseite rot sein sollen und nur diejenigen auf der blubb.html blau, dann definiert man das rot in einer externen CSS-Datei und das Blau gesondert im head-Bereich der Datei blubb.html.
Das dokumentweiten Anweisungen notiert man wie folgt:
<head>
<style>
hier stehen die Anweisungen
</style>
</head>
das style-Attribut
Als letztes wäre das style-Attribut zu nennen, mit dem man jedes beliebige Element gesondert formatieren kann:
<p style="margin-left: 30px;">blah</p>
Wie man unschwer erraten kann, macht es die Verwendung dieser individuellen Stylesheet-Regeln noch viel mühseliger, wenn man einmal etwas am Layout verändern möchte. Aus diesem Grund sollte man möglichst darauf verzichten, diese Methode zu verwenden.
Allerdings gilt auch hier wieder, dass sie durchaus ihre Daseinsberechtigung hat, um einzelnen Elementen eine abweichende Formatierung zu verleihen. Denn die Angaben innerhalb des style-Attributs haben eine höhere Wertigkeit als die dokumentweiten Regeln (und sowieso eine höhere als die dokumentübergreifenden).
Falls jemand zufällig Eclipse in der aktuell vorliegen Version Ganymede verwendet: Die @import Anweisung führt dazu, dass sich die Seiten im Eclipse eigenen Texteditor nicht mehr öffnen lassen.