1. Herfried K. Wagner’s VB.Any
  2. Web
  3. Artikel

Cascading Style Sheets

Kurzfassung

Bei der Gestaltung von Webdokumenten binden viele Entwickler Anweisungen zur Formatierung der Daten direkt in die Dokumente ein. Meist besitzen sie nicht einmal eine Datei, in der die rohen Daten enthalten sind. Dadurch ergeben sich nach einiger Zeit vollkommen mit Designelementen überladene Dateien, die ein geringes Mass an Benutzbarkeit aufweisen. Cascading Style Sheets sind eine Technologie, mit der man der Trennung von Daten und deren Präsentation etwas näher kommt.

Einleitung

Im Internet sieht man in letzter Zeit immer mehr Seiten, die in der Gestaltung von den Standardvorgaben abweichen und eigene Schriftarten und Farben benutzen. Dass dies möglich ist, ist einerseits als Vorteil zu sehen, da einem als Webdesigner mehr Möglichkeiten offen stehen, allerdings erweist es sich bei näherer Betrachtung auch als Nachteil, da Benutzergruppen von der Betrachtung von Seiten ausgeschlossen werden können. Häufig wird zum Erstellen und Bearbeiten von Webdokumenten auch auf WYSIWYG-Editoren zurückgegriffen, die es erlauben, in einer grafischen Umgebung das Aussehen von Elementen auf der Seite zu spezifizieren. Auch dies ist ein Vorteil für den Entwickler, jedoch oft ein gravierender Nachteil, da die erstellten Seiten vielfach nicht nach logischen Gesichtspunkten strukturiert sind.

Gerade Personen mit körperlichen Einschränkungen haben unter dem Mangel an Struktur innerhalb der einzelnen Dokumente stark zu leiden. So können sehbehinderte Personen manche Farben nur schwer wahrnehmen und kleine Schrift schwer erkennen. Die Strukturierung von Seiten in Überschriftenebenen ist wichtig, damit auch eine eventuell vorhandene Audioausgabe in sinnvoller Art und Weise eingesetzt werden kann. Wenn nun der Webdesigner auf Tabellen als Mittel zur Spezifikation des Seitenlayouts zurückgreift, dann wird dadurch der Syntax zur Spezifikation einer Tabelle eine andere Semantik, nämlich einer, die das Aussehen definiert, und nicht einem Mittel zur logischen Auszeichnung von tabellarisch angeordneten Inhalten, zugeordnet.

Was sind Style Sheets?

Style Sheets sind ein Mittel, um durch Marken strukturierte Informationen ein spezielles Aussehen zu geben, das vom durch den Browser vorgegebenen Standardaussehen abweicht. Genauer handelt es sich dabei um Formatvorlagen, die das Layout eines Textabschnitts, einer Graphik oder eines anderen Objekts individuell, für die ganze Datei oder für das gesamte Projekt vorgeben. Es können sowohl zentrale Formate, z. B. für Absätze, Überschriften und Links, definiert werden, die im gesamten Dokument gelten, als auch einzelne Abschnitte innerhalb des Dokuments bzw. eines Absatzes benutzt werden, um die Informationen bei der Darstellung entsprechend zu rendern.

Durch den Einsatz von Style Sheets sind Formatierungen möglich, die weit über die Möglichkeiten von normalem HTML hinausreichen (z. B. Links ändern beim Überfahren ihre Farbe, Text wird in Grossbuchstaben angezeigt etc.). In diesem Artikel werden die häufigsten und einfachsten Einsatzmöglichkeiten exemplarisch beschrieben, ohne einen Wert auf Vollständigkeit zu legen. Eine formale Spezifikaton der Syntax von Style Sheets findet man auf der Website des W3C.

Einige Anwendungsbeispiele

Die Definitionen von Style Sheets können entweder im head-Bereich von HTML-Dateien eingebaut oder in einer externen Datei abgelegt werden. Es besteht auch die Möglichkeit, innerhalb des HTML-Dokuments an beliebigen Stellen Style Sheet-Formatierungen einzufügen. Um die beste Trennung von Inhalt und Formatierung zu erzielen, sollten Style Sheet-Defintionen nach Möglichkeit in einer externen Datei abgelegt werden.

