Ausgelagerte Style Sheet Datei
<link rel=stylesheet type="text/css" href="style.css">
Hier der Inhalt der css Datei

body { margin-top:20px; margin-bottom:10px; }

p,h1,h2,h3,h4,b,i { font-family:Arial,sans-serif;}
p.blue { color:#ffffff; background-color:#00557F; }
h1 { font-size:18pt; }
/* Komentare werden in Style Sheets zwischen diese Zeichen gesetzt. Anfang und Ende des Komentars müssen in der gleichen Zeile stehen.*/
h2 { font-size:16pt; } h3 { color:blue; }


Ganz normaler Text ohne irgendwelche Schriftformatierungen oder Style Sheets. Für die Schriftformatierung fetter Text, also b für bold wurde die Schriftart Arial oder sans-serif in dem Style Sheet definiert.

Wie man im Quelltext sehen kann, wird auf eine Datei namens style.css verwiesen. <link rel=stylesheet type="text/css" href="style.css">
In dieser reinen Textdatei steht nichts als die Style sheet Definitionen. Hier kann mal mal gucken.

Hier haben wir auch wieder einen normalen Absatz mit dem p Tag. Viele Style Sheets nicht im Netscape 4. Aber da dieser Browser kaum noch genutzt wird, kann man das mittlerweile außer acht lassen..

Das ist ein Absatz p mit Unterklasse namens blue, also: p.blue Hier habe ich eine Hintergrundfarbe gewählt, die allerdings im Microsoft Explorer besser aussieht, weil der immer einen rechteckigen Block erzeugt, während Netscape4 die Farbe nur bis zum Ende der jeweiligen Zeile darstellt. Das finde ich persönlich nicht so schön.

Überschrift h1

Überschrift h2

Überschrift h3

Die Überschriften wurden hier einmal alle mit der Schriftart Arial, sans-serif formatiert. Außerdem wurden dann für die Überschriften h1, h2 und h3 nochmals extra Style Sheets angelegt.
Hier die 3 Möglichkeiten Style Sheets einzbinden.
Style Sheet im Head für die gesamte Seite.
Style Sheet für einzelne Tags.
Style Sheet in einer externen CSS Datei.(diese Seite)
Startseite nächste Seite