Tags

Prinzipiell lassen sich Style Sheet Definitionen auf alle bekannten HTML-Tags anwenden. Je nach Tag stehen aber zusätzliche Formatierungsmöglichkeiten zur Verfügung bzw. müssen einigen Tags Formatierungen zugewiesen werden, damit CSS Sinn macht.

Wichtig ist die Festlegung für den body-Tag, da sich dieser auf die gesamte Seite auswirkt und eigentlich alle anderen Tags diesem untergeordnet sind.

Der Internet Explorer passt, sobald das Format für den body-Tag definiert wurde, alle anderen Tags, mit Ausname der Links, an. Es wäre also keine Definition für b, i, etc. notwendig ... wenn der Netscape Navigator nicht anderes vorsehen würde.

Für die korrekte Darstellung von Style Sheets in Netscape ist es unbedingt erforderlich, auch die Tags b, i (bzw. strong und em), sowie table und td und h1-h6 (sofern sie Verwendung finden) mit einer Formatierungsanweisung zu versehen. Auch für den p-Tag kann dies ratsam sein (ich setze p nie ein, also formatiere ich es auch nicht).

Wird für mehrere Tags die gleiche Formatierung verwendet ist es möglich, die Tag-Namen durch einen Beistrich zu trennen (im Beispiel bei table und td)

Ein typisches Style Sheet mit den wichtigsten Befehlen sieht bei mir also so aus:
body { color:#000000; font-size:10pt; font-family:Arial; }
h1 { font-size:20pt; font-weight:bold; }
h2 { font-size:18pt; font-weight:bold; }
h3 { font-size:16pt; font-weight:bold; }
b, strong { font-weight:bold; }
i { font-style:italic; }
em { font-style:italic; font-weight:bold; }
table, td { color:#000000; font-size:10pt; font-family:Arial; }

Was die einzelnen "Anweisungen" jetzt genau bedeuten findet sich unter Definitionen.

Für Links gibt es spezielle Anweisungen, die darauf abzielen, dass Links mehrere Zustände ( link, active, visited und durch CSS zusätzlich hover, welches aber nur beim Internet Explorer und bei Opera funktioniert)

Dadurch ergibt sich für die Links zusätzlich der Eintrag:
a:link { color:#AAAAAA; font-family:Arial; }
a:visited { color:#555555; font-family:Arial; }
a:active { color:#3F3F3F; font-family:Arial; }
a:hover { color:#000000; font-family:Arial; }

Hierbei hat jeder Linkzustand eine andere Farbe. Die Definition durch das a:link wirkt auf den ersten Blick verwirrend, dient jedoch dazu, dass die verschiedenen Zustände der Links beachtet werden. Will man nur eine Angabe für Links treffen, reicht die Definition von a aus.

Aber nicht nur auf bestehende Tags lassen sich Formatierungen anwenden, sondern man kann auch eigenen Classes definieren. Diese bekommen einen eigenen, noch nicht anderweitig verwendeten Namen (er sollte aus Buchstaben bestehen) und einen Punkt vorangestellt und kann danach über jeden beliebigen anderen Tag mit dem zusätzlichen Befehl class="xyz" aufgerufen werden.

In der CSS-Datei sieht das so aus:
.klein { font-size:8pt; }

Und wird in der HTML Datei zB über den Befehl span eingebunden:
Hier steht kleiner Text

Der Befehl span hat gegenüber div den Vorteil, dass in den meisten Fällen kein neuer Absatz begonnen wird. Ich rufe Klassen auch gerne gemeinsam mit dem Befehl b auf. Dabei muss aber darauf geachtet werden, dass in der eigens definierten Klasse festgelegt wird, dass der Text nicht fett gedruckt wird.