HTML-Elemente mit CSS gestalten

Homepage selbermachen: Effekte mit CSS

Bei der Gestaltung einer Web-Seite mit HTML stößt der ambitionierte Web-Autor schnell an Grenzen. Mit Cascading Style Sheets (CSS) dekorieren Sie Texte, spielen mit Farben und Formen und positionieren Elemente: Es stehen deutlich mehr Möglichkeiten zur Verfügung, als mit einfachem HTML. Alle Grundlagen für die Arbeit mit CSS - einschließlich vieler Beispiele finden sich in diesem Beitrag. Von Astrid Keßler

Den Gestaltungsmöglichkeiten mit CSS setzen die Beschränkungen der Browser noch Grenzen
HTML bedeutet Hypertext Markup Language und ist eine sogenannte Auszeichnungssprache. Sie hat die Aufgabe, die logischen Bestandteile eines Dokuments zu beschreiben. Mit einer überschaubaren Anzahl von Befehlen ist sie von jedem leicht zu erlernen, der nur ein wenig Englisch versteht. Was Anfängern allerdings immer wieder Probleme bereitet, ist die uniforme Darstellung der Befehle. So ist beispielsweise eine Überschrift 1. Ordnung mit <h1>...</h1> schnell notiert, aber wie bitte sagt man dem Browser, dass er die Überschrift nicht in dieser eintönigen Times-Schrift darstellen soll und gefälligst etwas mehr Abstand zum Text danach lassen soll?

Wozu StyleSheets?
Die Browser-Hersteller erfanden allerlei Notlösungen gegen den Gestaltungsnotstand in HTML. Es begann mit dem <blink>-Tag von Netscape, ging weiter über das <font>-Tag, mit dessen Hilfe man zumindest ein wenig mit Schriftarten, Schriftgrößen und Schriftfarben spielen konnte, bis zum <spacer>-Tag, das Räume und Abstände schaffen sollte. Doch all dies ist letztendlich Stückwerk. HTML ist und bleibt eine Sprache zum Definieren von Dokumentstrukturen und zur Verlinkung von Seiten. Zum Formatieren und exakten Positionieren von Elementen ist die Sprache nicht ausgelegt.

An dieser Stelle setzen die Cascading Style Sheets (CSS) an. Schriftformatierung, Positionierung, Abstände, Ränder, Rahmen, Hintergründe, Farben, praktisch alle Gestaltungswünsche lassen sich damit realisieren. Mit Style Sheets sind sogar zentrale, separat speicherbare Dokumentvorlagen realisierbar, wie man sie aus professionellen Textverarbeitungssystemen kennt. CSS ist die Trickkiste der Designer, Konzepte genau nach Wunsch umzusetzen. Dabei ist die Style-Sheet-Sprache nicht einmal schwer zu verstehen. CSS klinkt sich nahtlos in HTML ein.


Das w3-Konsortium macht es vor: Große Wirkung mit wenig Code.

Mittlerweise existiert bereits die zweite Version der CSS-Sprache. Bedauerlicherweise haben die Browser noch nicht gleichgezogen und unterstützen nur einen Teil der zur Verfügung stehenden Befehle. Nicht einmal darin sind sich aber die großen Browser-Entwickler einig. Netscape 4.x interpretiert einen Teil der CSS-Version 1.0 und ein paar Befehle der CSS-Version 2.0. Der MS Internet Explorer kennt einen großen Teil der CSS-Version 1.0 bereits seit seiner Produktversion 3.0. Seit Version 4.0 interpretiert er einen Teil der CSS-Version 2.0 und einige spezielle, von Microsoft eingeführte, Style-Sheet-Angaben. Wenn Sie WWW-Seiten gestalten, müssen Sie dies noch immer berücksichtigen. Style Sheets erlauben Ihnen völlig neue Möglichkeiten beim Webseiten-Layout. Je intensiver Sie Ihre Layouts jedoch von Style-Sheet-Effekten abhängig machen, desto langweiliger und enttäuschender wirken die Seiten bei Anwendern, die keinen Style-Sheet-fähigen Browser benutzen.

Artikel kommentieren