Grundlagen

Webdesign mit CSS

Auf den ersten Blick scheint CSS nicht allzu viel mit Barrierefreiheit zu tun zu haben - geht es doch zunächst um validen HTML-Code. Stellt man aber die Trennung von Layout und Inhalt in den Vordergrund, dann erscheint CSS gleich in einem ganz anderen Licht. Während die HTML-Codeblöcke für ein stabiles Grundgerüst sorgen, ist CSS für das Erscheinungsbild der Inhalte zuständig.

Ein sehr passende (wenn auch flapsige Beschreibung) der technischen Herangehensweise findet sich in einem Artikel von Joe Clark: er verwendet die Metapher des Ingenieurs namens HTML, der mit einer angesehenen und trendigen Innenausstatterin verheiratet ist: CSS. Der Ingenieur zimmert Stützbalken so zusammen, dass niemand auf abscheuliche Weise beim Betreten eines Gebäudes ums Leben kommt, sobald man aber anfängt, über Gardinen zu reden, schickt man ihn am besten in den Keller, wo er mit seiner Modelleisenbahn spielen kann. Für die wirklich wichtigen Dinge lässt man besser die Innenausstatterin ans Werk. Kurz: nachdem Skelett und Muskeln einer Website (HTML) stehen, kann man diesen "Körper" (nicht umsonst haben verwenden wir das <body>-Tag) in jeden glamourösen, glitzernden und tiefausgeschnittenen Fummel stecken, den man sich vorstellen kann.

Wie wendet man CSS an?

CSS kann man entweder im Kopf einer (X)HTML-Datei platzieren, in eine externe Datei auslagern (empfohlen) oder in den Tags integrieren (embedded CSS).

