Obwohl CSS-Anweisungen mittlerweile die HTML-Anweisungen für die Formatierung von Fonts (und anderen Elementen) abgelöst haben sollten, tun sich einige Browser immer noch schwer damit und interpretieren sie (vorsichtig ausgedrückt) "etwas" eigenwillig. Es ist also anzuraten, die vermeintlich fertige Seite mit verschiedenen Browsern zu prüfen.
 
In Fällen, in denen die Darstellung zu sehr unter solchen (Fehl-) Interpretationen leidet, empfiehlt sich eher der Verzicht auf die eine oder andere Funktion, wogegen es Ansichtssache ist, ob man kleine Schönheitsfehler in Kauf nimmt.
 

 
Beispiel: Einige Bilder in meiner Galerie sollten eigentlich farblich umrahmt sein. Manche älteren Browser umrahmen die Bilder jedoch meist nicht, sondern setzen stattdessen kleine quadratische Rahmen unter(!) die Bilder. Das sieht zwar nicht schön aus, ist jedoch meines Erachtens ein tolerierbarer Schönheitsfehler, der mit diesen Browser-Versionen ohnehin nach und nach aussterben wird.
 

 
Tipp: Manche Browser ignorieren komplexe CSS-Anweisungen vollständig, wenn sie einzelne Anweisungen darin nicht "verstehen". In solchen Fällen empfiehlt es sich, die Anweisungen zu splitten. Das heißt, dass man dieselbe Funktion zweimal nacheinander definiert. Einmal mit den für alle Browser verständlichen Anweisungen, und einmal mit den Anweisungen, die von manchen Browsern nicht akzeptiert werden. Auf diese Art wird zumindest ein Teil der Formatierung von diesen Browsern korrekt wiedergegeben.
 

 
Mit zentralen CSS-Dateien, die im head-Bereich jeder Inhalt-Seite aufgerufen werden, hat man die Möglichkeit, einheitliche Formatierungen für alle Seiten festzulegen, so dass Design-Änderungen nicht mehr mühselig auf jeder einzelnen Seite vorgenommen werden müssen, sondern nur noch eine (oder einige wenige) CSS-Dateien editiert werden müssen.
 

 
Die Formatierung der mittlerweile 3-stelligen Seitenzahl des Internet-Bereiches Tarkus-OnLine basiert auf nur wenigen CSS-Dateien. Das sind zur Zeit (2005-08):
 
- Basis-Datei für alle Seiten
4,857 Bytes - UpLoad vom 2010-12-15 - 10:35 - CET
 
- Ergänzungs-Datei für Menü-Leisten
653 Bytes - UpLoad vom 2013-08-11 - 22:59 - CEST
 
- Ergänzungs-Datei für das Haupt-Menü
599 Bytes -UpLoad vom 2007-11-24 - 02:10 - CET
 
- Ergänzungs-Datei für Rahmen
423 Bytes - UpLoad vom 2010-09-13 - 10:37 - CEST
 
- Ergänzungs-Datei für rote Seiten
1,579 Bytes - UpLoad vom 2007-10-06 - 18:42 - CEST
 
- Ergänzungs-Datei für graue Seiten
2,244 Bytes - UpLoad vom 2007-10-27 - 15:18 - CEST
 
- Ergänzungs-Datei für den Internet Explorer
860 Bytes - UpLoad vom 2008-02-04 - 12:51 - CET
 
Die Basis-Datei enthält die kompletten Formatierungen, die für die Seiten-Darstellung erforderlich sind. Die Ergänzungs-Dateien enthalten lediglich die für besondere Seiten bzw. Browser erforderlichen Unterschiede und werden dort zusätzlich (ggf. mehrere) im Anschluss an die Basis-Datei aufgerufen.
 

 
Beispiel:
Die Basis-CSS-Datei für meine Inhalt-Seiten wird auch auf den roten Seiten aufgerufen, gefolgt von dem Aufruf der ergänzenden CSS-Datei für rot. In letzterer werden den Elementen lediglich andere Farben zugewiesen. Der Haupt-Teil der Formatierung wird also der Basis-Datei entnommen. Änderungen der Basis-Datei wirken sich somit auch auf die roten Seiten aus, ohne die Änderung hierfür erneut durchführen zu müssen.
 
Ähnlich wurden die für die Menüs und Rahmen erforderlichen geringfügigen Unterschiede zur Basis-Formatierung in entsprechenden Ergänzungs-Dateien definiert, die zusätzlich zur Basis-Datei aufgerufen werden.
 

 
Ein weiterer Vorteil von CSS-Dateien ist, dass man damit (in Grenzen) auch Einfluss auf das Design fremder Internet-Seiten nehmen kann, die man in die eigenen Internet-Seiten einbindet. So habe ich zum Beispiel bei externen Gästebüchern den Aufruf einer meiner CSS-Dateien einfach irgendwo in den Kopf-Bereich eingebunden. Auf diese Art passt sich das Gästebuch automatisch den Änderungen meiner Internet-Seiten an, ohne dass ich dazu die Konfigurations-Seite des Betreibers aufrufen muss.
 

 
Ein interessanter Effekt ist die Umkehrung der Kanten-Farben.
 
Beispiel: Die HR-Anweisung (Trennlinie) ist normalerweise so aufgebaut, dass bei etwas dickerer Darstellung die obere und linke Kante dunkler und die untere und rechte Kante heller als der Hintergrund dargestellt wird, so dass es aussieht, als sei die Trennlinie eingeprägt. In meinen CSS-Dateien habe ich diesen Befehl genau andersherum definiert, wodurch die Trennlinien erhaben wirken. Siehe hier:

