HTML mit Stil - Teil II
Cascading Style Sheets

von Peter Marksteiner (Ausgabe 03/1, März 2003)

 

1. Einleitung

"Wie gefällt Ihnen der Klang der neuen Homepage der Uni Wien?" - Diese Frage kommt Ihnen wahrscheinlich absurd vor. Sie ist aber nicht viel absurder als die Frage "Wie gefällt Ihnen das Aussehen der neuen Uni-Homepage?" Das Aussehen ist - ebenso wie der Klang - keine unmittelbare Eigenschaft einer Webseite, genauer gesagt, eines HTML-Dokuments. Ein solches Dokument hat einen Inhalt, eine Struktur, und enthält eine Reihe von Anweisungen an ein Endgerät (den sogenannten User Agent), wie diese Inhalte darzustellen sind. In den meisten Fällen ist der User Agent ein grafischer Webbrowser, der auf einem PC läuft - er kann aber auch etwas ganz anderes sein: z.B. ein Laserdrucker, ein Mobiltelefon, ein Sprach-Synthesizer oder ein Robot, der das Web durchsucht, um es für eine Suchmaschine zu indizieren.

Das Aussehen - oder allgemeiner: die Präsentation - einer Webseite ergibt sich erst dadurch, wie der User Agent diese Anweisungen umsetzt. Hier können die Ergebnisse recht unterschiedlich sein. Abgesehen davon, daß die Anweisungen meistens einen beträchtlichen Spielraum lassen, kann sie der User Agent oft gar nicht befolgen:

  • Sie werden vom User Agent nicht unterstützt oder sind nicht anwendbar - z.B. wird ein Schwarzweiß-Drucker Farbangaben ignorieren und ein Text-Browser oder ein Sprach-Synthesizer den gewünschten Zeichensatz; Browser ohne entsprechende Software-Unterstützung werden Java-Applets und dergleichen nicht ausführen usw.
  • Sie werden nicht oder falsch verstanden: Die wenigsten HTML-Dokumente sind syntaktisch korrekt und standard-konform. Die meisten enthalten Syntax-Fehler und verwenden alle möglichen Erweiterungen, die über die HTML-Standards hinausgehen - die User Agents können nur raten, was damit gemeint sein könnte. Andererseits ist auch fast kein User Agent fehlerfrei: Browser-Bugs führen oft zu einer falschen Darstellung vollkommen richtiger Dokumente.

Dazu kommt noch, daß der User Agent die Anweisungen manchmal nicht befolgen will - beispielsweise bevorzugen Leute mit Sehschwächen oft größere Schriften, auch wenn viele Webdesigner winzige Schriften für besonders elegant halten. Werbe-Popups werden von vielen als lästig empfunden - von mir nicht, weil ich keine sehe: Ich habe meinen Browser so konfiguriert, daß er unaufgefordert keine Fenster öffnet.

Soweit die Theorie, oder besser gesagt, die Absichten der Erfinder des WorldWideWeb. In der Zwischenzeit wird das Web hauptsächlich für ganz andere Zwecke genutzt als für den Informationsaustausch unter Teilchenphysikern. Damit ist auch eine neue Generation von Webdesignern herangewachsen, der die Prinzipien der Web-Pioniere am CERN von Herzen egal sind: Sie betrachten Webseiten ausschließlich als grafisches Medium - vor allem in der Werbebranche ist die grafische Gestaltung oft wichtiger als der Inhalt -, sie verwenden WYSIWYG-Editoren (What You See Is What You Get) und erwarten, daß ihre Webseiten immer und überall so aussehen wie auf ihrem eigenen Bildschirm. Sie haben wenig Verständnis für Benutzer-Präferenzen, die von ihren eigenen Design-Vorstellungen abweichen.

Dieser Standpunkt hat durchaus seine Berechtigung: Es ist legitim, daß Werbeagenturen andere Bedürfnisse haben als Physiker. Das ändert aber nichts an der Tatsache, daß sich diese Ziele mittels HTML bestenfalls nur annähernd und mit allen möglichen Tricks (z.B. Layout mittels komplizierter Tabellen) erreichen lassen: HTML ist schlicht und einfach nicht dazu gedacht, das Layout und die grafische Gestaltung einer Seite zu beschreiben.

