Cascading Style Sheets (CSS)
Das Internet hat im Laufe der letzten 10 Jahre immer mehr an Bedeutung gewonnen. Seit der Entwicklung von HTML im Jahr 1989 durch Tim Berners-Lee hat sich zur anfänglichen ausschließlich textbasierten Version einiges getan. Immmer mehr und weitergehende Möglichkeiten wurden entwickelt und zu Anwendung gebracht. Im Dezember 1996 entwickelte das W3-Consortium dann CSS. Eine Zusatzsprache, die eigens für die graphische Darstellung der Seiten genutzt werden konnte. Heute basieren fast alle Seitenlayouts im World Wide Web auf dieser Sprache. Um ein "sauberes" Webdesign zu erstellen führt heute kein Weg mehr an CSS vorbei.

Was ist CSS?

Cascading Style Sheets (CSS) beschreiben, wie Dokumente dargestellt werden. Ob am Bildschirm, auf Papier oder durch andere Medien. CSS ermöglicht es, den in HTML oder XML (logisch) ausgezeichneten Text mit einem Layout zu versehen.

Die Funktionen

CSS funktioniert eigentlich, wie eine Formatvorlage in einer Textverarbeitung. Sie weisen einem gekennzeichneten Abschnitt oder Element ein zuvor festgelegtes Aussehen zu. Mit der Entwicklung von weitergehenden Möglichkeiten zur Text- und Seitengestaltung, sollte der HTML-Code von vielen nicht standardisierten Erweiterungen und Hilfsmitteln (z.B. Unsichtbare GIF-Bilder, um Text einzurücken; Verwendung von Tabellen, um Text zu positionieren; Bilder statt formatierter Text) befreit werden, um so die Informationen wieder besser zu strukturieren. Außerdem sollte das Aussehen der Seite vom Seitengestalter und nicht mehr vom Browser gesteuert werden können. Welche Formatierungen kann CSS übernehmen?- Schriftart, Schriftgröße und -farbe

• Textauszeichnungen (Kursiv/ Fett/ Unterstrichen und andere)
• Textausrichtung (Links/ Rechts/ Mittelachse/ Blocksatz)
• Zeilenabstand, Wort- und Buchstabenabstand
• Formatierung der Hyperlinks (Farben/ Unterstreichung/ Hover)
• Die Eingabefelder der Formulare verändern
• Mauszeiger können neue Formen annehmen
• Rahmen
• Hintergrundfarbe oder Hintergrundbild (auch für Textteile und Hyperlinks)
• Randabstände
• Positionierungen (relative und absolut für beliebige Objekte)
• Layout

Fazit

Vorteile von Cascading Style Sheets- Sinnvolle Trennung von Layout und Inhalt.

• Einheitliches Layout verschiedener Seiten einer Site kann bestimmt werden, statt für jede Datei einzeln.
• Die Wartungen der Seiten geschieht an zentraler Stelle, schnelle Layoutänderungen möglich.
• Seiten können auf die verschiedenen Ausgabemedien abgestimmt werden.
• Dynamisches Erstellen aufwendiger Seiten ist einfacher.
• Arbeitsteilungen zwischen verschiedenen Abteilungen wie z.B. Texter und Layouter möglich.
• Reduzierung der notwendigen HTML Tags.
• Bessere Strukturierung der Seiten.
• Genaues Positionieren von Bereichen (Text, Graphik), was pures HTML meist nur über den Umweg von Tabellen, aber in eingeschränktem Maße, zulässt.
• Neue Formatierungsmöglichkeiten, die HTML nicht kennt.
• Schlankere HMTL-Dateien und damit geringere Übertragungszeiten trotz besserer Gestaltungsmöglichkeiten.

Nachteile von Cascading Style Sheets- Alte Browser können diese nicht darstellen.

• Der Funktionsumfang umfaßt noch nicht alle Möglichkeiten eines DTP-Programms.
• Umstellung bestehender Seiten wäre sehr zeitaufwendig.
• Der Benutzer hat bei einigen Browsern nicht die Möglichkeit, über das Aussehen der Seiten selber zu entscheiden (Farbe, Schriftgröße, Schriftart, ...), was bei der Seitengestaltung zu berücksichtigen ist.
• Selbst die aktuellen Browserversionen bieten noch keine vollständige und fehlerfreie Integration von CSS. Somit sehen die Seiten auf den verschiednen Browsern noch sehr unterschiedlich aus.
• Einige Möglichkeiten können noch gar nicht genutzt werden.

Beispiel 1

Ein CSS kann zum Beispiel definieren, dass die Überschrift eines HTML-Dokumentes mit dem Tag H1 50 Pixel hoch und in der Schriftart Arial rechtsbündig, in grün Farbe, fett und unterstrichen dargestellt wird.
Die Stilvorlage sieht wie folgt aus:

H1{ font-family: Arial; font-size: 50px; font-weight: bold; text-align: right; color: green; text-decoration: underline; }
So sieht´s aus:

Überschrift

Beispiel 2

Eben so kann ein CSS definieren, wie ein Hperlink aussehen soll. Der entsprechende Tag ist a. Hier soll er die Farbe schwarz haben, 20 Pixel hoch sein und beim Hover (wenn sie Ihre Maus über den Link bewegen.) die Farbe rot zeigen.
Die Stilvorlage sieht wie folgt aus
a { font-family: Arial; font-size: 20px; font-weight: normal; color: black; text-decoration: none; } a:hover { color: red; text-decoration: ; }

So sieht´s aus: zum Seitenanfang