Zuletzt ein vollständiges Beispiel

In diesem letzten Teil gebe ich ein vollständiges Beispiel einer verwendbaren CSS-Datei, um Anfängern die Anwendung des in diesem Kurs erlernten zu erleichtern. Das Beispiel ist jeweils zur Erklärung kommentiert. Ein Hinweis noch zur Syntax von Kommenatren in CSS: Kommentare in CSS (also Bereiche mit beliebigen Text der nicht interpretiert wird) werden durch die Zeichenfolge /* eingeleitet und mit */ wieder geschlossen. Sie können dieses Beispiel als Anregung verwenden um selber eigene CSS-Dateien zu schreiben.

body { background-color:#FFFF99; margin:0px; padding:45px 35px 45px 25px; }


/* legt die Hintergrundfarbe und den Rand für die gesamte Seite fest */


p,div,ul,ol,h1,h2,h3,h4,h5,th,td { font-family:Arial,sans-serif; }


/* Schriftart für alle Elemente die Schrift enthalten */


h1,h2,h3,h4 { color:#990000; }


/* seperate Schriftfarbe für Überschriften */


#menu { position:absolute; top:60px; left:0px; width:180px; }


/* Position des Menues festlegen */


#text { margin-left:205px; background-color:#FFFFCC; padding:15px; border-style:none; border-width:1px; }

/* Formatierung fuer den Haupttextkasten: Er muss den Bereich fuer das Menue freilassen (margin-left),
bekommt eine andere Hintergrundfarbe und etwas Innenabstand.
Fuer Netscape 4 wird ein Workaround mit einem unsichtbaren Rand hinzugefuegt, da dieser sonst die Hintergrundfarbe nicht richtig darstellen wuerde */

ol { list-style-type:upper-roman; }

/* eine Listenformatierung */

#menu ul { list-style-type:none; }

/* Fuer das Menue soll das Bulletzeichen unterdrueckt werden */

/* nun werden die Schriftgroessen der Elemente festgelegt */

h1 { font-size:32px; }

h2 { font-size:27px; }

h3 { font-size:22px; }

h4 { font-size:18px; }

h5 { font-size:16px; }

p,div,ol,ul,td,th { font-size:14px; }

/* Jetzt noch die Links */

a:link { color:#0000FF; text-decoration:underline; }

a:visited { color:#0000FF; text-decoration:line-through; }

a:hover { color:#0000FF; text-decoration:none; }

a:active { color:#FF0000; text-decoration:underline; }

So sieht dieses Beispiel dann aus.

Dieses Beispiel ist natürlich nur eine relativ einfach gestaltete Website. Versuchen Sie es einfach nach ihren eigenen Vorstellungen abzuwandeln und zu ergänzen. Sie können den obenstehenden Code sowohl in einer eigenen CSS-Datei verwenden, als auch im Kopfbereich einer HTML-Datei. Eine seperate CSS-Datei bekommt immer die Dateiendung ".css".

Dieser CSS Kurs ist hier zu Ende. Ich hoffe er hat Ihnen etwas gebracht.

Autor dieses Kurs ist René Maroufi