---

Ähnlich stellt sich auch die Überschrift der einzelnen Seiten dar. Ist halt mal was Anderes. :o)
 

 
Anfangs bestand mein Haupt-Menü aus grafischen Schaltern (gif-Bilder), deren Mouse-over-Effekt ich per Java-Skript gesteuert habe.
 
In der aktuellen Version sind die Schalter "nur" noch reine Text-Verweise, denen ich mit CSS-Anweisungen die Schalter-Gestalt aufzwinge, zum Beispiel (vereinfacht) so:
 

Das sieht dann so aus: Test-Schalter
 
Dies verkürzt die Menü-Skripte erheblich, ist nicht mehr auf Javascript angewiesen und erspart zudem das Laden der gesamten Bild-Dateien. Die Reaktions- und Ladezeiten sind seitdem also noch deutlich kürzer geworden.
 

 
Auf diesen Seiten hier stelle ich Skript-Beispiele in Blocks dar. Hierzu definiere ich in den CSS-Dateien eine Klasse mit Namen "block", die sich vom restlichen Hintergrund farblich dezent abhebt mit Kanten-Farben, welche die Blocks erhaben erscheinen lassen:
 

Innerhalb der HTML-Seiten rufe ich diese Klasse dann auf:
 

Das sieht dann so aus:
 
 

 
Eine erweiterte Variante der Blocks (siehe oben) sind die Rahmen. Hierzu definiere ich zusätzlich zur Klasse "block" eine weitere Klasse mit Namen "noblock", mit derselben Hintergrund-Farbe wie die eigentliche Seite und mit Kanten-Farben, welche diese "NoBlocks" vertieft erscheinen lassen:
 

Innerhalb der HTML-Seiten rufe ich dann zunächst die Klasse "block" auf und innerhalb dieser die Klasse "noblock":
 

Das sieht dann etwa so aus:
 
 

 
Zusätzliche Vertiefungen innerhalb eines Rahmens hebe ich etwas hervor durch leicht abweichende Farb-Zuweisungen für solche ineinander verschachtelten NoBlocks.
 
(Das obige Feld ist selber bereits ein Beispiel für diesen Effekt.)
 

 
Will man die Fensterhöhe nicht durch eine oben liegende Titelzeile einschränken, kann man den Titel auch in senkrechter Schrift als Rand oder Trennbalken setzen. Da senkrechte Schrift aber normalerweise nicht möglich ist, behilft man sich in solchen Fällen meist mit einer Grafik, auf welcher die Schrift senkrecht dargestellt ist.
 

 
Zumindest für den Internet Explorer gibt es aber eine CSS-Variante, mit der echte senkrechte Schrift möglich ist. Zunächst muss die Schrift definiert werden (abgedunkelte Angaben nur, falls die Definition im Header der HTML-Datei stehen soll, statt in einer eigenen CSS-Datei) :
 
 
Innerhalb der HTML-Seiten kann man dann die ID "verticaltext" einsetzen (Statt der ID "#verticaltext" könnte man zum Beispiel auch die Klasse ".verticaltext" definieren und im Folgenden mit "class=" statt "id=" aufrufen, usw.):
 

Das sieht dann etwa so aus:
 Vertikaler Text 
Sollte der Text nicht von unten nach oben, sondern umgekehrt laufen und statt am linken am rechten Rand erscheinen, ist im Browser evtl. ActiveX deaktiviert. Da man als Webmaster hierauf keinen Einfluss hat, sollte man also darauf achten, dass die Darstellungs-Richtung und die Postion nicht ausschlaggebend sind.
 

 
Für andere Browser bietet es sich an, denselben Text als Alternativ-Grafik im transparenten GIF-Format darzustellen, die ungefähr der für den Internet Explorer gewählten Schrift entspricht. Hierzu kann man sich zum Beispiel folgender einfacher Browser-Weiche bedienen:
  Dieses Beispiel befindet sich zur Zeit (Nov.2004) auf unserer Zwinger-Seite Wolfsspitze von der Römerroute, wo der Titel die Inhalt-Seite und die Menü-Leiste trennt.
 
Die Abfrage <!--[if gte IE 6]> versteht nur der Internet Explorer. Die Angabe "gte 6" besagt, dass es nur für den Internet Explorer ab Version 6 gilt. Alles was zwischen <!--[if gte IE 6]> und <![endif]--> steht, wird also nur vom Internet Explorer ab Version 6 ausgeführt. Für alle anderen Browser sieht es aus wie ein Kommentarblock ohne jede Bedeutung.
 
Im obigen Beispiel wird also nur ab Internet Explorer 6 der Text "Wolfsspitze von der Römerroute" angezeigt. Alle anderen Browser zeigen das Bild "titelvertikal.gif" an.
 
Um zu vermeiden, dass der Internet Explorer 6 dieses Bild ebenfalls anzeigt (zusätzlich zum Text), muss für diesen die Bild-Ausgabe unterdrückt werden, indem man zum Beispiel vor das erste <![endif]--> noch ein <span style="display: none; "> setzt.
 
Damit das abschließende </span> von anderen Browsern nicht gesehen wird, steht es auch wieder zwischen <!--[if gte IE 6]> und <![endif]-->.
 

 
Sämtliche Seiten meines Internet-Bereiches erscheinen in gleichem Design, das auf nur einer Handvoll CSS-Dateien basiert.