Es gibt noch immer keine perfekte Lösung, diese beiden widersprüchlichen Auffassungen miteinander zu vereinen, aber immerhin gibt es eine gute Näherung: Die Lösung besteht darin, HTML als Sprache ausschließlich oder zumindest weitgehend dazu zu verwenden, wozu sie ursprünglich erfunden wurde, nämlich um die Struktur von Text-Dokumenten zu beschreiben. Für alles andere - Farben, Zeichensätze, Schriftgrößen, Layout, Hintergrundbilder usw. - wird eine eigene Sprache verwendet, die speziell für solche presentational hints gedacht ist: Cascading Style Sheets.

2. Das Prinzip von CSS - ein einfaches Beispiel

Wie jede Computersprache haben Cascading Style Sheets (üblicherweise mit CSS abgekürzt) eine wohldefinierte Syntax mit strengen Regeln, was gültig ist und was nicht. Wie bei vielen Sprachen gibt es mehrere Varianten. In diesem Artikel wird ausschließlich auf den derzeit aktuellen Standard eingegangen, das sind Cascading Style Sheets Level 2 (CSS2).

Betrachten wir ein Beispiel1) eines Style Sheet:

body {
/* Style Sheets können Kommentare enthalten */
background-image: url("wolken.jpg");
background-color: white;
color: #333333;
font-family: Verdana, Helvetica, sans-serif;
margin: 1em;
}
/* Styles können sich auf mehrere Elemente beziehen */
h1, h2, h3 { text-align: center; }
h1 { color: rgb(200,0,0) } /* dunkelrot */

Dieser Style Sheet enthält eine Reihe von Style-Definitionen zu den HTML-Elementen body, h1, h2 und h3. Diese Definitionen stehen, durch Strichpunkte getrennt, in geschwungenen Klammern. Jede dieser Definitionen besteht aus einem Attribut wie Größe, Farbe, Zeichensatz usw., dem ein Wert zugewiesen wird, manchmal auch mehrere. So bedeutet font-family: Verdana, Helvetica, sans-serif, daß für Text der Zeichensatz Verdana verwendet werden soll. Steht dieser nicht zur Verfügung, so soll stattdessen Helvetica verwendet werden und statt Helvetica ein beliebiger Zeichensatz der Schriftfamilie sans serif. Der gesamte Inhalt des Dokuments soll einen Abstand von einem em zum Browserfenster haben. Diese Einheit (abgeleitet vom Buchstaben M, der in den meisten Zeichensätzen der größte ist), bezeichnet die Größe (font-size) des verwendeten Zeichensatzes. Es gibt noch viele andere absolute und relative Größeneinheiten, z.B. px (Pixel), pt (Point = 1/72 Zoll), cm (Zentimeter). Auch Werte wie small oder large können angegeben werden - dann werden die Details dem User Agent überlassen. Es gibt mehrere Methoden, die gewünschten Farben anzugeben: Für 16 Farben sind im Standard Namen definiert,2) für alle anderen Farben müssen RGB-Werte verwendet werden - entweder in hexadezimaler Form wie in #333333 oder in Dezimalform wie in rgb(200,0,0).

3. HTML und CSS

Wie kombiniert man nun HTML-Dokumente mit Style Sheets? Die aktuellen Standards XHTML 1.0 und HTML 4.01 bieten mehrere Möglichkeiten, ein HTML-Dokument um Style-Angaben zu erweitern:

  • Für fast jedes Element kann ein style-Attribut angegeben werden, z.B.:
    <h1> 
    Diese Überschrift ist grün und steht am rechten Rand
    </h1>
    <p>
    Dieser Absatz ist eingerückt und kleingedruckt.
    </p>
  • Im head eines HTML-Dokuments können Styles mit Hilfe eines oder mehrerer style-Elemente definiert werden, z.B.:
    <head>
    <style type="text/css">
    /* grosser Zeilenabstand */
    p { font-size: 1em; line-height: 2em; }
    /* Überschriften fett und kursiv */
    h1, h2, h3 { font-style: italic; font-weight: bold; }
    </style>
    </head>
  • Mit Hilfe eines link-Elements im head kann auf einen externen Style Sheet (oder auch mehrere) verwiesen werden:
    <head> 
    <link rel="stylesheet" href="external.css" type="text/css">
    <link rel="alternate stylesheet" title="Mit Verzierungen"
    href="fancy.css" type="text/css">
    </head>

