Grundlagen CSS
Einleitende Worte
Die folgende "Einführung in CSS" setzt voraus, dass Kenntnisse in HTML-Programmierung vorhanden sind und erklärt nach und nach die Einsatzmöglichkeiten von CSS. Als Leitfaden dazu dienten u.a. die Ausführungen von R. Maroufi, die mir nicht unwesentlich geholfen haben, dabei nicht die Übersicht in diesem umfangreichen Themenkomplex zu verlieren. Los geht es mit dem ersten Kapitel ...
Einbinden von CSS in HTML
Kapitel 1
Es gibt verschiedene Varianten, wie man CSS-Formatierungsbefehle in HTML einbinden kann - je nachdem, was genau man erreichen möchte. So bietet es sich an, einen Formatierungsbefehl direkt im HTML-Tag vorzunehmen, wenn es sich tatsächlich nur um eine einmalige Formatierung handelt.
Beispiel
(Direktformatierung)
style zur Anwendung, welches direkt im HTML-Tag angewendet wird.
<h2 style="color:#D57B15;">Beispiel</h2>
Das bewirkt, dass das Wort "Beispiel" NUR in diesem Fall in einem Orange-Ton dargestellt wird. Und so sieht das Ergebnis aus:
Beispiel
Geht es darum, nur eine Seite zu gestalten, so kann man die Formatierungbefehle im Head-Bereich einer HTML-Datei vornehmen.
Dazu wird zwischen
<head> und </head>, das Tag <style> verwendet und dann alle Format-Befehle, die für diese Seite gelten sollen, dahinter geschrieben. Nicht vergessen: Den Bereich wieder zu schliessen. Das geschieht mit </style>.
Beispiel
(Dateibezogene Formatierung)
<p> und </p> geschrieben wird, in der Schriftart "Arial" dargestellt wird.
<style type="text/css">
<!--
p { font-family:Arial; }
//-->
</style>
Das Attribut "type" ist ein Pflichtattribut und muss auf jeden Fall mit angegeben werden. Dass - wie im obigen Beispiel gezeigt - die Formatierungsbefehle noch einmal in einem "Kommentar" (<!-- /Formatierungsangaben/-->) sitzen, ist eigentlich für einige der "Uralt-Browser" gedacht und soll bewirken, dass die CSS-Angaben nicht als Bildschirmausgabe angesehen und angezeigt werden.
Für eine projektübergreifende Formatierung ist es allerdings ratsam - und das ist auch der am häufigsten anzutreffende Fall - die entsprechenden Befehle in eine Extra-Datei (.css) auszulagern und diese im Head-Bereich eines HTML-Dokumentes zu verlinken.
Letzterer Fall ermöglicht z.B. - dadurch, dass auch mehrere CSS-Dateien angegeben werden können - dass der Besucher unter mehreren Designs auswählen kann (Styleswitcher). Auch können über eine Browserweiche den einzelnen Browswern unterschiedliche CSS-Dateien zugeordnet werden. Das kann sinnvoll sein, um so immer wieder vorkommende bowserabhängige Interpretations- und Darstellungsunterschiede zu "umgehen".
Um eine externe CSS-Datei in eine HTML-Datei einzubinden, kann man unter 2 verschiedenen Varianten wählen. Die eine sieht beispielsweise so aus:
Beispiel
(Einbinden externer CSS-Dateien)
"style"-Bereiches:
<style type="text/css">
<!--
@import url(dateiname.css);
//-->
</style>
Die Anweisung @import url(dateiname.css); bindet die in der Klammer angegebene CSS Datei in das HTML-Dokument ein. Dabei muss beachtet werden, dass auch in der CSS die allgemeinen Regeln für absolute und relative Pfade gelten. Denn logisch: Wenn eine CSS-Datei nicht richtig verlinkt wurde, kann sie auch nicht interpretiert werden. Also wenn einmal etwas nicht funktionieren will, immer als Erstes einmal die gemachten Pfadangaben überprüfen !!
Die zweite Variante zum Einbinden von externen CSS-Dateien benutzt einen sogenannten "Link"-Tag.
<link rel="stylesheet" type="text/css" href="dateiname.css">
Die Angabe href leitet den Pfad zur CSS-Datei ein. Wie auch oben schon bei type gehabt, so gehören auch die Attribute rel und type zu den Pflichtattributen.
Durch rel wird dem Browser kenntlich gemacht, dass es sich um eine CSS-Datei (stylesheet) handelt, welche eingebunden werden soll und durch das Attribut type wird der
Mime-Type » angegeben.