<head>
  <title>Untitled</title>
  <style type="text/css">
    p.text { color: #f00; }
  </style>
</head>

CSS-Definitonen im Kopf einer Seite

<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="style.handheld.css">
</head>

Auslagerung der CSS-Definitionen in eine externe Datei

embedded CSS

Eigene Stylesheets zu erstellen ist simpel: man braucht eigentlich nur ein paar grundlegende HTML-Kenntnisse, um loszulegen. Ein Beispiel: um die Textfarbe einer Überschrift 1. Ordnung <h1> festzulegen, benutzt man diese Regel:

h1 { color: red; }

Überschrift farbig formatieren

Jede CSS-Regel besteht aus zwei Hauptteilen, dem Selektor (h1) und der Deklaration (color:red). Die Deklaration besteht ebenfalls aus zwei Teilen, der Eigenschaft "color" und dem Wert "red". Daraus ergibt sich folgende Syntax:

SELEKTOR { Eigenschaft: Wert; }

Grundlegende Syntax für CSS-Regeln

Der Selektor h1 ist die Verbindung zwischen HTML und dem Stylesheet, und alle gültigen HTML Elemente sind mögliche Selektoren.

Die Eigenschaft 'color' ist nur eine von vielen Eigenschaften, mit denen man das Aussehen des HTML Dokumentes beeinflussen kann.

Um Styles Sheets möglichst klein zu halten, kann man Selektoren in Gruppen zusammenfasen, indem man sie mit Kommata vor der Deklaration trennt:

h1, h2, h3, div { font-family: Arial; }

Selektoren zusammenfassen

Genau so kann man auch mehrere Eigenschaften zusammenfassen:

h1 {
  font-weight: bold;
  font-size: 1em;
  line-height: 105%;
  font-family: Arial;
}

Eigenschaften zusammenfassen

Zusätzlich haben einige Eigenschaften ihre eigene Gruppierungssyntax:

h1 { font: bold 12px/14px Arial }

Eigenschaften gruppieren

Dieses Beispiel ist mit dem oberen identisch. Um den Einsatz von Styles möglichst flexibel zu gestalten, gibt es das HTML-Attribut class. Für alle Elemente innerhalb von body kann das Attribut definiert werden, und die Klasse (class) kann im Stylesheet deklariert werden:

.gruen { color: green }

Klassen deklarieren

Das HTML Attribut "id" kann ebenfalls als Selektor verwendet werden. Der Unterschied zu "class" besteht darin, das ein "id" ein Unikat in dem Dokument sein muss, also jeder Wert für "id" darf nur einmal auftauchen. Auf diese Wiese ausgezeichnete Elemente erhalten daher eine besondere Bedeutung. Deklariert werden "id"-Selektoren mit einem vorangestelltem "#"

#wide { letter-spacing: 0.3em }
h1#wide { letter-spacing: 0.5em }

Elemente mit ID auszeichnen

In (X)HTML sieht die Anwendung der obigen Beispiele dann so aus:

Codebeispiel in (X)HTML

CSS-Anweisungen kann man sehr gut dafür nutzen, um immer wiederkehrende Elemente aus dem (X)HTML-Dokument zu verbannen. Das bei image-Tags übliche border="0" kann in CSS so definiert werden:

img { border: 0px; }

Wiederkehrende Eigenschaft per CSS definieren

Auch Farbdefinition RGB (rot, grün, blau) mit color kann man mit CSS abkürzen:

color: #f00; /* ist das gleiche wie: */ color: #ff0000;
color: #000; /* ist das gleiche wie: */ color: #000000;
color: #a37; /* ist das gleiche wie: */ color: #aa3377;

Farbwerte abkürzen

Bekanntlich besteht eine Farbdefinition in (X)HTML aus drei hexadezimal codierten Bytewerten, die für die Farbanteile rot, grün und blau stehen (RGB) und umfasst daher sechs Zeichen. Kürzt man eine Farbe auf drei Zeichen ab, interpretiert der Browser diese Zeichen als den höherwertigen Anteil (Nibble) jedes Farbbytes und das niederwertige Nibble wird diesem gleichgesetzt. Daher lassen sich nur solche Farbwerte abkürzen, deren Farbbytes aus gleich großen Nibbles bestehen.

Von Boxen und fließenden Containern

Haben Programmierer und Webdesigner bisher gestalterische Merkmale wie Logos oder Bilder per Tabelle entsprechend auf der Webseite platziert, kann man mit CSS durchaus effizientere Methoden anwenden, die zudem bei richtiger Anwendung auch valide sind.

Angst um die lieb gewonnenen Tabellen braucht aber niemand zu haben. In Form von reinen Datentabellen bleiben sie uns erhalten. Alle anderen Tabellen fliegen raus und werden beispielsweise durch DIV-Container ersetzt. Abstriche im Design braucht man ebenfalls nicht zu machen - auch komplexe Webseiten lassen sich mit dieser Technik problemlos umsetzen. Container lassen sich durch die Nutzung der float-Eigenschaft fließend nebeneinander platzieren:

<div style="float: left; width: 100px;">Der 1. Container</div>
<div style="float: left;">Dieser Container erschein auf Grund von float direkt neben dem 1. Container</div>
<br style="clear: both;" /> /* Erzwingt einen Umbruch für den nachfolgenden Inhalt*/

Zwei <div>-Container nebeneinander

Container lassen sich auch absolut, also pixelgenau platzieren. Als Referenz dient entweder der Seitenrahmen (position: absolute;) oder das Mutterelement (position: relative;). Mit dem z-index kann man die Reihenfolge bei Überlappungen von anderen Containern bestimmen. Ein Beispiel:

<div style="position: absolute; top: 50px; left: 130px; z-index: 5;">Mein positionierter Container</div>

Container platzieren

In unseren Beispiel einer Miniwebsite zeigen wir die Anwendung solcher Container. (siehe Kapitel 4.1).

Semantisch statt visuell

Was ist denn eigentlich der Unterschied zwischen den Tags <b>bold</b> im Vergleich zu <strong>strong</strong> und <i>italic</i> im Vergleich zu <em>emphasis</em>?

Zwar werden beide Paare von Tags in den allermeisten Browsern gleich dargestellt: "bold" und "strong" ergeben beide Fettdruck: "italic" und "emphasis" kursive Schrift. Der Unterschied besteht darin, dass es sich bei "bold" und "italic" um Tags zur visuellen Darstellung handelt, während "strong" und "em" hingegen semantische, logische Tags sind. Die visuelle Darstellung legt also lediglich fest, wie ein Browser den so formatierten Text darstellt. Die semantische Darstellung hingegen beinhaltet stattdessen tatsächlich eine Hervorhebung bzw. Betonung - stellt dem Lesegerät oder Browser also exakte Befehle bereit. Die semantische Kennzeichnung mittels "strong" und "emphasis" ist somit immer sinnvoller, als die Kennzeichnung mittels bold und italic.

Anderes Beispiel: Mit den Aural-Definitionen von CSS kann man die Lesefunktionen beeinflussen. Das sieht dann so aus:

volume: loud;
speak-numeral: continuous;

Vorleseoptionen kontrollieren

Je genauere Definitionen man anlegt, desto größer ist die Chance, dass der eigene Text genauso verstanden wird, wie er gemeint war.

Unterschiedliche Ausgabemedien

Einer der größten Vorteile von CSS besteht darin festzulegen kann, wie ein Dokument auf unterschiedlichen Ausgabeeinheiten jeweils dargestellt werden soll. Man kann also getrennte Stylesheets für die Bildschirmdarstellung und für die Druckausgabe festlegen.

all	Passend für alle Ausgabegeräte.
aural	Sprachausgabe des Dokuments
braille	Ausgabe auf einem Tastgerät für Blinde
embossed	Ausgabe auf einem Drucker für Blindenschrift
handheld	Gedacht für Ausgabeeinheiten, die in der Hand gehalten werden (normalerweise kleiner Bildschirm, geringe Bandbreite)
print	Ausgabe auf nicht durchsichtigem Material (in der Regel ein normaler Papierausdruck)
projection	Projektion, z.B. mit einem Video-Beamer
screen	Darstellung auf einem farbigen Computer Bildschirm
tty	Ausgabe in einem Terminalfenster, d.h. nur Text verfügbar, keine Grafiken, keine Pixelmaße (z.B. Lynx)
tv	Ausgabe auf einem Fernseher (kleine Auflösung, Farbe, nur bedingt scrollfähig, Sound immer verfügbar)

CSS-Medientypen

Die Einbindung solcher Stylesheets könnte so aussehen:

Mehrere Styles für unterschiedliche Medientypen einbinden

Da ältere Browser (wie der Netscape 4.7) diverse Formatierungen einfach nicht versteht, könnte man Usern eines solchen Browsers ein <div> mit einem Warnhinweis auf die alte Technologie einblenden.

@import url("style.basic.css");

Basis-Style einbinden

Mit der oberen Anweisung importieren wir im screen-Stylesheet unsere Basis-Styles. Dort stellen wir unser div mit dem Hinweistext auf "anzeige":

div.hinweis { visibility: visible; display: block; }

Hinweistext für ältere Browser

In allen anderen Ausgabemedien und auch später im "screen" verstecken wir hingegen den Hinweis:

div.hinweis { visibility: hidden; display: none; }

Der gleiche Hinweis: diesmal für neuere Browser