Im obigen Beispiel ist external.css der primäre Style Sheet. Der User Agent sollte den Benutzern eine Liste aller alternativen Style Sheets anbieten, was allerdings nur von wenigen Browsern (z.B. Mozilla) unterstützt wird. Auch mit @import kann ein externer Style Sheet importiert werden (siehe Abschnitt Browser-Unterstützung). In den meisten Fällen ist ein externer Style Sheet empfehlenswert: Ein einziger Style Sheet für sämtliche HTML-Dokumente ist eine effiziente Methode, die grafische Gestaltung einer Webpräsenz zu vereinheitlichen. Zusätzlich werden so die Dateigrößen reduziert.

Es gibt einige HTML-Elemente und Attribute, die zwar unmittelbar nichts mit Style Sheets zu tun haben, aber in Verbindung mit solchen besonders nützlich sind. Mit dem Attribut class können beliebige HTML-Elemente Klassen zugeordnet werden, z.B:

<p>

Der Name einer Klasse ist dabei willkürlich und kann frei gewählt werden. In einem Style Sheet können die Eigenschaften von Elementen definiert werden, die einer bestimmten Klasse angehören:

span class="code"

.footnote { 
font-size: 0.7em;
margin-left: 2em;
}

Das Attribut id hat eine ähnliche Funktion wie das Attribut class: Der wesentliche Unterschied ist, daß ein Element mit einem solchen Attribut in einem HTML-Dokument nur einmal vorkommen darf; ein korrektes HTML-Dokument kann also nur einmal die Zeile

<p id="header">

enthalten. Mit folgender Syntax wird für ein solches Element ein Style definiert:

#header { 
/* sehr groß, rot, fett und zentriert */
text-align: center;
font-size: xx-large;
font-weight: bold;
color: red;
}

Das HTML-Element div bezeichnet eine "neutrale" Unterteilung eines HTML-Dokuments, d.h. es ist damit keine besondere Bedeutung wie Überschrift, Absatz oder dergleichen assoziiert. div-Elemente können mehrere unterschiedliche HTML-Elemente enthalten:

<div> 
<h1>Das ist die Überschrift</h1>
<p>Das ist der erste Absatz</p>
<p>... und das ist der zweite</p>
<p>... und alles miteinander ist blau eingerahmt</p>
</div>

Eine spezielle Bedeutung erhält ein solches div-Element erst durch den dazugehörigen Style Sheet:

.kasten {
padding: 6px;
border-width: 4px;
border-style: solid;
border-color: blue;
}

Das HTML-Element span hat eine ähnliche Funktion wie div, ist aber auf "Inline-Elemente" beschränkt:

<p>
In diesem Absatz stehen mehrere Namen, z.B.
<span>Meier</span>,
<span>Müller</span> und
<span>Huber</span>. In einem
Style Sheet kann definiert werden, wie Namen
von Personen darzustellen sind.
</p>


4. Was bedeutet Cascading?

Der Style Sheet, der in einem HTML-Dokument angegeben wird (der Author Style Sheet), ist nicht der einzige, der bei der Darstellung dieses Dokuments durch einen User Agent berücksichtigt wird. Jeder standard-konforme User Agent hat einen Default Style Sheet oder verhält sich zumindest so, als hätte er einen. Dazu kommt noch der User Style Sheet: Jeder Benutzer eines User Agent kann seine Präferenzen bezüglich Farben, Zeichensätzen, Größen usw. bekannt geben.3) Der CSS2-Standard liefert in Kapitel 6.4 eine genaue Definition der Kaskade, d.h der Reihenfolge, in welcher die Regeln aus den verschiedenen Style Sheets zum Tragen kommen. Vereinfacht gesagt, gelten zuerst die Regeln des Author Style Sheet, dann die des User Style Sheet und zuletzt die des Default Style Sheet. Eine Ausnahme sind Regeln im User Style Sheet, die mit important! gekennzeichnet sind - diese haben höhere Priorität als der Author Style Sheet.

