Grundsätze von CSS

Stylesheets sind seit HTML 4.0 fest in HTML verankert. Sie sollen Layout und Inhalt einer Webseite voneinander trennen, arbeiten also genauso wie eine Textverarbeitung. Leider haben es die Browserhersteller bis heute - aus verschiedensten Gründen, die von Unfähigkeit bis Marktdominanz reichen - nicht geschafft, diesen Standard fest zu verankern. Allerdings beherrschen die modernen Browser (IE ab Version 5, Netscape ab Version 6, Mozilla ab 0.9.9 und Opera ab 6) zumindest die meisten Elemente von CSS1 und dazu viele von CSS2. Das W3C arbeitet z.Z. an CSS3.

Einbindung in die Webseite

Es gibt verschiedene Möglichkeiten, Styles in eine Seite einzubetten:

1. Import einer externen Styledatei im Head:: <style type="text/css">  </style>
(wird weder vom IE 3.0 noch von Netscape 4.x erkannt)
2.a. die Link Referenz im Head:: <link rel="stylesheet" href="mystyle.css" type="text/css" media="screen">
(wird von allen Browsern erkannt)
2.b. die Link Referenz im Head:: <link rel="stylesheet" href="mystyle.css" type="text/css" media="all">
(wird von allen Browsern ausser dem Netscape 4.x und dem Internet Explorer 3.x erkannt.)
3. Direkte Notation im Style Container im Head:: <style type="text/css">
 </style>
4. die Inline Referenz im Tag:: <body style="background:yellow;color:blue;">

Prioritäten

Die Notation, die dem Tag am nächsten ist, überschreibt die anderen Notationen. D.h. Inline überschreibt Style Container. Style Container überschreibt externe Datei.

Browserweiche

Damit kann man nun auch eine Browserweiche bauen, die die verschiedenen Browser auf eigene Stylesheets umleitet.
Da der Netscape 4.x sehr eigene Vorstellungen von CSS hat, schreibt man für ihn ein eigenes Stylesheet und bindet das dann in den Head der Datei ein:

Damit aber die neueren Browser nicht mit dem mageren Angebot abgespeist werden müssen, schreibt man ein 2. Stylesheet und bindet das dann darunter ebenfalls in den Head ein:

<style type="text/css">
<!--
@import url (mystyle.css);
-->
</style>

Netscape und der IE 3 lesen dann zuerst die Anweisung, mit der sie was anfangen können - mit @import url können die alten Browser nichts anfangen, daher wird der Style Container ignoriert. Moderne Browser ignorieren media="screen", weil ein Stylecontainer folgt, der die Anweisungen des externen Stylesheets überschreibt. Und der wird dann ausgeführt. Damit ist die Browserweiche perfekt.
Manchmal möchte man aber alle alten Browser überhaupt vom Stylesheet ausschliessen, so wie ich das hier getan habe. Diese Seiten werden im NN4.x und dem IE 3.x als weitgehend unformatierter Text dargestellt. Nur die wenigen Inline Styles werden angezeigt. Folgendes macht es möglich:

Auch der Internet Explorer in seinen verschiedenen Versionen arbeitet nicht ganz standardgetreu. Oft empfiehlt es sich, auch für ihn eine Browserweiche anzubieten.

Genaueres dazu kann man bei Microsoft nachlesen.