..| EL FABI UNIVERSE |..

Einbindung von CSS Style Sheets in HTML Dokumenten

enn du die Seiten dieses CSS-Projekts nacheinander gelesen oder überflogen hast, kennst du nun den Verwendungszweck der Style Sheets und die Syntax ihrer allgemeinen Attribute. Doch wie bindest du CSS nun in deine Webseite ein?

Es stehen dir hierzu drei verschiedene Möglichlkeiten zur Verfügung, die bereits im Vorfeld erwähnt worden sind:

Inline Style Sheets
Eingebettete Formatvorlagen
Verknüpfte Formatvorlagen

Was aber versteckt sich nun hinter diesen Namen!?

I. Die Inline Style Sheets

Inline Style Sheets bist du im Grunde genommen auf der Seite mit der Übersicht über die verschiedenen Attribute von CSS begegnet. Auch die allgemeine Syntax

<TAG style="attribut1:wert1; attribut2:wert2; attribut3:wert3; ...">

ist nichts anderes als die Form eines Inline Style Sheets. Es besagt, daß die Formatierung durch CSS Style-Sheets unmittelbar durch das den Text oder das Seitenelement auszeichnende Tag erfolgt. Inline Style Sheets sind die dem direkten HTML-Quelltext nächste Methode, ein Style Sheet einzufügen. Sie haben auch von allen Arten der Einbindungen von Style Sheets in ein HTML-Dokument die höchste Priorität, daß heißt, findet der interpretierende Browser Css-Anweisungen für ein bestimmtes Element einer Webseite sowohl in einer eingebetteten Formatvorlage, als auch in einem Inline Style Sheets, wird er die Spezifikationen aus dem Inline Style Sheet verwenden und die aus der eingebetteten Formatvorlage ignorieren.
Inline Style Sheets eignen sich sehr gut für die Formatierung eines einzelnes Elements auf einer Webseite. Sie sind jedoch eher unpraktisch, wenn es um die generelle Formatierung eines gesamten HTML-Dokumentes gehen soll. Hier kommt die zweite Art der Einbindung von Style Sheets zum Zuge: die eingebettete Formatvorlage.

II. Eingebettete Formatvorlagen

Durch eine eingebettete Formatvorlage lassen sich nicht nur die Formatierung einiger Tags im Dokument, sondern das gesamte Layout der Webseite steuern. Das heißt, daß an einen vorgegebenen Punkt im Dokument gesammelt eine Spezifikation für die im Dokument vorkommenden HTML-Tags definiert wird. An dieser Stelle werden die CSS Attribute gesammelt abgelegt und den Tags zugeordnet.

Aussehen im HTML-Quellcode

Beschreibung

Beispiel für Einbindung in den Kopfbereich einer HTML-Datei:


<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0//EN//">
 <HTML>
  <HEAD>
    <STYLE>
    Style Sheet Informationen
    <STYLE>
    <TITLE>
    CSS Style Sheet Einbindung
    </TITLE>
  </HEAD>
 <BODY>
...

Style Sheet Informationen einer eingebetteten Formatvorlage werden im <HEAD> </HEAD> Bereich des HTML Dokuments untergebracht.
Hierbei müssen sich sämtliche CSS Einträge zwischen den Tags <STYLE> </STYLE> befinden.

Beispiel für den Inhalt einer eingebetteten Formatvorlage:


<STYLE>
 <!-- 
  body 
     { margin:0.1in; background-color:#6699cc}
  p,h2,h3,h4,ul,ol,li,div,td,th
     { font-family:Arial, san serif; color:white}
  p,ul,ol,li,div,td,th,address,nobr,i 
     { font-size:10pt; }
  h1 
     {font: 16pt/10pt arial, san-serif; color:red}
  h2 
     { font-size:13pt; text-align:center}
  a:link 
     { color:#436AB7; text-decoration:none; }
  a:visited 
     { color:#6699cc; text-decoration:none; }
  a:active 
     { color:red; text-decoration:none; }
  a:hover 
    { color:red; text-decoration:underline; }
 -->
</STYLE>

Anm.: Die Kommentartags ()solltest du für den Fall einfügen, daß deine Seiten von älteren Browsern, die Style Sheets nicht kennen, geladen werden. Diese würden die CSS Einträge ansonsten nämlich als normalen Text mit in der Webseite darstellen.

Beschreibung:

Hier nun ein Beispiel für eine eingebettete Formatvorlage, durch die das Dokument diversen Formatierungen unterworfen wird. Im body-Element wird hier beispielsweise der Abstand des Dokuments zu den Browserrändern auf 0,1 Zoll gesetzt, die Hintergrundarbe als Navyblau definiert.
Einer Reihe von Tags wird eine Schriftartenfamilie (Arial) und eine durchgängige Größe (10pt) und Farbe (white) zugeordnet. Es genügt nun, im HTML Text diesen Tag ohne Erweiterungen einzugeben; eine Formatierung bezieht der Browser aus der eingebetteten Formatvorlage.

Einen interessanten Aspekt gibt es hier auch bei der Verarbeitung des Aussehen von Hyperlinks. Die vier Zeilen beginnend mit a:link, a:visited, a:active und a:hover aus der eingebetteten Formatvorlage beziehen sich darauf, wie die Links in diesem Dokument später zu erscheinen haben. Ähnlich bisherigen Attribute LINK, VLINK und ALINK läßt sich hier das Verhalten des Links in unangeblicktem Zustand (link), in bereits besuchtem Zustand (visited) und im Augenblick des Anklickens (active) beeinflussen. Der Internet Explorer unterstützt sogar noch eine weitere Routine, die beim Überfahren des Links mit der Maus eintritt. Das dazughörige Attribut hierzu lautet hover. Es handelt sich dabei also um die verschiedenen Zustände, die das Linktag <a> annehmen kann. Diesem Tag können nach Definition des Zustandes wie im obigen Quelltext gezeigt dann beliebige CSS Style Sheets zugewiesen werden.

III. Verknüpfte Formatvorlagen

Da du nun bereits einen ungefähren Überblick über die Syntax hast, die in einer eingebetteten Formatvorlagen verwendet wird, solltest du nun keine Schwierigkeiten mehr haben, auch des letzten Typ der CSS Style Sheet Einbindungen, nämlich eine verknüpfte Formatvorlage erzeugen zu können.
Dieser dritte Typ ist hilfreich, wenn du nicht nur ein HTML-Dokument, sondern eine ganze Reihe von Webseiten mit den selben Formatdefinitionen ausstatten möchtest. Damit du nicht jedesmal eine neue Formatvorlage einbetten mußt, gibt es mit der verknüpften Formatvorlage die Möglichkeit, einfach sämtliche CSS-Informationen, die sonst zwischen den <STYLE> </STYLE> Tags stehen würden, in einer separaten ASCII-Datei abzuspeichern und vom HTML-Dokument aus mit einem Link darauf zu verweisen.

Aussehen im HTML-Quellcode	Beschreibung
Beispiel für Einbindung in den Kopfbereich einer HTML-Datei: <HTML> <HEAD> <link rel=stylesheet type="text/css" href="cssproject.css"> <TITLE> CSS Style Sheet Einbindung </TITLE> </HEAD> <BODY> ...	Wie auch die eingebettete Formatvorlage wird der Link für die verknüpfte Formatvorlage im <HEAD> </HEAD> Bereich des HTML Dokuments untergebracht. Das Dokument selbst, auf das verwiesen wird ist eine reine ASCII-Textdatei, die die Endung .css trägt. In ihr sind alle CSS Formatierungsdefinitionen untergebracht, die später dann im HTML-Dokument verarbeitet werden.

Wie so eine .css-Datei irgendwann einmal aussehen kann, kannst du sehen, wenn du auf diesen Link klickst. Dies ist die gesamte CSS-Datei, die zum Formatieren dieser Seiten, die du gerade liest, verwendet wurde.
Anmerkung: Das gezeigte Style Sheets stellen lediglich gestalterische Beispiele dar und sollen nur einmal einen praktischen Eindruck vermitteln, wie ein CSS File beispielsweise aufgebaut sein kann.

Der Browser richtet sich nach diesen Formatvorlagen, sofern er im Dokument keine anderen vorfindet, die ein bestimmtes Element definieren. Verknüpfte Formatvorlagen haben von allen drei Typen die niedrigste Priorität, so daß man durch eingebettete Formatvorlagen oder Inline Style Sheets eine durch eine verknüpfte Formatvorlage gegebene Definition eines Elements problemlos außer Kraft setzen kann.

IV. Allgemeingültige Style Sheet Angaben definieren.

Dies ist die vorläufig letzte Sektion und sie beschäftigt sich mit einer weiteren praktischen Eigenschaft, die CSS Vorlagen haben.
Bisher hatten wir immer nur von spezifischen Formatierungen von Tags gesprochen, dass heißt in der CSS Datei oder der Formatverolage wurde ein Tag gesetzt und dann eine Style Sheets Definition zugewiesen.

h1 
  {
   font: bold 16pt/10pt arial, san-serif; 
   color:#ffffaa; text-align:center
  }

Dadurch wurden die nachstehenden Definitionen jedwedem Tag zugewiesen, das vorangestellt war (also hier alle <h1>-Tags).
Oder aber es wurde eine bestimmte Klasse mit nachgestelltem Punkt und Klassennamen definiert, die nur diejenigen Tags formatierten, die das entsprechende class="" Attribut trugen:

h1.classname {
              font: bold 16pt/10pt arial, san-serif; 
              color:#ffffaa; text-align:center
             }

Erfreulicherweise kann man auch völlig unabhängig von Tags Klassen definieren. Das sieht dann beispielsweise so aus:

.classname   {
              font: bold 16pt/10pt arial, san-serif; 
              color:#ffffaa; text-align:center
             }

Hier steht also nichts außer dem Punkt und dem nachgestellten Klassennamen. Das macht die Klasse universell einsetzbar, man kann also beispielsweise ein <h1>-Tag durch Hinzufügen des Attributs class="classname" ebenso mit den festgelegten Formatdefinitionen versehen wie auch ein <h2>-Tag, ein <a>-Tag oder was auch immer. Die Klasse ist variabel einsetzbar. Dies erspart es, neue Definitionszeilen für jedes einzelne Tag zu schreiben, wenn etwa eine Vielzahl Tags mit den gleichen Formatierungsattributen ausgestattet werden sollen (z.B. bei Formularelementen, die ja gleich eine ganze Gruppe an Tags darstellen).

So das wär's eigentlich jetzt erstmal im Groben. Unter der Rubrik CSS Interpretation in verschiedenen Browsern findest du noch einige konkrete Beispiele zur CSS Formatierung, außerdem eine Übersicht wie diese Definitionen in den gängigsten Browsern interpretiert werden.