Generell sind die Konzepte der Präzedenz und der Vererbung sehr wichtig bei Style Sheets: Wenn für ein bestimmtes Element mehrere Style-Definitionen in Frage kommen, so entscheiden Präzedenz-Regeln, welche Definitionen höheres Gewicht haben. Schließlich können manche abgeleiteten Elemente (descendants) Eigenschaften ihrer "Vorfahren" (parent elements) erben. Eine detaillierte Diskussion der Präzedenz-Regeln würde hier zu weit führen; im wesentlichen aber gilt: Spezifische Regeln haben ein höheres Gewicht als allgemeine Regeln.

Das folgende Beispiel illustriert einige dieser Regeln:

p.blue { color: blue } /* Nr. 1 */
p { color: green } /* Nr. 2 */
.green { color: green } /* Nr. 3 */
p { color: red } /* Nr. 4 */
div { color: yellow } /* Nr. 5 */
/* Es folgt "p span" - nicht verwechseln mit "p, span" */
p span { color: green } /* Nr 6. */

Die letzte Zeile dieses Style Sheet hat eine besondere Bedeutung: Sie definiert einen Style, der nur für Elemente des Typs span gilt, die sich innerhalb eines Elements <tt>p</tt> befinden. Die folgenden HTML-Fragmente zeigen, welche dieser sechs Styles unter welchen Umständen zu tragen kommen:

<p>Dieser Text ist blau.</p>

Für Elemente des Typs p gibt es drei Styles (Nr. 1, Nr. 2 und Nr. 4). Die Style-Definition für p.blue ist spezifischer als die für p alleine.

<p>Dieser Text ist rot 
<span>und dieser ist grün.</span>
</p>

Die beiden Style-Definitionen für p (Nr. 2 und Nr. 4) sind gleichwertig; in solchen Fällen gilt die letzte. Derartige einander widersprechende Regeln sind zwar sinnlos, aber nicht falsch. Für "span innerhalb von p" gilt die spezielle Style-Definition Nr. 6.

<div>Dieser Text ist grün.</div>

Die Style-Definiton einer Klasse (.green) ist spezifischer als die eines Elements (div), daher gilt Nr. 3.

<div>Dieser Text ist gelb 
<span>und dieser auch.</span>
</div>

Die Klasse blue ist für Elemente des Typs div nicht definiert, deshalb gilt die Style-Definition des Elements div (Nr. 5). Das Element span ist in diesem Fall kein "Nachfahre" (descendant) eines Elements p, daher kommt die Regel Nr. 6 nicht zum Tragen. Das Element erbt die Farbe seines "Vorfahren" (parent element), also des div.

Zu guter Letzt können Style Sheets noch mit Formatierungsangaben kollidieren, die im HTML-Code selbst stehen. Im Comment-Artikel HTML mit Stil vom Juni 1998 wurde folgendes Beispiel eines HTML-Codes mit übermäßig vielen Formatierungs-Anweisungen gebracht:

<FONT SIZE="6" COLOR="#123CFB" TYPE="Arial"><B>Test</B></FONT>

Laut CSS-Standard steht es Browsern frei, solche Anweisungen zu berücksichtigen: The User Agent may choose to honor presentational hints from other sources than style sheets, for example the FONT element or the "align" attribute in HTML. Es wird empfohlen, auf solche Attribute so weit wie möglich zu verzichten: Die HTML-Standards XHTML 1.0 und HTML 4.01 haben jeweils eine Strict- und eine Transitional-Variante, wobei letztere eine Übergangslösung darstellt, die mit älteren HTML-Standards weitgehend kompatibel ist. In den (für Neuentwicklungen empfohlenen) Strict-Varianten der Standards sind diese Attribute nicht mehr enthalten.

5. Browser-Unterstützung

