Seiten über gutes Webdesign, Usability (Benutzbarkeit) und Accessibility (Zugänglichkeit) mit HTML und CSS.
Navigation überspringen

Tipps zu Cascading Style Sheets (CSS)

Dies Seite enthält keine Einführung in CSS. Sie gibt Tipps, wie man CSS einsetzen kann bzw. soll und wie man häufige Fehler vermeidet.

Auf dieser Seite:

– — – — – — – — –

Warum überhaupt CSS?

Eigentlich kann man fast alles, was mit CSS geht, auch direkt in HTML machen. Und wenn man NN4 unterstützen will, sogar einfacher, denn der versteht CSS nicht so gut.

Der erste Grund ist ein mehr prinzipieller: Trennung von Inhalt und Formatierung. Die eigentliche HTML-Datei sollte nur Inhalt (englisch: content) und Auszeichnungen (englisch: markup) enthalten. Viele Ausgabegeräte (gerade sehr moderne wie Handys) sind in ihren Anzeigemöglichkeiten sehr stark eingeschränkt und ignorieren fast alle Formatierungen. Um zu prüfen, was dann erscheint, kann man sich seine Dateien einfach einmal ohne Stylesheet ansehen. Nicht zuletzt konzentiert man sich dann zwangsläufig mehr auf die Bedeutung (Semantik) des Inhalts und der Auszeichnung.

Aus dieser Trennung ergeben sich aber auch noch ein paar praktische Vorteile. Das Aussehen eines ganzen Webauftritts (englisch: web site) kann zentral an einer Stelle bearbeitet werden. Wer schon mal in 50 Seiten die Hintergrundfarbe geändert hat, weiß dies zu schätzen ;-). Auch muss so die Formatierungsinformation nur einmal zum Browser übertragen werden.

Ein echter Gewinn kann dann die Möglichkeit von CSS sein, die selbe Seite für unterschiedliche Ausgabegeräte angepasst zu formatieren.

– — – — – — – — –

Häufige Missverständnisse

Eigentlich ist die Aufteilung klar: Alles was logische Auszeichnung des Textes ist, kommt ins HTML. Alles was nur der Darstellung dient, soll ins Stylesheet. Leider zeigt sich zum Teil ein Trend, auf logische Auszeichnung weitestgehen zu verzichten und diese durch entsprechende Stylesheets zu ersetzen.

<div> und <span>

Dies sind, wenn man es auf die Spitze treiben will, die einzigen HTML-Elemente, die man außer <img> und <a> noch braucht. Genaugenommen kann man <span> auch noch durch <div style="display:inline"> ersetzen.

Eine Überschrift sollte als Überschrift ausgezeichnet werden (mit <hx>) und nicht als <div> mit entsprechender Formatierung. Auf einem Ausgabegerät, das die gewählte Formatierung nicht beherrscht, kommst sie sonst als normaler Text daher. Entsprechendes gilt für alle anderen HTML-Elemente auch.

<div> ist eigentlich nur sinnvoll, wenn man mehrere Blockelemente zusammenfassen will und dafür kein geeignetes Element zu Verfügung steht.

Ensprechend gilt für <span>, dass es nur für Formatierungen eingesetzt werden soll, auf die man im Zweifel auch verzichten kann.

Tabellen

Tabellen, insbesondere solche, die nur dem Layout dienen, gelten vielen als schlechter Stil. Hier sollte man aber nicht gleich das Kind mit dem Bade ausschütten.

Auch wenn es im Netz viele Beispiele dafür gibt, wie man mit <div>s und entsprechender Formatierung durch CSS Tabellen ersetzen kann: Wenn die Daten nach einer Tabelle rufen, soll man auch eine verwenden. Man sehe sich diese Pseudo-Tabellen mal in einem Browser ohne CSS an!

Da die Positionierung von Elementen in vielen Browsern noch Probleme bereitet, ist auch der sparsame Einsatz einer Layouttabelle durchaus sinnvoll und vernünftig. Dies muss kein Widerspruch zur Zugänglichkeit der Seite sein.

Wer eine komplexe Tabelle einsetzt, um ein pixelgenaues Layout zu erzeugen, macht prinzipiell etwas falsch. Da hilft CSS auch nicht wirklich weiter.

Urheber © Dr. Joachim Wiesemann

Letzte Aktualisierung: 27.5.2006

– — – — – — – — –

Verweise (Links)