spacer
spacerwebwriting-magazin.despacer Newsletterspacer Forumspacerspacer Kontaktspacer
spacer
spacer spacer Zur Startseite Webwriting: Text, Design, Usability.... Tipps, Tricks, Tutorials Lob, Kritik, Rezensionen Was das Netz bewegt... Software, Tools Für Euch gelesen Surftipps, Knowhow-Quellen spacer
Logo

Webwriting News
- der Newsletter des Webwriting-Magazins meldet neue Beiträge und Interessantes rund ums Webpublishing - was wir halt so finden in den unendlichen Weiten.

zum BestellfensterAnfordern ?

spacer



Lies auch:

Erste Schritte mit CSS - Gleiches Schriftbild in (fast) allen Browsern
 
Was Betriebssystem und Browser alles mit Schriften anstellen


Webwriting-Magazin > So geht's


Alleskönner mit Schönheitsfehlern

Kleine Einführung in die Geheimnisse der CSS

CSS steht für "cascading style sheet". Ein Stylesheet ist eine Formatvorlage, und "cascaded" kann man zwar mit "kaskadierend" übersetzen, wovon aber keiner etwas hat. Näher kommt man der Sache mit "verschachtelt", und das gilt gleich in mehrfacher Hinsicht.

  • Einzelne Styles beschreiben Klassen, die ihrerseits wiederum Unterklassen enthalten können - die ihrerseits wiederum .... Die Unterklassen "erben" dabei jeweils die Eigenschaften der Eltern und fügen ihnen neue hinzu.
     
  • Einen ähnlichen Effekt kann man erzielen, wenn man mehrere Stylesheets zur Formatierung eines Textes nutzt: Die später geladenen überschreiben die Vorgänger - wenn sie an dieser Stelle etwas enthalten. Wo sie nichts enthalten, gelten die Formate des Vorgängers.
     
  • Schließlich entfalten Formatvorlagen ihre Wirkung auf verschiedenen Ebenen eines Dokumentes, und auch hier wieder in der Weise, daß die Wirkung einer Vorlage auf einer oberen Ebene auch für die unteren Ebenen gilt - soweit dort nicht eigene Formate definiert sind.

Bei nur drei bis vier Ebenen ist das nicht so schwierig, wie es sich anhört: Styles gelten entweder für ein ganzes Dokument bzw. die ganze Site, für einen Bereich eines Dokumentes oder für ein einzelnes Objekt. Und wenn für die ganze Site definiert ist, daß H1-Überschriften 26 pt hoch und hellrot sein sollen, gibt es kein Problem, eine abweichende Regelung für einen einzelnen Bereich oder auch nur eine einzelne Überschrift zu treffen.

Nichts bleibt stillos

Am interessantesten sind natürlich die Formatvorlagen auf der obersten Ebene, weil sie das eigentliche Ziel der Veranstaltung am besten erfüllen: Den Inhalt eines Dokumentes und die Form seiner Darstellung voneinander zu entkoppeln. CSS können nämlich weitaus mehr als nur die Schriftdarstellung zu beeinflussen. Im Prinzip können CSS alle Attribute von Objekten beschreiben, die überhaupt Attribute haben: Überschriften, Absätze, Bereiche, Bilder, Links, Tabellen komplett, oder einzelne Zellen, Bereiche... Überall, wo HTML es erlaubt, ein Style-Attribut anzugeben, stehen Stylesheets zur Verfügung. CSS selbst gehören übrigens nicht zu HTML, sondern sind eine offizielle "Ergänzungssprache" zu HTML, die praktischerweise ebenso wie HTML vom Standardisierungsgremium W3C betreut wird.

Ein Blick in die Zukunft

Warum soll man aber überhaupt den Inhalt eines Dokumentes und die Form seiner Darstellung voneinander trennen?
 
Zum einen entspricht das der Grundidee von HTML: Im Dokument wird eine inhaltliche Struktur festgelegt - das Wiedergabegerät macht daraus im Rahmen seiner technischen Möglichkeiten eine Darstellung.
 
Dann hat das eine praktische Seite: Wer ein halbwegs einheitliches Erscheinungsbild seiner Site sicherstellen will - und das ist nicht nur für große Unternehmen mit ausgefeiltem Corporate Design von Interesse - findet dafür in CSS ein ideales Mittel. Dabei geht es weniger um die von eifrigen CSS-Fürsprechern gepriesen Möglichkeit, das gesamte Erscheinungsbild einer Site durch Veränderung eines Stylesheets total zu verändern. Erstens ist das denn doch nicht so einfach, und zweitens: Wer will das schon? Viel wichtiger für die praktische Arbeit ist es, auch neu hinzukommende Dokumente mit geringem Aufwand in ein vorhandenes Layout einpassen zu können.

Die strategische Seite

Zwei Überlegungen sprechen dafür, daß die Bedeutung von CSS in sehr naher Zukunft erheblich zunehmen wird. Das eine ist die Tatsache, daß Webseiten künftig auf einem breiteren Spektrum von Geräten dargestellt werden als bisher. Mit CSS lässt sich (in weiten Grenzen) die Darstellung dem jeweiligen Gerätetyp anpassen. Das andere ist der Umstand, daß in Zukunft innerhalb und außerhalb des Netzes immer mehr Dokumente in XML-Formaten zirkulieren werden. XML beschreibt DAS Datenaustauschformat der Zukunft. Und in XML erfolgen alle Formatierungen über CSS beziehungsweise XSL. Daher wird es in Zukunft keine neuen Versionen von HTML geben, sondern HTML wird als Subset von XML unter der Bezeichnung XHTML weiterentwickelt.
 
Zukünftige Versionen von Browsern werden deshalb mehr Möglichkeiten von Stylesheets nutzen als bisher. Und wer seinen Besuchern die damit verbundenen Annehmlichkeiten nicht bietet, wird es schwer haben. Es empfiehlt sich daher, bei der Neukonzeption von Sites eine möglichst umfassende Verwendung von CSS ins Auge zu fassen. Der nachträgliche Umbau einer nach bisherigem Stil erstellten Site auf konsequenten CSS Einsatz ist nämlich keine kleine Sache - weshalb das Webwriting-Magazin sich vorläufig auch mit der Nutzung einiger weniger Eigenschaften von CSS zufrieden gibt.

Einfach-für-alle

Zur Information über das enorme Leistungsvermögen von Stylesheets empfiehlt sich ein Blick auf die in standargemäßem XHTML geschriebenen Seiten von einfachfueralle.de, deren CSS teilweise mit ausführlichen Kommentaren nachvollziehbar gemacht sind. Hier ist auch mehr über die Leistung von CSS für unterschiedliche Ausgabegeräte zu erfahren - vor allem unter dem Aspekt, Behinderten den Zugang zum Netz zu erleichern. (Ob das gelingt, wird an anderer Stelle zu prüfen sein).
 
Eine gute systematische Einführung im Print bietet das Buch von Stefan Münz und Astrid Keßler, Cascading Style Sheets, in der Reihe Internet Intern von Data Becker. Auch die neue Version von Selfhtml legt verstärkten Wert auf die Beschreibung der Möglichkeiten von CSS. Bitte downloaden und von der eigenen Platte benutzen.
 
Wer es noch ausführlicher haben möchte, findet kommentierte Links im CSS-Abschnitt unserer Linkliste.

Michael Charlier

gelber Punkt Diesen Beitrag kommentieren?
Spacer Hier geht's ins Forum »»»

Webwriting-Magazinspacer
spacer spacer zur Startseite Webwriting: Text, Design, Usability.... Tipps, Tricke, Tutorials Lob, Kritik, Rezensionen Was das Netz bewegt... Software, Tools Für Euch gelesen Surftipps, Knowhow-Quellen spacer
spacer
spacerwebwriting-magazin.despacer Newsletterspacer Forumspacerspacer Kontaktspacer
spacer