Im oben erwähnten Comment-Artikel steht folgendes zum Thema Style Sheets: Zur Zeit werden jedoch etliche Features von HTML 4.0 nur von wenigen Browsern unterstützt, sodaß man damit noch ein wenig warten sollte. Ein typisches Beispiel eines solchen Features sind Style Sheets, mit denen das [...] Problem des Konflikts zwischen logischer Struktur und grafischer Darstellung eines Dokuments elegant gelöst wird.

Seither sind fast fünf Jahre vergangen, und inzwischen werden Style Sheets von allen modernen grafischen Browsern (Netscape und MS-Internet Explorer seit Version 4, Opera seit Version 3, Mozilla u.a.) weitgehend unterstützt. Allerdings versteht selbst die neueste Version des Internet Explorer etliche Features von CSS noch immer nicht (siehe dazu auch die Beispiele im folgenden Abschnitt). Es handelt sich aber hauptsächlich um fortgeschrittene Features, deren mangelnde Unterstützung die Funktion und das Erscheinungsbild einer Webseite nur marginal beeinträchtigt.

Ein Sonderfall ist Netscape Version 4, genauer gesagt, die verschiedenen Versionen von 4.0 bis 4.79: Jede dieser Versionen unterstützt Style Sheets, jede anders und jede so fehlerhaft, daß Webseiten mit komplexeren Style Sheets unter Netscape Version 4 praktisch unbrauchbar sind. Vor allem werden Abstände und Abmessungen oft vollkommen falsch berechnet. Leider ist dieser Browser noch immer nicht ausgestorben,4) sodaß man seine Fehler nicht guten Gewissens ignorieren kann. Mit folgendem Trick lassen sie sich aber umgehen:

<link rel="stylesheet" media="screen" 

href="simple.css" type="text/css">

<style media="screen,print,aural" type="text/css">

@import url("complex.css");

</style>

Hier ist simple.css ein einfacher Style Sheet, der nur Anweisungen enthält, die auch Netscape 4 versteht und halbwegs richtig umsetzt. Der vollständige Style Sheet, der zusätzlich zu simple.css von allen CSS-fähigen Browsern verwendet wird, steht in complex.css: Weil Netscape 4 die Syntax von @import nicht versteht, ignoriert es diesen Style Sheet einfach.5)

6. CSS für Fortgeschrittene: Ausgewählte Beispiele

Eine vollständige Diskussion von Cascading Style Sheets ist in diesem Rahmen selbstverständlich nicht möglich (dazu sei auf die Literaturangaben verwiesen). Im folgenden illustrieren einige Beispiele, daß Style Sheets Möglichkeiten bieten, die weit über HTML hinausgehen - allerdings immer unter der Voraussetzung, daß die Browser mitspielen.

6.1 Style Sheets für verschiedene Medien

Viele Webdesigner vergessen, daß der Bildschirm nicht das einzige Ausgabemedium für Webseiten ist. Mit <tt>@media</tt> können Regeln definiert werden, die nur für bestimmte Medien gelten, z.B. print für Druckausgabe, aural für Sprach-Synthesizer, handheld für Geräte wie Palmtops und Mobiltelefone und noch einige mehr.

@media screen { p { font-size: 12pt; } } 

/* kleinere Schrift für die Druckausgabe */

@media print { p { font-size: 10pt; } }

Ein wichtiger Unterschied zwischen der Darstellung auf dem Bildschirm und der Ausgabe auf einem Drucker ist, daß es bei letzterem kein Scrolling gibt und ein Dokument daher manchmal auf mehrere Seiten aufgeteilt werden muß. Mit @page können die Eigenschaften einer Seite festgelegt werden: Größe, Hoch- oder Querformat, Hinweise, wo eine neue Seite begonnen werden soll, und vieles mehr. Leider wird dies zur Zeit von den meisten Browsern nicht unterstützt.

Style Sheets für akustische Medien (aural) enthalten meist Anweisungen über die zu verwendenden Stimmen: Frauen- oder Männerstimme, Tonhöhe, Lautstärke, Klangfarbe, ...

6.2 Automatisch erzeugte Inhalte: content

Auf vielen Webseiten findet sich die Aufforderung Klicken Sie hier! Wer eine solche Webseite in gedruckter Form vor sich hat, sieht ein unterstrichenes hier, kann aber natürlich dort nicht klicken und weiß nicht, wo der Link hinzeigt. Mit folgendem Fragment eines Style Sheet (das in einen @media print-Block gehört) wird diese wichtige Information nachgeliefert:

