Homepagebau	Dateiversion: diesen Beitrag diskutieren, ergänzen, eine Frage stellen

Cascaded Stylesheets (CSS) enthalten Formatierungsanweisungen für HTML-Dokumente. Schriftgröße, Textfarbe, Hintergrundgrafiken, Rahmen... können Tags, Klassen oder einzelnen Abschnitten zugewiesen werden. Das ist vergleichbar mit den Formatierungsanweisungen, welche sie aus vielen Textverarbeitungen kennen.
Die eigentliche Aufgabe von CSS ist dabei, innerhalb eines großen Webprojekts, an dem mehrere Personen arbeiten können, Abstimmungsprobleme aus dem Weg zu räumen.

CSS hat eine direkt sichtbare Wirkung, die sich in erweiterten Designmöglichkeiten ausdrückt und eine technische, nicht sichtbare Wirkung.

In erster Linie (gerade für Anfänger) interessant ist natürlich die sichtbare Wirkung von CSS.
Mit CSS können sie einen Abschnitt einrahmen, einem Text Hintergrundfarben oder -bilder zuweisen, Links individuell gestalten... Ganz allgemein gesprochen, alles, was HTML an Elementen theoretisch darstellen kann, können sie mit CSS nach ihren eigenen Wünschen dort einsetzen wo sie es wünschen und nicht nur dort, wo es nach HTML-Standard ursprünglich vorgesehen wäre.
Darüber hinaus können sie aber auch spezielle Dinge, wie den angezeigten Cursor oder die Darstellung der Bildlaufleisten verändern.

Zumindest in der Theorie eigentlich viel wichtiger ist aber der technische Einsatz von CSS, der meistens im Hintergrund geschieht und dem normalen Besucher der Homepage daher verborgen bleibt.
Dort, wo professionelles Webdesign oder auch Satz von Texten betrieben wird, gibt es innerhalb einer Arbeitsgruppe ein festes Muster für jede Kategorie von Seiten. CSS enthält dabei eine festgelegte Formatierung für Überschriften, Standardtexte, Tabellen, usw. - auf diese Weise wird zum einen verhindert, dass einzelne Mitglieder des Webprojekts eigene Formatierungen erfinden und so den Stil des Gesamtprojektes durchbrechen.
Zum anderen kann aber auch nachträglich über eine einzige Schnittstelle die Formatierung des gesamten Webprojekts geändert werden, ohne eine Zeile Code an den eigentlichen Dateien verändern zu müssen.

Worauf sollte ein privater Webmaster in diesem Zusammenhang achten? Nun, der intelligente Einsatz von CSS macht zum Teil auch den Unterschied zwischen einem Anfänger und einem Fortgeschrittenen aus. Solange nur wenige Seiten existieren ist die Bedeutung von CSS eher zweitrangig. Allerdings wird die einfache "Wartung" der eigenen Seiten mit jedem neuen HTML-Dokument, dass sie erstellen bedeutsamer. Setzen sie CSS in privaten Projekten sparsam aber konsequent ein.

Ein CSS wird mit dem Tag "style" eingeleitet. Als Attribut können (müssen sie aber nicht) "type" mit dem Wert "text/css" angeben, um zu zeigen, dass es sich um ein Skript vom Typ "CSS" handelt. Die Syntax der Anweisungen ist denkbar einfach [TAGNAME] { [FORMATIERUNG] : [WERT]; [FORMATIERUNG] : [WERT] ...  }.

Beispiel:

dieses Skript formatiert den gesamten Text eines Dokuments in der Schriftart "Helvetica". Ist die Schriftart nicht verfügbar, soll "Arial" verwendet werden.

<style type="text/css">
    BODY { font-family: "Helvetica", "Arial"; }
</style>

dieses Skript formatiert alle Abschnitte (p = paragraph = "Abschnitt") in der Farbe rot und außerdem alle Links (a) dunkelgrün.

<style type="text/css">
    p { color: #FF0000; }
    a { color: #00A000; }
</style>

Um nur ein einzelnen Abschnitt zu formatieren, können sie aber das CSS-Skript auch direkt in den Tag einbauen.

<p style="color: #FF0000;">Dieser Abschnitt ist rot</p>
<p style="color: #00FF00;">Dieser Abschnitt ist grün</p>
<p style="border: solid;">Dieser Abschnitt ist eingerahmt</p>
<p style="background-color: #000000; color: #FFFFFF;">Dieser Abschnitt ist weiß auf schwarzem Hintergrund</p>

Autor: Thomas Meyer

Home: www.All-Community.de

Kontakt: