Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; breadcrumb has a deprecated constructor in /kunden/dciwam.de/webseiten/dciwam/includes/class.breadcrumb.inc.php on line 23

dciwam.de / faq / css / css-einfuehrung

Einführung in Cascading Style Sheets

Geht das nicht auch mit HTML?
Welche Vorteile bieten Cascading Style Sheets?
Was bedeutet 'cascading'?
Wie sieht so ein Style Sheet denn aus?
Welche Eigenschaften kann man mit CSS beeinflussen?
Geht das auch mit XML?
Was geht mit CSS nicht?
Gibt es auch Probleme mit CSS?
Wie sieht die Zukunft von CSS aus?
Gibt es gute Bücher über CSS?
Wo finde ich noch mehr Informationen?

Mit Cascading Style Sheets ist es möglich, die Präsentation einer Webseite zu beeinflussen, ohne ihre Struktur zu verändern.

Geht das nicht auch mit HTML?

Nein, nicht wirklich. Die Aufgabe von HTML war es, Inhalte zu strukturieren, nicht sie zu formatieren. Mit HTML definiert man Überschriften, Absätze, Zitate, Listen oder wichtige Textstellen, nicht aber Schriftarten oder Farben. Es wurden aber in die Browser immer mehr neue Elemente zur visuellen Formatierung eingeführt, so das HTML Dokumente nur noch aus Inhalten und Präsentationselementen bestanden, Struktur findet man immer seltener. Mit XHTML 1.1 wird das vorbei sein, alle Elemente und Attribute zur visuellen Darstellung werden entfernt und in vielen zukünftigen Browsern auch nicht mehr funktionieren.

Welche Vorteile bieten Cascading Style Sheets?

Style Sheets ermöglichen es, Präsentation und Inhalt zu trennen. Die Dokumente werden dadurch Übersichtlicher und kleiner, man benutzt wieder mehr Strukturelemente als Formatierungselemente. Es ist zum Beispiel möglich, für eine ganze Website ein einzelnes Style Sheet zu schreiben, daß für alle Seiten gilt. Das gibt der ganzen Site ein einheitliches äußeres, die einzelnen Seiten werden schneller geladen, da die einzelnen Formatierungsangaben nicht immer neu geladen werden müssen. Wenn man änderungen machen will, reicht es, das Style Sheet zu ändern, und schon sehen alle Seiten anders aus. Vor allem wenn man nicht alleine an einer Website arbeitet, ist das praktisch, da sich die Autoren einzelner Seiten nicht mit dem Aussehen der Seite auseinandersetzen müssen. Style Sheets bieten also:

Die Trennung von Inhalt und Präsentation
Einheitliche Formate für ganze Websites
Eine einfache Möglichkeit, daß Aussehen ganzer Websites zu ändern
Kleinere und Übersichtlichere HTML Dateien
Unabhängigkeit von bestimmten Produkten, Plattformen und Medien

Und das alles, ohne daß man sich Sorgen machen muß, daß ein Browser CSS nicht unterstützt, da die Inhalte auch ohne CSS problemlos dargestellt werden können.

Was bedeutet 'cascading'?

Erstmal gibt es drei verschiedene Arten von Style Sheets:

das Style Sheet des Browsers. In dem werden allgemeine Regeln für die Präsentation festgelegt, zum Beispiel daß h1 Überschriften anders präsentiert werden, normaler Text
das Style Sheet des Benutzers. Einige Browser ermöglichen es dem Benutzer, ein eigenes Style Sheet anzugeben oder zumindest bestimmte Optionen wie die Farbe von Text und Links zu bestimmen.
das Style Sheet des Autoren

"cascading" heißt jetzt, daß diese Style Sheets in der genannten Reihenfolge auf ein Dokument angewandt werden. Angaben des Autoren überschreiben Angaben des Benutzers, die wiederum Angaben im Style Sheet des Browsers überschreiben.

Ferner ist es für den Autoren auch möglich, zum Beispiel ein allgemeines Style Sheet in einem Dokument zu verlinken, und dann im einzelnen Dokument diese Angaben zu überschreiben oder auch nur ein einzelnes Element zu formatieren.

Wie sieht so ein Style Sheet denn aus?

Ganz simpel :-) Um Überschriften in einem HTML Dokument in blauer Farbe darzustellen kann man folgendes benutzen:

h1 { color: blue }

Diese Regel besteht aus zwei Teilen. Mit h1 wird das Element ausgewählt, auf das man sich bezieht, den Teil nennt man "Selektor". Der nachstehende Teil ist die Deklaration. In der Deklarationen stehen eine oder mehrere Eigenschaften, denen Werte zugewiesen werden, in diesem Fall ist es die Eigenschaft color der der Wert blue zugewiesen wird. Man kann in jeder Regel natürlich mehrere Eigenschaften angeben:

h1 { color: blue; background-color: silver; }

Damit der Browser mit dieser Regel auch was anfangen kann, muß man sie ins HTML Dokument einbinden. Dafür gibt es das style Element:

<style type="text/css">
  h1 { color: blue; background-color: silver; }
</style>

Das Element ist nur im head-Element der HTML Datei erlaubt. Eine vollständige HTML-Datei könnte so aussehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Beispiel 1</title>
<style type="text/css">
  h1 { color: blue; background-color: silver; }
</style>
</head>
<body>
  <h1>Die Überschrift ist blau</h1>
  <p>Text</p>
</body>
</html>

Beispiel 1 anschauen

Die Überschrift wird jetzt in blauer Farbe auf silbernem Hintergrund dargestellt.

Eine andere Möglichkeit ist, das Style Sheet in einer separaten Datei auszulagern und auf diese dann mit dem link Element zu verweisen:

h1.gruen { color: green }
p.gruen { color: green }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Beispiel 2</title>
<link rel="stylesheet" type="text/css" href="/faq/css-einfuehrung.css">
</head>
<body>
  <h1>Überschrift 1</h1>
  <p>Text</p>
  <h1 class="gruen">Grüne Überschrift</h1>
  <p class="gruen">Grüner Text</p>
</body>
</html>

Beispiel 2 anschauen

Der Element-Selektor ist natürlich nicht der einzige Selektor. Es ist in HTML zum Beispiel bei fast allen Elementen möglich, ein class-Attribut zu definieren:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<head>
<title>Beispiel 3</title>
<style type="text/css">
  h1.gruen { color: green }
  .gruen { color: green }
</style>
</head>
<body>
  <h1>Überschrift</h1>
  <p>Text</p>
  <h1 class="gruen">Grüne Überschrift</h1>
  <p class="gruen">Grüner Text</p>
</body>
</html>

Beispiel 3 anschauen

Um die zweite Überschrift jetzt auszuwählen, benutzt man den Klassen Selektor:

h1.gruen { color: green }

Möchte man, daß auch der zweite Absatz in grüner Farbe dargestellt wird, gibt man einfach kein bestimmtes Element an:

.gruen { color: green }

Welche Eigenschaften kann man mit CSS beeinflussen?

Zusammengefasst und verallgemeinert sind das:

Farben und Hintergründe
Schrift und Typographische Effekte
Textfluß und Ränder
Positionierung
Seitenlayout für Bildschirm und auch für Drucker
Informationen für Sprachausgabe

Geht das auch mit XML?

CSS kann man mit jeder Form von strukturierten Dokumenten benutzen, so auch mit XML (Extensible Markup Language). XML ist stärker auf Style Sheets angewiesen, als HTML, da ein Browser die Bedeutung der Elemente kennt. Ein Beispiel XML Dokument könnte so aussehen:

<?xml version="1.0" encoding="iso-8859-1"?> <artikel>
 <headline>Cascading Style Sheets</headline>
 <autor>Björn Höhrmann</autor>
 <zusammenfassung>Mit <wichtig>Cascading Style Sheets</wichtig> ist
 es möglich, die Präsentation einer Webseite zu beeinflussen, ohne
 ihre Struktur zu verändern.</zusammenfassung>
</artikel>

Ein Style Sheet für dieses Element muß erstmal festlegen, wie die einzelnen Elemente dargestellt werden sollen, ob es blocklevel Elemente sind wie P oder DIV in HTML, oder inline Elemente wie EM oder STRONG:

artikel, headline, autor, zusammenfassung { display: block }
wichtig { display: inline }

Jetzt möchte man vielleicht noch ein paar weitere Angaben machen:

headline { font-size: x-large }
autor { font-style: italic }
zusammenfassung { margin-top: 1em }
wichtig { font-weight: bold }

Um das Style Sheet jetzt mit der der XML Datei zu verbinden, gibt es die xml-stylesheet processing instruction:

<?xml-stylesheet href="stylesheet.css" type="text/css"?>

Das Dokument könnte jetzt zum Beispiel so aussehen:

Cascading Style Sheets

Björn Höhrmann

Mit Cascading Style Sheets ist es möglich, die Präsentation einer Webseite zu beeinflussen, ohne ihre Struktur zu verändern.

Was geht mit CSS nicht?

Erstmal muß man sich klar machen, daß das Web weder wie Fernsehen, noch wie eine Zeitschrift ist. Ein großer Vorteil des WWW ist es, daß der Benutzer die Kontrolle hat. Während bei einer Zeitschrift ganz klar ist, wie die physischen Gegebenheiten sind, weiß man als Autor im Web das nicht. Man muß es auch nicht wissen. Webseiten passen sich den Gegebenheiten des Benutzers von selbst an, zum Beispiel an die Fenstergröße des Browsers oder an speziellen Bedürfnisse. ältere Menschen haben zum Beispiel Probleme winzig kleine Buchstaben zu entziffern und können im Browser so die Schriftgröße die für die am besten ist festlegen.

Mit Cascading Style Sheets kann man immer nur Vorschläge machen, wie eine Webseite präsentiert werden soll, es ist weder sinnvoll noch möglich, alles genau zu bestimmen. So kann man mit CSS auch kein pixelgenaues Webdesign betreiben, zumal es aus genannten Gründen nicht sinnvoll ist, das überhaupt tun tu wollen.

Gibt es auch Probleme mit CSS?

Nicht mit CSS, wohl aber mit der Implementation in die Browser. Die Unterstützung in den ersten Browsern, die mit CSS umgehen können sollten ist sehr mangelhaft. Der Internet Explorer 3 und der Netscape Navigator 4 können nur einen kleinen Teil der Eigenschaften überhaupt verstehen und haben auch noch sehr viele Bugs. Neuere Browser wie Opera 4, der Internet Explorer 5 oder der angekündigte Navigator 6.0 sind da schon wesentlich weiter. Am Besten ist es, wenn man sich beim Erstellen von Style Sheets an folgende fünf Regeln hält:

Jeder Browser sollte in der Lage sein, den Inhalt der Seite darzustellen
Die erste Regel bedeutet nicht, daß die Seite in allen Browsern gleich aussehen sollte
Wenn etwas unwichtiges in einem bestimmten Browser nicht funktioniert, zu schade für den Browser
überprüfe deine Style Sheets immer erst im Netscape Navagator 4. Style Sheets können in allen Browsern Probleme verursachen, aber im NN4 machen diese Probleme die Seite oft völlig unzugänglich
Wisse wann aufzuhören ist. Manchmal kostet es mehr Nerven einen bestimmten Style zu erzeugen, als er wert ist.

Die Regeln sind natürlich nicht verbindlich, man sollte sie aber als Richtlinien im Kopf haben.

Wie sieht die Zukunft von CSS aus?

Rosig. Der Internet Explorer 5.0 unterstützt CSS nahezu vollständig und relativ fehlerfrei und zusätzlich einen größeren Teil von CSS 2.0. Netscape 6.0 wird aller Voraussicht nach sogar noch besser. Opera 4 ist auch nicht schlechter, somit dürfte sich das Problem der Unterstützung allmählich verabschieden, jetzt ist also der beste Zeitpunkt CSS zu lernen um es dann rechtzeitig wirklich effektiv einzusetzen.

CSS beschränkt sich allerdings nicht auf die Präsentation von HTML, XHTML und XML Dokumenten, auch andere Webstandards wie SVG Vektor Grafiken oder SMIL Multimedia Präsentationen machen Gebrauch von CSS.

Das W3C arbeitet derzeit an CSS3 das dieses Jahr noch fertiggestellt werden soll. In CSS3 wird die Sprache in verschiedene Module aufgeteilt, was eine schnellere Weiterentwicklung der einzelnen Module ermöglicht, ohne den Sprachstandard zu ändern und Browserhersteller haben es einfacher, die einzelnen Module Schritt für Schritt zu implementieren.

Gibt es gute Bücher über CSS?

Ja, nur leider keine deutschen. Empfehlenswert sind diese beiden englischen:

Cascading Style Sheets: The definitive Guide: Autor: Eric A. Meyer
Erschienen: 15. Mai 2000 bei O'Reilly & Associates
Taschenbuch: 453 Seiten
Preis: EUR 33,47
ISBN: 1565926226; Eric A. Meyer ist Redakteur bei Webreview.com für den Bereich Style Sheets und Mitbegründer der CSS Pointers Group. Das Buch behandelt CSS1 und CSS Positioning. Jede Eigenschaft wird ausführlich erklärt und im Zusammenhang mit anderen Elementen beschrieben. Ein wesentlicher Schwerpunkt des Buches liegt in der Beschreibung der Unterstützung der jeweiligen Eigenschaften in den aktuellen Browsern. Es richtet sich sowohl an HTML Profis die jetzt CSS als neue Sprache lernen wollen, als auch an Neulinge die sich schon ein wenig mit HTML beschäftigt haben und jetzt heiß darauf sind, zu erfahren, wie man Style Sheets effektiv einsetzt.
Cascading Style Sheets: Designing for the Web: Autoren: Håkon Wium Lie, Bert Bos
Erschienen: 2. Juli 1999 bei Addison Wesley
Taschenbuch: 432 Seiten
Preis: EUR 38,30
ISBN: 0201596253; Die Autoren Håkon Wium Lie und Bert Bos sind verantwortlich für die Entwicklung der Cascading Style Sheets beim W3C. Das Buch führt durch den kompletten Sprachumfang von CSS2 anhand vieler Screenshots und Diagramme. Ein weiterer Schwerpunkt im Buch ist Typografie wodurch sich das Buch von anderen abhebt. Es gibt eine sehr umfangreiche Einführung in Schriftsatz und Schriftfamilien und schafft so ein sehr abgerundetes Wissen. Weitergehend führt es auch in XML und XSL ein. Es ist sehr leicht zu lesen und sicherlich auch für Anfänger sehr interessant.

Wo finde ich noch mehr Informationen?

http://www.bjoernsworld.de/css/bookmarks

Björn Höhrmann • bjoern@hoehrmann.de • http://www.bjoernsworld.de
Andreas Borutta • borumat@gmx.de • http://borumat.de (formale Überarbeitung für die FAQ)

Zum Seitenanfang