a {
quotes: ' (' ') ';
text-decoration: none;
}
a:after {
content: open-quote attr(href) close-quote
}

Für alle Elemente des Typs a (also im wesentlichen Links) werden mit quotes Anführungszeichen definiert, nämlich runde Klammern, von Leerzeichen umgeben. Links sollen nicht unterstrichen werden, daher text-decoration:  none. Das "Pseudo-Element" a:after definiert, was nach einem Element des Typs a geschehen soll: Es wird content eingefügt, also Inhalt, bestehend aus: Klammer auf, dem Attribut href (d.h. dem Link), Klammer zu. Statt Klicken Sie hier! steht also z.B. Klicken Sie hier (link.to/some/page/) ! - vorausgesetzt, die Seite wurde z.B. mit Mozilla oder einer neuen Netscape-Version ausgedruckt und nicht mit dem Internet Explorer, der kann das nämlich nicht.

6.3 Positionierung von Boxen

Wer komplexere Style Sheets verwendet, muß sich mit dem Box Model vertraut machen: Fast alle HTML-Elemente befinden sich in einer (meist unsichtbaren) rechteckigen Box. Zur Darstellung einer Webseite berechnet der User Agent die Größe und die Position aller Boxen. Viele Eigenschaften von Boxen können mit Style Sheets definiert werden - Größe (width, height), Rahmen (border), innerer und äußerer Rand (padding und margin) und auch die Position (position). Letztere ergibt sich meistens automatisch, kann aber auch explizit angegeben werden: Mit position: fixed kann beispielsweise die Position einzelner Elemente auf dem Bildschirm fixiert werden, sodaß diese Elemente beim Scrollen nicht mitwandern. Ein Beispiel ist der Kasten rechts oben auf der CSS-Seite des World Wide Web Consortium. Leider kann man diesen Effekt mit dem Internet Explorer nicht bewundern, da er von diesem Browser nicht unterstützt wird.

7. Style Sheets - pro und contra

Wer schon einige Webseiten erstellt hat, die Grundzüge von HTML und vielleicht den Umgang mit einem HTML-Editor wie Dreamweaver oder Frontpage gelernt hat, steht früher oder später vor der Frage: Soll ich Cascading Style Sheets erlernen und meine weiteren Webseiten damit gestalten?  Vieles spricht dafür, aber auch einiges dagegen.

  • Style Sheets in Kombination mit HTML sind ein viel mächtigeres Werkzeug als HTML alleine, selbst mit allen möglichen proprietären Erweiterungen. Viele Aufgaben, die mit HTML gar nicht oder nur sehr schwierig zu lösen sind, werden mit Style Sheets trivial.
  • Das "händische" Design von HTML-Dokumenten in Verbindung mit Style Sheets ist sehr weit entfernt von WYSIWYG-Editoren6) und erfordert ein beträchtliches Abstraktionsvermögen: HTML-Design mit Style Sheets erinnert ein wenig an Textverarbeitung mit TeX.
  • Die Browser-Unterstützung - vor allem durch den Internet Explorer - ist noch immer nicht vollständig und fehlerfrei, obwohl der CSS2-Standard schon vor fast fünf Jahren beschlossen wurde. Die schleppende Implementierung durch die Browser-Hersteller ist sicherlich mit schuld daran, daß Style Sheets nicht weiter verbreitet sind. Solange Netscape 4 einen bedeutenden Marktanteil hatte, waren Style Sheets im kommerziellen Einsatz praktisch ausgeschlossen. Heute ist es aufgrund des Quasi-Monopols des Internet Explorer ziemlich sinnlos, Features zu verwenden, die dieser nicht unterstützt.
  • Die Fehlersuche ist oft außerordentlich mühsam. Wenn eine Webseite mit Style Sheets nicht so aussieht, wie sie soll, so kann das eine Reihe von Ursachen haben. Am leichtesten zu finden sind noch Syntax-Fehler im HTML-Code oder im Style Sheet. Prinzipiell sollte jedes HTML-Dokument syntaktisch korrekt sein - bei Verwendung von Style Sheets wirken sich Syntax-Fehler oft viel gravierender aus. Mittels http://validator.w3.org/ und http://jigsaw.w3.org/css-validator/ können HTML-Dokumente und Style Sheets auf korrekte Syntax überprüft werden.

    Manchmal sind HTML-Dokumente und Style Sheets vollkommen korrekt und es funktioniert trotzdem nicht: Dann liegt es an Browser-Bugs oder fehlender Browser-Unterstützung. Daher ist es unbedingt erforderlich, Style Sheets mit mehreren Browsern zu testen. Die häufigste Fehlerursache ist jedoch eine falsche Interpretation der Vererbungs- und Präzedenz-Regeln (siehe Abschnitt 4).

  • Style Sheets bedeuten oft einen hohen Initialaufwand, der sich erst später rentiert: Es kostet manchmal Blut, Schweiß und Tränen, bis ein HTML-Dokument mit einem Style Sheet sich mit allen möglichen Browsern so verhält, wie es soll. Sobald dieser Zustand allerdings erreicht ist, ist die Gestaltung von weiteren HTML-Dokumenten, die denselben Style Sheet verwenden, trivial: Der HTML-Code von solchen Dokumenten ist meistens extrem einfach und kann leicht automatisch durch ein Content Management System (CMS) erstellt werden.

Cascading Style Sheets sind vielleicht nicht das ideale Werkzeug für Hobby-Webdesigner, für professionelle Anwendungen und größere Projekte sind sie jedoch unerläßlich: Ohne Style Sheets wäre es kaum gelungen, das CMS für die neue Homepage der Universität Wien mit den Ideen des Grafikers zu vereinbaren.

Literatur

  • Cascading Style Sheets, level 2: CSS2 recommendation (http://www.w3.org/TR/REC-CSS2/):
    Der offizielle Standard des W3C (World Wide Web Consortium).
  • CSS Pointers Group (http://css.nu/):
    Eine Sammlung von Online-Ressourcen zum Thema Style Sheets.
  • SELFHTML (http://selfhtml.teamone.de/):
    Das bekannte HTML-Tutorial von Stefan Münz enthält auch ausführliche Informationen über CSS.
  • Cascading Style Sheets: The Definitive Guide (http://www.oreilly.com/catalog/css/):
    Ein Lehrbuch von Eric Meyer aus dem renommierten O'Reilly-Verlag.
  • Cascading Stylesheets - Stil mit <Stil> (http://www.mediaevent.de/css2/):
    Ein Buch von Ulrike Häßler mit umfangreichen Online-Materialien.
  • Dan's Web Tips (http://webtips.dan.info/):
    Allgemeine Informationen zum Thema Webdesign mit zahlreichen Hinweisen auf Style Sheets; die Einleitung enthält eine ausgezeichnete Diskussion der verschiedenen Standpunkte (structuralists vs. presentationalists).
  • comp.infosystems.www.authoring.stylesheets (Newsgruppe)

 

 

1) Alle Beispiele mit Erläuterungen sind unter www.univie.ac.at/css-demo/ zu finden.

2) aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

3) Die meisten Browser unterstützen User Style Sheets nur in sehr rudimentärer Form, deshalb werden sie auch recht selten verwendet.

4) Etwa 4% aller Zugriffe auf die Webseiten der Uni Wien erfolgen derzeit mit Netscape 4. Auch weltweit dürfte der Anteil dieses Browsers bei 4% liegen.

5) Für die neue Homepage der Uni Wien wird ein anderer, aber ähnlicher Trick verwendet: Mit Hilfe von Server-Side Includes wird Netscape 4 vom Server ein anderes HTML-Dokument geliefert als allen anderen Browsern.

6) Etliche HTML-Editoren verwenden intern gelegentlich style-Elemente, die allerdings nie die Qualität von manuell erstellten Style Sheets erreichen. Beispielsweise haben manche Versionen von Microsoft Word eine Funktion Export to HTML, die für das simpelste Dokument HTML-Code mit seitenlangen style-Angaben erzeugt.