Folgendes Beispiel verändert das Aussehen von Überschriften ersten Grades, von Hyperlinks, Absätzen und von kursiven sowie fetten Textabschnitten. Innerhalb des head-Bereichs des HTML-Dokuments sind die Formatdefintionen zu sehen, im Seitenkörper ist keine weitere Anpassung erforderlich. Ausserdem wird die Hintergrundfarbe des Dokuments in einen Grauton geändert. Dies ist die einfachste und auch am einfachsten zu wartende Version, wenn das Style Sheet nur für eine Seite verwendet werden soll. Will man mehrere Seiten im gleichen Design erscheinen lassen, dann kann man die Formatdefintionen in eine eigene Datei auslagern:

<html>
  <head>
    <title>Titel des Dokuments</title>
    <style type="text/css">
      body {
        background-color: gainsboro;
      }
      a {
        font-size: 10pt;
        color: blue;
        text-decoration: none;
      }
      a:hover {
        font-size: 10pt;
        color: red;
        text-decoration: underline;
      }
      h1 i {
        letter-spacing: 2px;
      }
      p, b {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>Beispielüberschrift ersten Grades</h1>
    <p><a href="mailto:joe@example.org">joe@example.org</a></p>
    <p>Das ist ein <i>kursives</i> ein Wort und das ist ein <b>fettes</b>.</p>
  </body>
</html>

In HTML besteht die Möglichkeit, Elemente zu schachteln. Beispielsweise kann man Begriffe innerhalb von Absätzen, das sind sowohl „normale“ Absätze sowie andere absatzbildende Elemente wie Überschriften, kursiv setzen. Dazu wird einfach der gewünschte Bereich von zwei passenden Elementen umschlossen.

Das folgende Beispiel erreicht, dass mit dem i-Element kursiv formatierte Textabschnitte nicht wie sonst üblich kursiv, sondern normal und mit blauer Farbe dargestellt werden, wenn sich der damit markierte Textbereich innerhalb einer Überschrift erster Ordnung befindet. In der Formatdefintion wird dazu zuerst das übergeordnete Element, im Beispiel h1, und dahinter, durch ein Leerzeichen getrennt, das untergeordnete Element, im Beispiel i, angegeben. Die Defintion im folgenden Listing lässt das Aussehen von als kursiv markierten Textteilen, die sich nicht in einer Überschrift erster Ordnung befinden, unberührt:

<html>
  <head>
    <title>Titel des Dokuments</title>
    <style type="text/css">
      h1 {
        color: red;
      }
      h1 i {
        color: blue;
        font-weight: normal;
      }
    </style>
  </head>
  <body>
    <h1>Wir lernen <i>Style Sheets</i></h1>
    <p>Wir lernen <i>Style Sheets</i>.</p>
  </body>
</html>

Für einige HTML-Elemente existieren Pseudoformate, die das Verhalten des Elements zur Laufzeit, also dann, wenn der Benutzer mit der Seite interagiert, festlegen. Ein Beispiel dafür stellen Hyperlinks dar, denen man u. a. eine eigene Farbe zuordnen kann, in der sie erscheinen sollen, wenn sich der Mauszeiger darüber befindet. Das Pseudoformat wird getrennt durch einen Doppelpunkt hinter dem Namen des betreffenden HTML-Elements (allgemeiner: der Style-Klasse) angegeben. Bei Links kann z. B. link, avtive (aktiver Link), hover (beim Überfahren des Links) und visited (bereits besuchter Link) als Schlüsselwort hinter dem Element verwendet werden.

a:hover {
  color: red;
  text-decoration: underline;
}

Es besteht die Möglichkeit, Informationen, die von den selben Element eingeschlossen werden, unterschiedliche Formatierungen zuzuordnen. Zu diesem Zweck besitzen in HTML die Elemente ein Attribut class, das den Namen einer Formatklasse enthalten kann. Im Style Sheet wird der Name der elementspezifischen Klasse durch einen Punkt getrennt an den Namen des betroffenen Elements angehängt. Will man, dass eine Klasse zu allen Elementen gehört, dann kann man vor dem Punkt das optionale Schlüsselwort all angeben. Diese Möglichkeit bringt zwar etwas mehr Flexibilität in die Gestaltungsmöglichkeiten, widerspricht aber der Trennung von Design und Daten. Trotzdem ist es manchmal sinnvoll, auf eigene Klassendefinitionen zurückzugreifen:

<html>
  <head>
    <title>Titel des Dokuments</title>
    <style type="text/css">
      i.gruen {
        color: green;
      }
      p.normal {
        font-size: 10pt;
        color: black;
      }
      p.gross {
        font-size: 12pt;
        color: black;
      }
      p.klein {
        font-size: 8pt;
        color: black;
      }
      all.rot {
        color: red;
      }
      .blau {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p><i>Normaler kursiver Text.</i></p>
    <p><i class="gruen">Grüner kursiver Text.</i></p>
    <p class="normal">Normaler Textabsatz mit Schrift 10 Punkt schwarz.</p>
    <p class="gross">Textabsatz mit Schrift 12 Punkt schwarz.</p>
    <p class="klein">Textabsatz mit Schrift 8 Punkt schwarz.</p>
    <p class="rot">Roter Textabsatz.</p>
    <address class="rot">Roter Absatz für Adressen.</address>
    <blockquote class="blau">Blaues Zitat.</blockquote>
  </body>
</html>

Soll mehreren Elementen bzw. Formatklassen das selbe Format, also Aussehen, zugeordnet werden, dann reicht es, die Namen der Klassen durch Beistriche getrennt hintereinander anzugeben. Weiters kann man in HTML Elemente mit einer innerhalb des Dokuments eindeutigen ID versehen, zu der man auch ein eigenes Format definieren kann. Im folgenden Beispiel wird das Element bluediv beispielsweise mit blauem Text versehen. Bei der Formatdefintion muss dem Klassennamen eine Raute „#“ („Lattenzaun“) vorangestellt werden:

<html>
  <head>
    <title>Titel des Dokuments</title>
    <style type="text/css">
      #bluediv {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div id="bluediv">Das ist ein Bereich mit der ID bluediv.</div>
  </body>
</html>

Doch man kann nicht nur bestehenden Elementen, die die logische Struktur des Dokuments definieren, ein spezielles Aussehen verpassen. Es besteht nämlich die Möglichkeit, Text in einen Span einzuschliessen und bei diesem den Klassennamen anzugeben: Das span-Element wird verwendet, um Objekte (Textbereiche, Graphiken etc.) zu formatieren bzw. zusammenzufassen. Im folgenden Beispiel wird einem Abschnitt ein roter Rahmen hinzugefügt und einem anderen Abschnitt die Klasse redtext aus dem im head-Bereich definierten Style Sheet zugewiesen. Wie man am nachstehenden Beispiel erkennen kann, ist es möglich, im Attribut style, das bei den meisten Elementen angegeben werden kann, Formatdefintionen direkt zu plazieren:

<p>
  Das
  <span
    style="border-width: thin; border-style: solid; border-color: red"
  >
    ist <i>ein</i> Text
  </span>.
</p>
<p>Das ist <span class="redtext">roter Text</span>.</p>
<p style="font-weight: bold">Fetter Absatz.</p>
<p><img style="border-color: red" src="bild1.jpg" width="60" height="40"/></p>
<hr style="color: red; width: 100%; height: 2px"/>

Wie bereits zuvor erwähnt kann man die Definitionen der Formatklassen auch in einer externen Datei ablegen, die man mit dem HTML-Dokument verknüpfen kann. Dies ist besonders dann sinnvoll, wenn es mehrere Seiten gibt, die das selbe Aussehen erhalten sollen, da einerseits die Dateien kleiner werden und andererseits Anpassungen zentral in der Style Sheet-Datei vorgenommen werden können. Innerhalb der HTML-Dokumente muss um head-Bereich folgender Verweis eingefügt werden, damit die Datei erknüpft wird:

<link rel="stylesheet" type="text/css" href="./style1.css"/>

Es besteht die Möglichkeit, mehrere Style Sheet-Dateien mit dem HTML-Dokument zu verbinden. Dadurch kann man die Formatvorlagen noch weiter in logisch zusammengehörige Blöcke gruppieren und einem modularen Konzept folgend Style Sheets für unterschiedliche Medien definieren.

Schlusswort

Zum Zeitpunkt als dieser Artikel in seiner ursprünglichen Version verfasst wurde, waren Cascading Style Sheets „state of the art“ und noch in den Kinderschuhen. Selbst mehrere Jahre nach der Standardisierung der Style Sheets wurde von deren Verwendung abgeraten, da einige populäre Browser sie nicht ordentlich unterstützten. Als endlich die meisten Browser in der Lage waren, mit Style Sheets in ihrer ersten Version umzugehen, war der Standard schon wieder veraltet und durch neue Vorschläge ersetzt worden.

Gleich wie in einigen Programmiersprachen ist auch beim logischen Auszeichnen und dem Formatieren von Inhalten für das Internet noch immer keine Stabilität in der Syntax zu erkennen. Man kann gespannt sein, wie sich dieser interessante Sektor weiterentwickelt und wann Dokumente wie dieses als „veraltet“ angesehen werden.