Cascading Stylesheets (CSS)

Wenn Sie sich ausschließlich mit HTML beschäftigen, werden Sie schnell an die Grenzen gelangen. Als Neuling werden Sie vermutlich viel von vorhandenen Seiten kopieren bzw. lernen wollen. Dabei werden Sie auf Elemente stoßen, die Sie entweder nur umständlich mit HTML nachkonstruieren können oder gar nicht. Ein Blick in den Quelltext der beneidenswerten Webseite wird Ihnen Attribute offenbaren, die Ihnen fremd vorkommen oder schlimmer noch. Sie können einen bestimmten Effekt erst gar nicht nachvollziehen. Mit hoher Wahrscheinlichkeit sind Sie dann zum CSS-Opfer geworden. Um von Vornherein Missverständnisse zu vermeiden, CSS ist natürlich keine Wunderwaffe und auch absolut nicht schädlich. Es ist schlicht und ergreifend eine Erweiterung, um einfacher, gezielter und umfassender Formatierungen vornehmen zu können.

Beispiel:
Sie haben eine HTML-Tabelle erstellt und möchten nun in jeder Zelle den Abstand zwischen Zellwand und Text so einstellen, dass er sich oben und rechts auf 10px und unten und links auf nur 5px beläuft. Mit HTML würden Sie jetzt wilde Konstruktionen zaubern. Sie würden Entweder mit blinden Grafiken um sich werfen oder massenhaft blinde Zeilen und Spalten einfügen. Beides Lösungen, die einem Webentwickler die Haare zu Berge stehen ließen.
Mit Stylesheets hätten Sie ebenfalls mehrere Möglichkeiten, die allesamt glücklicher wären. Eine würde folgendermaßen aussehen: Die betreffende Tabelle erhält ein Klassenattribut im öffnenden Tabellentag. Im HTML-Kopf würde ein Style-Bereich definiert, in dem Folgendes stünde:

table.[Klassenname] td { padding: 10px 10px 5px 5px; }

Fertig. Jede Tabelle in besagtem Dokument, die die gleiche Klassenzuordnung erhalten würde, wäre identisch formatiert.

Eine CSS-Premium-Lösung würded folgendermaßen aussehen: Sie trennen Daten (HTML-Dokument) und Layout so gut es geht. Dazu würden Sie das HTML-Dokument von sämtlichen Formatierungsanweisungen befreien und im Kopfbereich jedes Ihrer Dokumente eine Referenz auf eine externe CCS-Datei verankern. Sämtliche Formatierung, angefangen bei Schriftarten und -größen bis hin zu Hintergrundfarben und- grafiken sowie Abständen und Rändern, wären somit losgelöst.

Vorteile:

• Pflege von Daten und Layout würde erheblich vereinfacht
• Layouts wären problemlos austauschbar

Nachteile:

• Theoretisch gibt es keine, doch die Praxis lehrt uns, dass die vielen verschiedenen Browser bestimmte CSS-Eigenschaften unterschiedlich und teilweise noch gar nicht interpretieren, so dass eine vollständige Trennung bisher mehr Probleme als Frohlocken mit sich bringt. Die Hoffnung ruht, wie immer, auf den kommenden Browsergenerationen.

Ausführliche Informationen zu Cascading Stylesheets (Eigenschaften und Syntax) finden Sie bei CSS4You und/oder Self-HTML.

<- Zurück Weiter ->