Websiteentwicklung: CSS/ Druckversion

Vorwort

Lieber Leser, liebe Leserin,

vielleicht haben Sie schon das Buch Websiteentwicklung: XHTML gelesen. Wenn Sie mit diesem Buch keine Probleme gehabt haben, sollte es Ihnen nicht schwer fallen, CSS zu lernen.

Eine reine XHTML-Seite sieht recht nüchtern aus, denn es fehlt noch ein individuelles Design und ein Layout, welches, neben dem reinen Inhalt, einen wesentlichen Einfluss auf den Erfolg eines Projektes haben kann.

Mit CSS kann der Autor seine kreativen Ideen und Phantasien hinsichtlich der Präsentation der Inhalte einbringen oder die Gestaltungswünsche eines Kunden verwirklichen.

Durch ein gutes Design kann auch die Lesbarkeit und die ganze Ergonomie eines Projektes deutlich verbessert werden.

Um einen Eindruck davon zu bekommen, was ein professionelles CSS-Design leisten kann, sollte man sich einmal das Projekt www.CssZenGarden.com anschauen. Dort haben hunderte von Designern aus der ganzen Welt immer wieder dieselbe XHTML-Seite mittels CSS gestaltet. Der reine Inhalt der Seite wird nie verändert, weder der Inhalt, noch die Reihenfolge der XHTML-Elemente (mit Ausnahme vielleicht von Übersetzungen des Textes in verschiedene Sprachen). Alle Änderungen des Aussehens werden ausschließlich mit CSS-Mitteln erreicht.

Viel Spaß beim Stöbern, Lernen und Ausprobieren!

Projektdefinition

• Zielgruppe: Autoren, die ihre eigenen (X)HTML-Projekte im Netz selbst gestalten möchten. Als Vorkenntnis ist das XHTML-Buch der Buchserie empfehlenswert, anders erworbene Kenntnisse über (X)HTML sollten aber ebenfalls helfen.
• Lernziele: Kenntnisse zu bestehenden Empfehlungen des W3C hinsichtlich CSS sollen vermittelt werden. Leser sollen anhand der Definitionen und anhand von Beispielen in die Lage versetzt werden, selbst Stilvorlagen komplett und gemäß Empfehlung zu erstellen.
• Buchpatenschaft/Ansprechperson: Doktorchen
• Sind Co-Autoren gegenwärtig erwünscht? Bei größeren Änderungswünschen und Ideen zur Ergänzung besser kurz Rücksprache halten, das Buch befindet sich bereits in einem komplett lesbaren Zustand, was sich nicht mehr ändern sollte.
• Richtlinien für Co-Autoren: Sofern neue CSS3-Module endlich einmal von Arbeitsentwürfen zu offiziellen Empfehlungen werden, ist eine Ergänzung natürlich erwünscht. Von daher ist anders als bei anderen, klassisch strukturierten Büchern zu erwarten, dass es immer einmal wieder neue Kapitel gibt, die ergänzt werden sollten, einfach weil es neue Empfehlungen gibt. Bevor sie Empfehlungsstatus annehmen, sind indessen Arbeitsentwürfe nicht als 'gesichertes Wissen' im Sinne von wikibooks anzusehen und eher für eine spätere Ergänzung vorzusehen. Aktuell (2014) fehlt von den bestehenden Empfehlungen insbesondere noch der Abschnitt von CSS 2.0 zu auralen Stilvorlagen, der gerne ergänzt werden kann. Hinsichtlich praktischer Anwendungen und ausführlicher Beispiele für komplette Stilvorlagen für Projekte und auch besondere Anwendungsfälle etwa für EPUB-Bücher sind natürlich vollständige Anwendungskapitel als Ergänzung ebenfalls sehr erwünscht, ebenso wie die Darstellung etablierter Methoden zur Verbesserung der Ergonomie durch Stilvorlagen für besondere Nutzergruppen. Wünsche hinsichtlich weiterer Inhalte sollten auf der Diskussionsseite formuliert werden, nicht etwa als Verweise zu nicht exisiterenden Inhalten im folgenden Inhaltsverzeichnis.

Cascading Style Sheets (kurz CSS), ist eine deklarative Sprache für Stilvorlagen, die auf strukturierte Dokumente angewendet werden. Sie wird vor allem zusammen mit HTML und XML (zum Beispiel bei XHTML und SVG) eingesetzt. CSS legt dabei fest, wie ein zur geeignet strukturierter Inhalt dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Dokumentfragmente, deren Aussehen gleich sein soll, auch als Gruppe selektiert werden können, beziehungsweise jene Fragmente eindeutig selektierbar sein müssen, die ein abweichendes Aussehen bekommen sollen. Man zeichnet im Dokument also die Bedeutung einzelner Fragmente aus, während das Aussehen dieser Fragmente mit CSS festgelegt wird. Per CSS werden die Fragmente dann gezielt selektiert, um ihnen eine bestimmte Darstellung zuzuweisen.

Um ein (X)HTML-Dokument abweichend von dem zu gestalten, wie es ein Darstellungsprogramm darstellen würde, benötigt man CSS. Zwar ist es ebenfalls mit einigen älteren Versionen von HTML möglich, Farben, verschiedene Schriftarten, Hintergrundbilder und ähnliches zu verwenden. Diese Verwendung von (X)HTML für Visualisierungszwecke befindet sich aber seit einigen Jahren auf dem Rückzug: Die Trennung zwischen Inhalt ((X)HTML) und Darstellung (CSS) wurde seit etwa 1997 mit der Einführung von HTML 4 und CSS 1 (Ende 1996) stärker betont. Grund für die strikte Trennung zwischen Inhalt und Darstellung ist primär die Nutzbarkeit der Inhalte unabhängig von der konkreten Darstellung für alle interessierten Nutzer, gleich welche Ausgabegeräte sie nutzen oder welche persönlichen Besonderheiten sie aufweisen mögen. CSS ermöglicht es demzufolge auch konsequenter Weise Nutzern, selbst Stilvorlagen bereitzustellen, um die Darstellung der Inhalte für die eigenen Bedürfnisse optimal aufzubereiten. Ein weiterer wichtiger Grund der strikten Trennung von Inhalt und Darstellung betrifft mehr die Autoren, denn durch die Trennung ist es deutlich einfacher, sowohl den Inhalt als auch die Darstellung zu verwalten und im Bedarfsfalle das eine unabhängig vom anderen in übersichtlicher Weise und einfach zu ändern. Neuere Versionen von XHTML insbesondere verzichten weitgehend auf sogenannte Präsentationsattribute, welche insbesondere die visuelle Darstellung beeinflussen.

Cascading Style Sheets sind eine wichtige Entwicklung im Zuge der Bemühungen um Dokumente mit einer Struktur, die die semantische Bedeutung der Inhalte wiederzugeben vermögen, da es bei konsequenter Anwendung die komplette Trennung von Inhalten und Aussehen ermöglicht.

Aufgebrochen wird die Trennung von Inhalt und Präsentation wiederum stärker mit der in Arbeit befindlichem Version HTML 5, wo allerdings eher auf java-script gesetzt wird, um die Trennung zwischen Inhalt und Präsentation wieder unschärfer zu gestalten. Auch in Arbeit befindliche neue Module von CSS verwischen teilweise wieder stärker die Trennung zwischen Inhalt und Darstellung, beziehungsweise erleichtern es Autoren, eine solche Mischung selbst vorzunehmen. Gleichzeitig bietet der Entwurf zu HTML 5 allerdings zahlreiche neue Elemente mit semantischer, inhaltlicher Bedeutung. Die Situation ist also ambivalent: Der Autor hat es damit stärker selbst in der Hand, Dokumente entweder besser verständlich und zugänglich zu gestalten oder dies auch gezielt zu unterbinden. Dieser Trend zur möglichen Mischung folgt zwar den Gewohnheiten einer größeren Zahl von Autoren, hat aber wiederum Folgen für die Zugänglichkeit zu Inhalten für alle interessierten Nutzer. Auch in diesem Zusammenhang lohnt es sich also, CSS gut zu beherrschen, um auch in Zukunft (X)HTML so nutzen zu können, dass Inhalte für alle zugänglich angeboten werden und diese nicht durch den mißbräuchlichen Einsatz von CSS oder java-script unzugänglich zu machen. Unzugänglich für einige Nutzergruppen werden Dokumente unter anderem dann, wenn sich erst durch die Präsentation mit Interpretation von CSS und java-script der vom Autor beabsichtigte Sinn des Inhaltes ergibt und nicht unabhängig davon. Die strikte Trennung zwischen Inhalt und Dekoration wiederum ist der primäre Schritt, um Inhalte zugänglich anzubieten.

Bei einem Graphikformat wie SVG wiederum ist anders als bei einem Textformat wie (X)HTML eine Trennung zwischen Inhalt und Präsentation nicht einfach scharf durch Trennung in verschiedene Sprachen zu ziehen, weswegen hier der Autor selbst entscheiden muß, was inhaltlich relevant ist und was nur Dekoration ist, ersteres wird dann wieder mit Attributen und Präsentationsattributen angegeben, letzteres mit Stilvorlagen in CSS. Dabei verwendet SVG teilweise eigene, speziell auf graphische Bedürfnisse zugeschnittene Eigenschaften, die in diesem Buch nicht erläutert werden. Andere Eigenschaften von CSS sind hingegen allgemein verwendbar, so auch in SVG. Nur wenige Konstruktionen sind speziell für (X)HTML ausgelegt, die Sprache eignet sich somit auch insbesondere für andere XML-Formate, die vorrangig der Auszeichnung von Text dienen.

Die Verwendung von CSS bietet zudem eine Reihe von weiteren Vorteilen. Zum Beispiel erleichtert es CSS, ein aus vielen Dokumenten bestehendes Projekt einheitlich zu gestalten. Die gemeinsame Stilvorlage für alle Dokumente wird in diesem Fall in einer separaten CSS-Datei notiert und die Dokumente enthalten keine klassischen Formatierungsanweisungen mehr, sondern nur noch Informationen, welche die korrekte Verknüpfung mit der CSS-Datei sicherstellen. Auf diese Weise ist es möglich, das Layout in einer zentralen CSS-Datei nachträglich zu verändern oder verfeinern, ohne in jedem einzelnen Dokument Änderungen vornehmen zu müssen.

Für die professionelle Gestaltung von Dokumenten und großen Projekten noch wichtiger ist der folgende Punkt: CSS ermöglicht es auch, die Darstellung dem jeweiligen Ausgabegerät oder dem Ausgabemedium (zum Beispiel Ausdrucke, Projektion, Sprache und so weiter) entsprechend anzupassen. Das ist nützlich, um zum Beispiel Verweisziele beim Drucken extra aufzuführen oder um für ein Anzeigemedium wie einen Persönlichen Assistenten oder ein Mobiltelephon mit kleinem Bildschirm die Anzeige zu optimieren.

Neben diversen Fähigkeiten im Farb- und Schriftbereich bietet CSS die Möglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen.

CSS gilt heutzutage als die bevorzugte Stilvorlagensprache für (X)HTML-Dokumente und weitere XML-Formate. Das ebenfalls empfohlene XSL(T), welches auf XML basiert, wird dagegen eher für komplexere Transformationen von Dokumenten verwendet und geht damit noch weit über die Möglichkeiten von CSS hinaus, kann damit auch gravierender den Inhalt manipulieren, nicht nur die Darstellung.

Um CSS zu verwenden, sind keine speziellen Programme nötig. Man kann eine Stilvorlage mit jedem beliebigen Texteditor erstellen (zum Beispiel auch den Notepad unter Windows oder vi unter Linux/Unix) und es dann anschließend darauf in den gewünschten Dokumenten verweisen. Wenn ausreichende (X)HTML-Kenntnisse vorhanden sind, ist die Benutzung von CSS sehr schnell, das heißt in wenigen Stunden oder Tagen, zu erlernen. Der Einarbeitungsaufwand ist also deutlich geringer als bei anderen weiterführenden Werkzeugen und Programmen für Designer.

Die Verarbeitung der Stilvorlage durch das Darstellungsprogramm kann aber auch Probleme aufwerfen: Der Autor und der Anwender sind darauf angewiesen, dass die Programmierer der Darstellungsprogramme die Spezifikationen richtig und vollständig implementieren.

Einige Anbieter entwickeln ihre eigenen proprietären Erweiterungen für CSS, die dann ausschließlich auf dem entsprechenden Programm sichtbar werden. Ein Beispiel sind Überblendeffekte, die nur mit dem Internet Explorer funktionieren. Dabei handelt es sich eigentlich nicht um gültiges CSS, konforme Darstellungsprogramme werden solche Erweiterungen ignorieren. Lediglich um neue Eigenschaften von CSS zu testen, gibt es speziell festgelegte Methoden, um testweise implementierte, nicht spezifizierte Eigenschaften zu kennzeichnen. Diese sollten allerdings nur vorübergehend interpretiert werden, bis entschieden ist, ob oder wie solche Eigenschaften der Empfehlung hinzugefügt werden. Eigenschaften mit solch einer Testnotation eignen sich also nicht für den allgemeinen Gebrauch, lediglich um die Ideen auf Eignung zu testen.

Das Konzept der Cascading Style Sheets (CSS) wurde 1994 von Håkon Wium Lie vorgeschlagen. Bert Bos arbeitete zu dieser Zeit an der Entwicklung eines Darstellungsprogrammes namens Argo, der seine eigene Stilvorlagensprache benutzte. Die beiden entschieden sich zusammenzuarbeiten und CSS zu entwickeln.

Es gab zu dieser Zeit auch andere Sprachen mit dem gleichen Ziel, CSS brachte aber als erste die Idee auf, Regeln zu definieren, die über mehrere Stilvorlagen hinweg vererbt werden konnten.

Nach der Präsentation von CSS durch Håkon an der Konferenz „Mosaic and the Web“ in Chicago 1994, und später mit Bos 1995 wurde das World Wide Web Consortium (W3C) auf CSS aufmerksam. Håkon und Bos arbeiteten in diesem Rahmen an CSS weiter, zusammen mit anderen Mitgliedern, unter anderem Thomas Reardon von der Firma Microsoft. Im Dezember 1996 wurde dann die CSS Level 1 Recommendation publiziert. Diese wird in aktuellen Rendering-Engines vollständig umgesetzt.

CSS Level 2 (CSS 2.0) wurde im Mai 1998 als Empfehlung veröffentlicht. Seit 2002 wurde dann an der überarbeiteten Version CSS Level 2 revision 1 (CSS 2.1) gearbeitet, die Arbeit wurde 2011 mit einer Empfehlung abgeschlossen. Diese Version bereinigt einige Unstimmigkeiten in CSS 2.0 und es entfallen diejenigen Teiltechniken, die vorher in Darstellungsprogrammen nicht korrekt oder gar nicht implementiert wurden. CSS 2.1 brachte selbst keine grundlegend neuen Merkmale mit sich, lediglich bei einigen Eigenschaften wurden ein paar Werte ergänzt. In wenigen Fällen gibt es auch Widersprüche zwischen CSS 2.0 und CSS 2.1 und zum Beispiel im Kapitel über Einheiten wurden mit CSS 2.1 neue Inkonsistenzen und Ungereimtheiten eingeführt, die allerdings das Verhalten der Darstellungsprogramme besser widerspiegeln als eine widerspruchsfreie Definition.

CSS 2.1 wurde nach vielen Überarbeitungen am 2011-07-06 als endgültige Empfehlung vom W3C veröffentlicht und wird derzeit von den gängigen aktuellen Darstellungsprogrammen zum größten Teil umgesetzt. Voraussetzung für die Veröffentlichung der Empfehlung war, dass es pro Merkmal mindestens zwei Programme gibt, welche es korrekt interpretieren können.

Derzeit ist CSS Level 3 (CSS 3) in der Entwicklung. CSS 3 ist im Gegensatz zu den Vorgängern modular aufgebaut, das heißt einzelne Teiltechniken (beispielsweise zur Steuerung der Sprachausgabe) haben ihren eigenen Entwicklungsrhythmus und Versionsschritte. Einige Module wurden bereits (2011 zum Beispiel Selectors, Color, Namespaces) als fertige Empfehlungen veröffentlicht. Entsprechend werden auch die ersten Teile von CSS3 bereits in den verbreiteten Darstellungsprogrammen implementiert.

Allgemeine Struktur von CSS-Anweisungen

CSS-Anweisungen folgen einer bestimmten Struktur, generell werden jeweils bestimmte Regeln notiert. Zum einen gibt es die @-Regeln mit einer spezifischen Struktur (mit Beispielen):

• @import "stil.css"; oder @import url("stil.css"); importiert einen Stil, wie bereits erläutert
• @import url("print.css") print; importiert einen Stil für ein bestimmtes Medium, hier 'print'
• @charset "ISO-8859-1"; zu Beginn einer Stilvorlagendatei kann die Kodierung festlegen, wenn dazu keine Angaben mit höherer Priorität vorliegen
• @media print, screen {/* weitere CSS-Anweisungen */} gibt an, für welche Medien die eingeklammerten Anweisungen gelten, hier 'print' und 'screen'
• @page {margin: 3cm;} Angaben zu einer Ausgabe in Seitenform, etwa beim Druck eines Buches
• @font-face {...} Einbinden einer Schriftart in CSS2.0 oder voraussichtlich in einem Modul von CSS3.

Die Möglichkeiten der einzelnen @-Regeln werden jeweils getrennt erläutert.

Neben diesen besonderen Strukturen der @-Regeln werden allerdings meistens Regeln verwendet, die eine einheitliche Struktur aufweisen:

Selektoren {Eigenschaft-1: Wert-1; Eigenschaft-2: Wert-2}

Dabei wird der Klammerausdruck auch als Block oder Deklarationsblock bezeichnet. Der Deklarationsblock faßt alle Eigenschaften zusammen, die für den vorhergehenden Selektor gelten sollen. Selektoren, Eigenschaften und Werte werden in weiteren Kapiteln im Detail erläutert. Selektoren haben die Aufgabe, genau festzulegen, für welche Elemente die Anweisungen im Deklarationsblock gelten sollen. Der Stil der mit den Selektoren festgelegten Ziel-Elemente wie etwa Farbe, Hintergrundfarbe, Höhe, Breite etc wird durch Eigenschaften beschrieben. Diese haben bestimmte Werte.

Eigenschaften und Werte

Eine CSS-Eigenschaft (englisch: property) bestimmt, was in der Darstellung angepasst werden soll. Ein Wert (englisch: value) zu einer Eigenschaft bestimmt wie etwas in der Darstellung angepasst werden soll. Für eine Eigenschaft muss immer mindestens ein Wert angegeben werden. Viele Eigenschaften lassen sich über den Wert 'inherit' vererben, auch wenn sie nicht automatisch vererbt werden. Siehe dazu das Kapitel Kaskadierung, Spezifität und Vererbung.

	Interpretation von inherit im Internet Explorer Der Internet Explorer bis Version 7 interpretiert den Wert inherit nur für die Eigenschaften direction und visibility, ansonsten tritt ein Fehler auf.

Die Werte sind bei jeder Eigenschaft angegeben. Oft sind dies bestimmten Schlüsselwörter wie bereits genanntes 'inherit'. Solch ein Schlüsselwort ist dann exakt so wie angegeben, aber ohne Anführungsstriche zu notieren; die Anführungsstriche kennzeichnen in diesem Buch lediglich, wo das Schlüsselwort beginnt und endet.

Weitere häufig auftretende Werte sind Zahlen, Längen oder Farben, die auf einer der folgenden Seiten erläutert werden.

Referenzierte Dateien als Werte

Gelegentlich können auch andere Dateien referenziert werden. Dazu ist eine URI/IRI absolut oder relativ anzugeben. Ein solcher Wert beginnt immer mit der Zeichenkette 'url(' und endet mit der Zeichenkette ')', jeweils ohne die Anführungszeichen, die hier nur verwendet werden, um zu kennzeichnen, wo die Zeichenkette beginnt und endet. Zwischen den beiden Zeichenketten wird dann die URI/IRI notiert. Nach 'url(' dürfen optional Leerzeichen folgen, dann folgt die URI/IRI selbst, optional umschlossen von einfachen oder doppelten Anführungszeichen, also ' oder ". Dem abschließenden ')' dürfen optionale Leerzeichen vorangehen.

Beispiele:

• Absolute Adresse: url( http://example.com/garnknaeulhintergrund.png )
• Relative Adresse: url( /hintergrund/garnknaeul.png )
• ... mit Anführungszeichen: url( 'irgendwasschoenes.jpg' )
• ... oder: url("sonstwas.svg")

Relative Pfadangaben wie bei den letzten beiden Beispielen werden relativ zur Stilvorlagendatei zu einer absoluten Adresse aufgelöst. Die beiden letzten Beispiele verweisen also auf Dateien im selben Verzeichnis wie die Datei, in welcher das Beispiel notiert ist.

Man sollte bei den Adressen problematische Zeichen vermeiden. Treten zum Beispiel doch die verwendeten Anführungszeichen oder Klammern auch in der URI/IRI auf, so sind sie mit einem vorangehenden Zeichen '\' zu kennzeichnen (zu maskieren). Bei HTTP und einigen anderen Protokollen ist es ferner möglich oder notwendig, weitere Zeichen wie Leerzeichen zu maskieren (URI-Maskierung).

Zeichenketten

Teilweise können auch Zeichenketten als Werte angegeben werden, zum Beispiel bei der Eigenschaft content.

Solche Zeichenketten werden mit einfachen oder doppelten Anführungszeichen umschlossen notiert. Entsprechend sind dann in der Zeichenkette entweder die verwendeten Anführungszeichen zu vermeiden oder mit einem vorangehenden '\' zu maskieren. Statt '\ kann auch notiert werden: '\22' oder statt "\"" entsprechend "\27" - die Zahlen ergeben sich aus dem Unicode des entsprechenden Anführungszeichens.

Zeichenketten können nicht direkt einen Zeilenumbruch enthalten. Sollte ein Zeilenumbruch erwünscht sein, so ist dieser wiederum zu maskieren. Dazu wäre dann zu notieren: '\A' oder '\00000a'.

Ist es hingegen erwünscht, nur bei dem notierten Wert einen Zeilenumbruch einzufügen - warum auch immer - so ist dieser ebenfalls zu maskieren, also etwa so:
"Irgendein Text,\
mit Zeilenumbruch notiert"
Das wird interpretiert wie:
"Irgendein Text, mit Zeilenumbruch notiert"

Nun kann es auch noch vorkommen, insbesondere, aber nicht nur bei solchen Zeichenketten, dass Zeichen notiert werden sollen, welche bei der verwendeten Kodierung nicht verfügbar sind, oder wo man das Zeichen nicht auf der eigenen Tastatur suchen mag oder finden kann. Innerhalb von einer CSS-Datei können dann die Unicode-Nummern mit vorangehendem '\' verwendet werden, entsprechend den oben bereits genannten Nummern für Anführungszeichen wie '\22' oder "\27".

Wird das CSS hingegen in (X)HTML oder SVG im Attribut style notiert, so wird der Inhalt des Attributes interpretiert, also können auch dort entsprechend maskierte Angaben stehen, zum Beispiel ü für 'ü'. Bei XHTML und SVG, nicht aber HTML gilt dies auch, wenn das CSS im Element style notiert ist.

Selektoren und Deklarationsblöcke

Ein Selektor hat die Aufgabe, das gewünschte Element auszuwählen (selektieren). Die zu einem Selektor passende CSS-Notation mit folgendem Deklarationsblock sieht wie folgt aus:

Selektor { Eigenschaft: Wert }

Leerzeichen sind optional. Werden mehrere Eigenschaften notiert, so sind diese mit Semikolon zu trennen. Ein Leerzeichen als Eigenschaft hat keine Wirkung. Also sind folgende Notationen gleichwertig:

Selektor { Eigenschaft1: Wert1; Eigenschaft2: Wert2 }
Selektor { Eigenschaft1: Wert1; Eigenschaft2: Wert2; }
Selektor {Eigenschaft1: Wert1 ;   Eigenschaft2:  Wert2  }
Selektor 
{ 
  Eigenschaft1: Wert1 ;   
  Eigenschaft2: Wert2
}
Selektor 
{ 
  Eigenschaft1: Wert1 ;   
  Eigenschaft2: Wert2;
}

Element-Selektoren

Die einfachste Variante ist der Element-Selektor. Hierbei werden alle Elemente mit gleichem Elementnamen ausgewählt.

p { color: blue }

Diese Definition spricht alle p-Elemente in einem Dokument an. Für diese wird die aktuelle Farbe (Eigenschaft: color) als blau (blue) festgelegt, was unter anderem dazu führt, dass der darin notierte Text blau dargestellt wird.

Eindeutige Kennzeichnung eines bestimmten Elementfragmentes

Um ein einzelnes, bestimmtes Element zu formatieren, kann dieses mit einem Fragmentidentifizierer (bei (X)HTML und SVG zum Beispiel mit dem Attribut id) versehen und anhand dessen ausgewählt werden. Ein id-Attributwert darf nur einmal pro Dokument vorkommen und darf nicht mit einer Zahl beginnen. In Bezug zu CSS eignen sie sich daher gut, um Bestandteile eines Dokumentes zu kennzeichnen, welche nur einmal auftreten. Beispielhaft ist die typische Verwendung zur Untergliederung eines Dokumentes in Kopf-, Haupt- sowie Fußbereich. Es ist hilfreich, den Wert als erklärenden Namen zu notieren, wobei sich erklärend auf die inhaltliche Bedeutung des Elementes in der Dokumentstruktur beziehen sollte, nicht etwa auf die Art der Dekoration durch die Stilvorlage, die ja mit einer anderen Stilvorlage anders aussehen kann.

Der Wert des Fragmentidentifizierers wird in CSS mit einer vorangehenden Raute (#) gekennzeichnet, gefolgt vom Wert. Ist der Wert ID, folglich:

#ID { Eigenschaft: Wert}

Um ein bestimmtes Element zu kennzeichnen wird also etwa im (X)HTML-Quelltext das id-Attribut gesetzt:

<p id="einleitung">Hier erscheint die Einleitung zu einem langen Text.</p>

…und anschließend mit CSS ausgewählt:

#einleitung { color: blue}

Klassen

Möchte man mehrere, jedoch nicht alle Elemente gleichartig formatieren, bietet sich die Nutzung einer Klasse an. Eine Klasse kann im Gegensatz zu einem Fragmentidentifizierer mehrfach in einem (X)HTML-Dokument oder SVG-Dokument angegeben werden. Es können also meherere Elemente zu einer Klasse gehören, andererseits kann ein Element auch zu mehreren Klassen gehören. Dies ist hilfreich, um immer wiederkehrende Formatierungen anzuwenden, ohne diese auf alle gleichartigen Elemente auszudehnen. Man beachte hier, dass das verwendete Format ein Attribut definiert haben muss, welches der Kennzeichnung von Klassen dient. Dies ist bei (X)HTML und SVG der Fall. Viele andere Formate haben solch ein Attribut allerdings nicht. Die CSS-Spezifikation weist ausdrücklich darauf hin, dass das verwendete Format explizit angegeben muss, dass dieser Selektor auf solch ein Attribut anwendbar sein soll. Ansonsten ist der Selektor wirkungslos. Insbesondere ist der Selektor also nicht bei beliebigem XML anwendbar, bei welchem das Darstellungsprogramm die Spezifikation des individuellen Formates nicht kennt.

Klassen werden in CSS durch einen Punkt (.) gekennzeichnet, gefolgt vom Klassennamen.

.Klasse { Eigenschaft: Wert}

Um ein (X)HTML-Element oder SVG-Element mit einer Klasse zu versehen, wird das class-Attribut genutzt:

<p>Ein "normaler" Absatz.</p>
<p class="farbig_hervorgehoben">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>
<p class="farbig_hervorgehoben">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>

…und via CSS selektiert:

p { color: black}
.farbig_hervorgehoben { color: blue}

Diese Regeln weisen allen Absätzen (p-Elementen) die schwarze Textfarbe zu, jedoch werden alle Absätze mit der Klasse 'farbig_hervorgehoben' mit blauer Textfarbe dargestellt.

Elemente können mehreren Klassen angehören. Dies wird dann im Attribut class als eine mit Leerzeichen separierte Liste notiert. In CSS selektiert wird die Zugehörigkeit zu mehreren Klassen, indem die Selektoren der einzelnen Klassen ohne Leerzeichen aneinandergehängt werden. Damit solch ein Selektor zutrifft, muß das Element also zu allen angegebenen Klassen gehören. Die Klassen können dann einzeln angesprochen werden:

<p>Ein "normaler" Absatz.</p>
<p class="optisch hervorgehoben">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>
<p class="optisch Absatz">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>

p { color: black}
.optisch { color: #f00}
.Absatz { font-style: italic}
.optisch.hervorgehoben {font-size:1.2em}
.optisch.Absatz {font-variant:small-caps}

Universal-Selektor

Der Universal-Selektor wählt alle Elemente aus. Er wird in CSS durch einen Stern (*) gekennzeichnet.

* { color: blue; background: white}

Dies weist allen Elementen eine blaue Farbe und weißen Hintergrund zu.

Attribut-Selektoren

Elemente können auch anhand anderer Attribute als id oder class ausgewählt werden. Dazu dienen die Attribut-Selektoren, bei welchen der Attributname und gegebenenfalls andere Angaben in eckige Klammern gesetzt werden.

[href] – Attributname

Wählt alle Elemente aus, welche ein Attribut href im Quelltext zugewiesen bekommen haben, unabhängig vom Wert des Attributes.

[type="submit"] – Zuweisungs-Operator

Dieser Attributselektor wählt alle Elemente aus, die einen bestimmten Wert im Attribut haben. In diesem Fall also alle Absende-Knöpfe oder allgemeiner Elemente mit der Attributangabe type="submit". Einfache Anführungszeichen sind auch zulässig.

Auf diese Weise könnte auch ein Element mit einem id-Attribut ausgewählt werden: [id="einleitung"]. Dieser Selektor unterscheidet sich jedoch erheblich von #einleitung, welcher das selbe Element auswählt, da beide Selektoren eine unterschiedliche Spezifität aufweisen. Da nicht jede Sprache Fragmentidentifizierer haben muss, stellt dies jedoch eine immer funktionierende Variante dar.

[class~="warning"] – Operator für Liste

Dies wählt alle Elemente aus, in denen "warning" als Bestandteil einer mit Leerzeichen getrennten Liste in einem Attribut mit Namen class vorkommt - andere Attributnamen sind natürlich auch möglich, wenn ihre Werte eine solche Listenstruktur aufweisen. Also zum Beispiel <p class="important warning"> oder <p class="warning highlight">, aber nicht <p class="my-warning">.

[lang|="de"] – Operator für Werte mit Bindestrich

Dies wählt alle Elemente aus, deren Wert des Attributes lang mit "de" beginnt, optional gefolgt von einem Bindestrich und einem beliebigem Teil, also zum Beispiel lang="de", lang="de-DE" oder lang="de-CH"/code>.

Mit CSS3 wurden drei weitere Operatoren eingeführt:

[href^="http"] – Operator für Wertbeginn

Dies wählt alle Elemente aus, deren Attribut href mit "http" beginnt, also in diesem Falle alle absoult addressierten Verweise einer Seite.

[src$=".png"] – Operator für Wertende

Dies wählt alle Elemente aus, deren Attribut src auf ".png" endet, also in diesem Falle alle Graphiken, welche ein PNG einbinden.

[class*="warn"] – Operator für Wert, welcher diese Zeichenkette enthält

Dies wählt alle Elemente aus, deren Attribut class die Zeichenkette "warn" enthält, also zum Beispiel class="my-warning" oder class="warnings".

Pseudo-Klassen und Pseudo-Elemente

CSS kann darüber hinaus bestimmte Bereiche eines Dokumentes dynamisch gestalten, ohne dass dafür eine Änderung im Quelltext des Dokumentes erfolgen muss. Hierzu existieren die Konzepte der Pseudo-Klassen und Pseudo-Elemente, welche in einem eigenen Kapitel näher betrachet werden.

Pseudo-Klassen und Pseudo-Elemente werden in CSS mit einem Doppelpunkt (:) gekennzeichnet. Ab CSS3 werden Pseudo-Elemente zur besseren Unterscheidung durch einen doppelten Doppelpunkt (::) gekennzeichnet.

Beispiele (zur Erläuterung siehe Kapitel Pseudoklassen, Pseudoelemente und erzeugte Strukturen):

p:first-child { color: blue }
p:before { content: '► '}

Gruppierung von Selektoren

Alle möglichen Selektoren können gruppiert werden, um eine Eigenschaft bei mehreren Elementen anzuwenden. Dazu werden die einzelnen Selektoren mit einem Komma (und optionalen Leerzeichen) getrennt notiert.

h1, h2, h3, h4, h5, h6, legend {font-weight: bold}

Kombination von Selektoren

Die Beziehungen der (X)HTML-Elemente untereinander

CSS-Selektoren können kombiniert werden, um die Auswahl der Elemente weiter zu begrenzen. Die Leserichtung der Verschachtelung erfolgt dabei von links nach rechts. Die Auswertung durch den Parser (im Darstellungsprogramm) jedoch von rechts nach links. Selektoren sollten so allgemein wie möglich gehalten werden, um die Auswertung durch das Darstellungsprogramm zu beschleunigen.

Nachfahren

Hiermit wird ein Element ausgewählt, das sich innerhalb eines anderen befindet.

<p class="farbig">
  Textabsatz Nummer eins, welcher eine <strong>Betonung</strong> enthält.
</p>
<p>
  Textabsatz Nummer zwei, welcher eine <strong>Betonung</strong> enthält.
</p>
<blockquote class="farbig"><p>Ein Zitat</p></blockquote>

CSS-Beispiele

p.farbig {
  color: blue;  /* die färbt nur den ersten Absatz blau */
}
.farbig strong {
  color: red;  /* die färbt nur die Betonung im ersten Absatz rot */
}

Kinder

Ist ein Element Kindelement eines anderen Elementes, so wird dafür zur Selektion ein Kind-Selektor verwendet. Dazu wird das Elternelement gefolgt von Leerzeichen, '>' , gefolgt von Leerzeichen gefolgt vom zu selektierenden Nachfahren notiert:

g.knopf > circle  {fill: blue}

Bei diesem auf SVG-Dokumente anwendbaren Beispiel werden alle Kreise blau gefüllt, die Kindelemente einer Gruppe sind, welche zur Klasse 'knopf' gehören.

Das trifft etwa zu auf:

<g class="knopf">
<circle id="k1" r="10" />
<circle id="k2" cy="30" r="10" />
<circle id="k3" cy="60" r="10" />
</g>

Aber nicht auf:

<g class="knopf">
<g class="ersteGruppe">
<circle id="k1" r="10" />
<circle id="k2" cy="30" r="10" />
<circle id="k3" cy="60" r="10" />
</g>
<g class="zweiteGruppe" transform="translate(50,0)">
<circle id="l1" r="10" />
<circle id="l2" cy="30" r="10" />
<circle id="l3" cy="60" r="10" />
</g>
</g>

Wird dieser Selektor innerhalb von XML notiert, etwa im Element style, so ist zu beachten, dass '>' ein besonderes Zeichen ist. Es ist also entweder zu maskieren: > oder aber der Bereich im style ist als CDATA zu kennzeichnen. In einer eigenständigen CSS-Datei ist dieses Vorgehen wiederum falsch. Das Problem ist ein weiterer Hinweis darauf, dass es einfacher und effektiver ist, CSS in einer eigenständigen Datei zu notieren.

Geschwister, direkt nachfolgend

Haben zwei Elemente ein gemeinsames Elternelement, so sind sie Geschwister. Es kann nützlich sein, besondere Regeln zu notieren, wenn zwei aufeinander folgen. Selektiert wird das direkt nachfolgende Element mit dem Selektor '+' zwischen dem vorhergehenden Geschwister und dem zu selektierenden.

Beispiel:

h2 + h3 {padding: 3ex; color: red}

Folgt eine h3-Überschrift direkt auf eine h2-Überschrift, so wird sie mit zusätzlichem Innenabstand ausgestattet und rot dargestellt.

Geschwister, allgemein

Möchte man nun alle folgenden Geschwister eines Elementes ansprechen, so bietet dafür CSS3 den Selektor '~'. Zuerst wird also das Element notiert, dessen Geschwister gewählt werden sollen, dann '~', dann die zu selektierenden Geschwister.

Beispiel

h2 ~ p {margin-top: 1ex}

Das selektiert alle Absätze, welche eine h2-Überschrift als Geschwister haben und dieser folgen, also nicht jene, die der h2-Überschrift vorangehen.

<p>...</p>

<h2>Beispiele</h2>

<p>Es gibt zwei Hauptanwendungen:</p>
<ol>
<li>...</li>
<li>...</li>
</ol>

<p>Und weitere Nebenanwendungen</p>

<ol>
<li>...</li>
<li>...</li>
</ol>

Zur Anwendung kommt der Deklarationsblock also bei dem zweiten und dem dritten Absatz, nicht aber beim ersten.

Erweiterungen, spezifisch für bestimmte Darstellungsprogramme

CSS gibt auch vor, wie die Namen von Eigenschaften auszusehen haben, die von Anbietern von Darstellungsprogrammen auszusehen haben, die also nicht zur Spezifikation von CSS gehören.

Generell beginnen die Namen mit einem '-' oder '_', gefolgt von einem Präfix, der spezifisch für das Programm ist, für welches die Eigenschaft eine Bedeutung hat. Danach folgt ein weiterer '-' und dann der eigentliche Name, der inhaltlich die Funktion der Eigenschaft zum Ausdruck bringen sollte.

So gibt es zum Beispiel '-moz-' für Mozilla/Gecko (Firefox, Seamonkey, Iceweasel, Iceape etc) oder '-webkit-' für Programme, die auf WebKit basieren (etwa Arora, rekonq, Chromium, Safari, Google Chrome etc) oder '-o-' für Opera, auf Presto basierend, '-khtml-' für Programme, die khtml verwenden (etwa der Konqueror; zwar ist WebKit selbst von khtml abgeleitet, ist aber inzwischen ein eigenständiges Projekt mit eigenem Präfix), '-ms-' für den Microsoft Internet Explorer.

Diese spezifischen Eigenschaften dienen primär Test- und Demonstrationszwecken oder auch, um Probleme zu lösen, die insbesondere in Stilvorlagen des Darstellungsprogrammes selbst oder in Stilvorlagen von Nutzern auftreten können. In Autorenstilvorlagen ergeben solche Eigenschaften praktisch nur einen Sinn, wenn experimentelle Implementierungen von neuen CSS-Arbeitsentwürfen getestet werden sollen - das Verhalten ist also nur für die jeweilige Testversion des Darstellungsprogrammes gesichert und kann sich ansonsten jederzeit ändern und hat keine normative Bedeutung.

Das Verfahren stellt sicher, dass Vorschläge für neue Eigenschaften von einem breiteren Publikum getestet, kommentiert und verbessert werden können. Denn ansonsten werden unbekannte Eigenschaften einfach ignoriert. Eine Eigenschaft ist insbesondere dann vom Darstellungsprogramm als unbekannt anzunehmen, wenn sie nicht in einer Empfehlung steht oder kein Präfix hat, welches für das Darstellungsprogramm spezifisch ist. Auf wenn ein passendes Präfix vorhanden ist, ist die Interpretation natürlich optional, womit auch sichergestellt ist, dass solch experimentelle Implementierungen jederzeit wieder korrigiert und in neuen Versionen des Programmes verworfen werden können.

Autoren sollten solch spezifische Eigenschaften in ihren normalen Stilvorlagen also nicht nutzen, beziehungsweise die Stilvorlagen nicht in veröffentlichten Dokumenten nutzen, beziehungsweise diese als Testumgebungen für CSS-Arbeitsentwürfe kennzeichnen, damit das breite Publikum an dem Test partizipieren kann und den Arbeitsentwurf kommentieren.

Kommentare

Selbstverständlich sollten Sie sich die Zeit nehmen, Ihre Definitionen zu kommentieren. Der Nächste, der Ihre CSS-Datei bearbeiten muss, wird es Ihnen danken - und das können auch Sie selbst nach ein paar Jahren und tausenden von anderen Dokumenten sein, die Sie inzwischen bearbeitet haben.

Kommentare beginnen immer mit einem Schrägstrich gefolgt von einem Stern und enden mit den gleichen Zeichen in umgekehrter Reihenfolge:

/* Kommentar */

@-Regeln

@-Regeln sind Strukturen in CSS mit besonderer Syntax, welche Funktionen haben, die darüber hinausgehen, mit Selektoren Elementen Eigenschaften zuzuordnen.

Eine Regel beginnt immer mit dem Zeichen '@' gefolgt von einem Schlüsselwort. Danach gibt es Strukturen, die je nach Regel unterschiedlich sein können.

@charset

Wie bereits im Kapitel Grundlagen erläutert, kann die Regel @charset dazu verwendet werden, die Kodierung eines CSS-Dokumentes anzugeben. Damit die Angabe bei der Dekodierung Verwendung findet, ist sie ganz zu Beginn der CSS-Datei zu notieren, also in der ersten Zeile, ohne vorherige BOM (Bytereihenfolge-Markierung, welche ansonsten ebenfalls von Programmen verwendet werden kann, um das Dokument zu dekodieren).

Falls ein Dienstprogramm (zum Beispiel für HTTP) eine Information über die Kodierung angibt, wird diese Information verwendet und nicht die Angaben im Dokument selbst. Trotzdem kann es sinnvoll sein, im Dokument explizit Angaben zu machen, etwa damit man beim späteren Editieren der Datei gleich daran erinnert wird, welche Kodierung verwendet wird, aber auch, wenn die Datei an einem anderen Ort abgespeichert wird, wo kein Dienstprogramm eine Information über die Kodierung angibt. Angaben zur Kodierung - gleich aus welcher Quelle - beziehen sich immer auf die komplette Datei, es ist also nicht möglich, ein Fragment einer Datei anders dekodieren zu lassen als das gesamte Dokument. Offensichtlich kritisch bei Kodierungsangaben im Dokument ist das Problem, dass das Dokument wenigstens bis zur Stelle dieser Angabe bereits dekodiert sein muß, um die Angabe zur Kodierung lesen zu können, daher sind die Angaben von einem Dienstprogramm eigentlich sehr hilfreich. Aus verschiedenen Gründen gucken aber die meisten Dienstprogramme weder in den Dateien nach Kodierungsangaben, noch haben sie andere verläßliche Quellen oder standardisierte Meta-Informationsangaben zu Dokumenten, daher ist davon auszugehen, dass die Angaben eines Dienstprogrammes in der Regel nicht spezifisch für ein Dokument sind, sondern aus Voreinstellungen in der Konfiguration des Dienstprogrammes stammen. Kodierung und Konfiguration sind dann folglich aufeinander abzustimmen. Die Konfiguration des Dienstprogrammes kann auch gezielt so erfolgen, dass es keine Kodierungsinformationen sendet.

Die genaue Syntax der Regel @charset ist wie folgt:
Es sind zu Beginn des Dokumentes exakt 10 Zeichen zu notieren, die hier zwischen einfachen Anführungszeichen notiert sind: '@charset "'
Danach folgt die für die Kodierung charakteristische Zeichenkette, etwa:
ISO-8859-1 oder UTF-8.
Danach folgen die Zeichen '";'.

Beispiele:
@charset "UTF-8";
oder
@charset "ISO-8859-1";.

@import

Mittels der Regel @import ist es möglich, externe Stilvorlagen in eine Stilvorlage einzubinden. Zur Identifikation der gewünschten Stilvorlage wird ihre URI/IRI angegeben. Solche Regeln sind zu Beginn eines Dokumentes zu notieren, allenfalls kann eine Regel @charset davorstehen.

Die genaue Syntax der Regel @import ist wie folgt:
Sie beginnt mit der Zeichenfolge, die hier zwischen einfachen Anführungszeichen notiert ist:
'@import '.
Danach gibt es zwei Möglichkeiten, die alternativ notiert werden können, es wird in jedem Falle eine URI/IRI notiert, hier abgekürzt als 'URI', ein Beispiel für eine relative Angabe wäre etwa 'stil.css':

• "URI"
• url(URI)

Danach folgt entweder ein Semikolon ';' oder einen Medienangabe, gefolgt von einem Semikolon, also zum Beispiel ' print;' oder ' screen, tv, projection;'. Hinsichtlich möglicher Medien siehe den Abschnitt über Medientypen.

@media

Mittels der Regel @media können CSS-Anweisungen spezifisch für bestimmte Medien notiert werden. Die spezifischen Angaben stehen dann in einem Block, welcher also mit geschweiften Klammern markiert wird.

Die genaue Syntax der Regel @media ist wie folgt:
Sie beginnt mit der Zeichenfolge, die hier zwischen einfachen Anführungszeichen notiert ist:
'@media '.
Darauf folgt eine mit Komma (und optionalen Leerzeichen) separierte Liste von Medientypen, gefolgt von einer geschweiften Klammer auf: '{'
Die Regel endet mit einer geschweiften Klammer zu: '}'.
Dazwischen sind die CSS-Anweisungen notiert, die für die angegebenen Medientypen verwendet werden sollen.

Die verfügbaren Medientypen sind weiter unten aufgeführt.

Innerhalb der Regel @media dürfen keine weiteren @-Regeln stehen, diese wären dann als ungültig zu ignorieren.

Beispiel:

@media print {
    body {color: black; background: white }
}
@media screen {
    body {color: #006; background: #ffc}
}
@media screen, print {
    body { font-fanily: sans-serif }
}

body {font-size: 1em}
h1 {font-size: 2em}
h2 {font-size: 1.6em}

Die Angaben außerhalb der Medienregeln gelten für alle Darstellungen. Für die Druckausgabe wird schwarze Schrift auf weißen Grund angegeben, für den Monitor dunkelblau auf hellgelb. Für beides soll dann die generische Schriftfamilie 'sans-serif' verwendet werden.

@page

Bei Büchern oder Vorträgen mit eine Projektor sind Inhalte meistens auf Einzelseiten aufgeteilt. Mit der Regel @page können Angaben gemacht werden, welche für solch eine Seitendarstellung spezifisch sind. Details dazu werden beschrieben im Kapitel Seitenmedien.

@font-face

Diese Regel ermöglicht es, Schriftartendateien zu referenzieren. Sie ist nicht in CSS 2.1 verfügbar. Details dazu werden beschrieben im Kapitel Schriftart.

@namespace

Diese Regel ermöglicht es, ein Präfix für einen Namensraum festzulegen, um darüber Elemente oder Attribute zu selektieren, siehe nächster Abschnitt.

Namensraum-Modul

Bei XML-Formaten wie XHTML oder SVG sind Elemente immer einem bestimmten Namensraum zugeordnet. Auch Attribute können einem bestimmten Namensraum zugeordnet sein. Bei SVG werden Referenzierungen etwa mit Attributen aus dem Namesraum von XLink realisiert, die demzufolge alle einen Präfix haben, dem zuvor ein Namensraum zugeordnet wurde.

Enthalten nun Dokumente, die mit CSS dekoriert werden sollen, Elemente oder Attribute mit Präfix für Namensräume, so kann auch in der Stilvorlage ein Präfix für einen Namensraum definiert werden. Mit einem speziellen Selektor kann dann ein Element oder Attribut mit Präfix gezielt selektiert werden.

Darstellungsprogramme, die dieses Modul nicht kennen, werden sowohl die Definitionen der Präfixe für Namensräume ignorieren als auch die entsprechenden Regeln, die mit dem Selektor aufgestellt werden. Wenn also rückwärtskompatibel selektiert werden soll, muß anhand anderer Kriterien selektiert werden.

Regel @namespace

Mit der Regel @namespace wird ein Präfix für einen Namensraum definiert. Dies geschieht zu Beginn einer Stilvorlage, aber nach gegebenenalls notierten Regeln @charset und @import.

Die Regel beginnt mit derr Zeichenfolge '@namespace', optional gefolgt von Leerzeichen. Es kann ein voreingestellter Namensraum angegeben werden, der dann gilt, wenn kein Präfix verwendet wird. Dazu folgt dann (im Bedarfsfalle in Anführungszeichen) einfach der Namensraum. Ansonsten folgt auf '@namespace' nach den optionalen Leerzeichen eine Zeichenfolge (ohne Leerzeichen) für das Präfix, dann wieder optionale Leerzeichen, gefolgt von der Namensraumangabe (im Bedarfsfalle in Anführungszeichen). Hinter der Namensraumangabe können jeweils optionale Leerzeichen folgen, gefolgt von einem Semikolon ';'.

Beispiele:

@namespace "http://www.w3.org/2000/svg";
@namespace xlink "http://www.w3.org/1999/xlink";
@namespace x "http://www.w3.org/1999/xhtml";

Hier ist also der voreingestellte Namensraum der von SVG und das Präfix 'xlink' wird für Attribute von XLink verwendet, das Präfix 'x' für Elemente oder Attribute von XHTML. Zumindest die ersten beiden Angaben wären typisch für Stilvorlagen für SVG-Dokumente, die letzte kann nützlich sein, falls etwa in foreignObject XHTML notiert wird und die XHTML-Elemente mit Präfixen versehen werden.

Bei der Definition der in der Stilvorlage verwendeten Präfixe ist es nicht erforderlich, daß dies dieselben Präfixe sind, wie sie im XML-Dokument verwendet werden. Relevant ist nur, daß der zugehörige Namensraum paßt.

Präfix-Präfix oder -Selektor

Um nun Elemente oder Attribute mit einem entsprechenden Präfix zu selektieren, wird deren Namen eine Zeichenkette oder ein Präfix vorangestellt, welche mit dem Präfix für den entsprechenden Namensraum beginnt. Ein vertikaler Balken '|' separiert dies dann vom folgenden Namen des Elementes oder Attributes.

Beispiele passend zum Beispiel zur Definition von Präfixen im vorherigen Abschnitt:

'x|p'

selektiert alle p mit einem Präfix für den Namensraum von XHTML

'xlink|title'

selektiert alle title mit einem Präfix für den Namensraum von XLink

'|stroke'

selektiert alle stroke, die nicht zu einem Namensraum gehören

'*|a'

selektiert alle a egal mit welchem Präfix, selbst ohne Präfix

'g'

selektiert alle g ohne Präfix, also gemäß obiger Angabe sind die dann im Namensraum von SVG

Ein kompletter Block für ein Element könnte also etwa so aussehen:

x|p {background: blue; color: yellow}

Oder für ein Attribut:

a[xlink|title] { stroke: blue; fill: yellow}

Medientypen

CSS 2.0 und CSS2.1 definieren folgende Medientypen:

screen

Computer-Bildschirme (Voreinstellung)

tty

Teleprinter, Terminals, Geräte mit grober Auflösung mit äquidistantem Zeichenraster

tv

Fernseher und ähnliche, niedrige Auflösung, Farbe, eingeschränkte Möglichkeiten zu rollen

projection

Projektoren

handheld

Tragbare Geräte mit geringer Auflösung, geringe Bandbreite, keine Farbe

print

Druckausgabe auf einzelnen Papierseiten und Vorschau auf dem Monitor dafür

braille

Braille-Lesegeräte

embossed

Braille-Seitendrucker

aural

Sprachausgabe (CSS 2.0)

speech

Sprachausgabe (CSS 2.1)

all

Alle Geräte

Medienanfragen

Medienanfragen (englisch media queries) sind eine neue Konstruktion in CSS 3, eine Erweiterung der einfachen Medienangabe in CSS 2. Dies erfordert auch eine neue Syntax, die zwar der sonstigen Syntax von CSS ähnelt, aber aufgrund einer etwas anderen Aufgabe sowohl logisch als auch in der Notation neue Strukturen aufweist.

Mit solch einer Medienanfrage oder -abfrage können abhängig von den Eigenschaften des Ausgabegerätes alternative Stilvorlagen angeboten werden, unter denen das Darstellungsprogramm anhand der Angaben in der Anfrage automatisch die passende auswählen kann.

Die An- oder Abfrage resultiert daher in einer Antwort - ja oder nein - entweder die Stilvorlage ist anzuwenden oder nicht, daher muß das Darstellungsprogramm den Inhalt der Anfrage - die Aussage - logisch bewerten.

Eine Medienanfrage besteht aus einem Medientyp und optionalen Aussagen, die zusammen Kriterien des Ausgabemediums abfragen - treffen die Aussagen zu, werden die zugehörigen CSS-Anweisungen ausgeführt, sonst nicht. Medienanfragen können in einer mit Komma und optionalen Leerzeichen separierten Liste zusammengefügt werden.

Die genaue Syntax ist in kompakter Form (EBNF-Notation) definiert. Dabei dienen eckige Klammern der Gruppierung. Das Fragezeichen bedeutet optional, keins oder eins. Der Stern bedeutet keins oder mehr. Unter L sind die Zeichen zusammengefaßt, die als Leerzeichen gelten. Das Zeichen | steht für oder, beziehungsweise Alternativen. Einfach hinzuschreibende Zeichen sind in einfache Anführungszeichen gesetzt. Das Komma ',' entspricht einer logischen oder-Verknüpfung, also trifft solch eine Aussage zu, wenn mindestens eine der Anfragen zutrifft.

 Media-Query-Liste: L* [Media_Query [ ',' L* Media_Query ]* ]?;

 Media_Query: [['only' | 'not']? L* Medientyp L* [ 'and' L* Ausdruck ]*]
  | Ausdruck [ 'and' L* Ausdruck ]*;

 Ausdruck: '(' L* Merkmal L* [':' L* Wert]? L* ')' L*;

 Medientyp: all| aural | braille | handheld | print |
  projection | screen | speech | tty | tv | embossed;

 Merkmal: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | orientation
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan 
  | grid;

L : [#x20 | #x9 | #xD | #xA];

Wert: Merkmalsabhängig, siehe folgende Einzelerklärungen

Beispiel mit Regel @media:

@media all and (orientation:portrait) {color: #040; background: #cfc}
@media print and (orientation:landscape) {color: black; background: white}

Beispiel mit Regel @import:

@import url(stil.css) all and (orientation:portrait);
@import url(print.css) print and (orientation:landscape);

Beziehungsweise zur Verwendung in einem Attribut in (X)HTML oder XML:

media="all and (orientation:portrait)"
media="print and (orientation:landscape)"

'and' dient immer als Verknüpfung zwischen dem Medientyp und dem Ausdruck und wie die Bezeichnung schon andeutet, handelt es sich um ein logisches Und. Der Anfrageteil trifft also zu, wenn der angegebene Medientyp und der Ausdruck zutreffen.

Der Medientyp 'all' kann auch zusammen mit 'and' weggelassen werden (eine Kurzschreibweise, die in obiger Kurznotation nicht berücksichtigt wurde), folgendes ist also gleichwertig:

media="all and (orientation:portrait)"
media="(orientation:portrait)"

Beispiel für eine Liste:

@media screen and (orientation:portrait), 
 tv (orientation: landscape) 
 {
   body {color: #040; background: #cfc}
 }

Mit dem Schlüsselwort 'not' kann die Aussage auch negiert werden:

@media not all and (orientation:portrait), 
 tv (orientation: portrait) 
 {
   body {color: #040; background: #cfc}
 }

Die Aussage trifft also zu auf 'tv' oder auf alle anderen Medientypen, sofern sich nicht die Orientierung 'portrait' aufweisen.

Das Schlüsselwort 'only' dient nur dazu, im Bedarfsfalle die Medienanfrage vor älteren Programmen zu verbergen, welche solche Anfragen nicht komplett verstehen. Diese stellen fest, dass es laut ihrem Kenntnisstand 'only' nicht gibt und wenden die Regel gar nicht an.

@media only all and (color) {
body {color: #040; background: #cfc}
}

Das ist gleichzeitig auch ein Beispiel für einen Ausdruck ohne Wert.

Medien-Merkmale

Die Medien-Merkmale entsprechen den CSS-Eigenschaften, auch die Notation innerhalb der Blöcke entspricht der bereits erläuterten CSS-Syntax für Deklarationsblöcke.

Die Unterschiede liegen in der unterschiedlichen Funktion. Deklarationsblöcke geben an, welche Eigenschaften angewendet werden sollen; Blöcke mit Medien-Merkmalen geben an, welche Eigenschaften ein Ausgabemedium haben muß, damit CSS-Anweisungen ausgeführt werden können.

Während Deklarationsblöcke immer aus Paaren aus Eigenschaft und Wert bestehen, können Merkmale auch alleine ohne Wert stehen, wenn es nur drauf ankommt, dass das Merkmal überhaupt verfügbar ist.

Neben dem Grundmerkmal gibt es bei den meisten auch noch die zusätzlichen Präfixe min- und max-. Mit ersterem gibt man die minimale Größe an, mit dem zweiten die maximale Größe.

width und height

Das Merkmal width steht für die Breite des verwendeten Anzeigebereiches, entsprechend height für die verwendete Höhe. Oft oder meistens wird ja nicht der gesamte Monitor für die Anzeige des Dokumentes verwendet, sondern nur ein Teil davon in einem Fenster. Daher sind diese Größen wichtig, um abschätzen zu können, wieviel Platz man für die Stilvorlage und den Inhalt verfügbar hat. Sofern Rollbalken vorhanden sind, zählen diese zu dem so angegebenen Anzeigebereich. Der Wert ist jeweils eine nicht negative Länge. Anwendbar ist das Merkmal auf visuelle und taktile Medien, also etwa nicht auf reine Sprachausgaben. Die Merkmale können auch die Präfixe min- und max- haben.

@import url("klein.css") screen 
  and (max-width: 399px) 
  and (max-height: 699px);
@import url("mittel.css") screen 
  and (min-width: 400px) 
  and (max-width: 700px) 
  and (min-height: 400px) 
  and (max-height: 700px);
@import url("gross.css") screen 
  and (min-width: 701px) 
  and (min-height: 701px);

An dem Beispiel zeigen sich schon kleinere Probleme, denn CSS erlaubt auch eine Reskalierung von Pixeln, diese müssen also nicht immer ganzzahlig sein. Bei obiger Angabe gibt es also ein paar wenige Fälle, welche nicht abgedeckt sind. Mit endlich vielen Nachkommastellen kann man das Problem natürlich reduzieren, aber nicht völlig vermeiden. Sofern die Stilvorlagen miteinander vereinbar sind, kann man natürlich den maximalen Wert des kleineren Bereiches gleich dem minimalen Wert des größeren Bereichs wählen, dann wendet man beide Stilvorlagen an, wenn der Wert exakt getroffen wird, sonst nur einen. Verwendet man in obigem Beispiel etwa jeweils '399.99px' als Grenze, so ist es unwahrscheinlich, dass der Fall wirklich eintritt.

Das ist bei CSS nicht die einzige Stelle, wo die Notation nicht so ganz ausgereift und durchdacht ist. In dem Sinne ist Perfektion nichts, was man von CSS-Spezifikationen erwarten sollte - in älteren, besser durchdachten W3C-Spezifikationen wie SMIL werden solche Intervallprobleme etwa deutlich besser gelöst.

device-width und device-height

Das Merkmal device-width steht für die Breite des gesamten Anzeigebereiches, entsprechend device-height für die gesamte Höhe. Bei Monitoren ist dies also die Bildschirm- oder Monitorgröße. Diese ist allerdings nur selten relevant für den wirklich verfügbaren Platz für Inhalt und Stilvorlage. Die Merkmale eignen sich also eher, um abzuschätzen, welcher Typ von Ausgabegerät überhaupt verwendet wird, nicht um damit wirklich Details der Gestaltung zu bestimmen. Der Wert ist jeweils eine nicht negative Länge. Anwendbar ist das Merkmal auf visuelle und taktile Medien, also etwa nicht auf reine Sprachausgaben. Die Merkmale können auch die Präfixe min- und max- haben.

orientation

Mit dem auf die Medientypen 'print', 'projection', 'screen' und 'tv' anwendbaren Merkmal orientation wird die Orientierung des Ausgabegerätes abgefragt. Der Wert ist entweder 'portrait' oder 'landscape'. Bei 'portrait' ist die Höhe größer als die Breite, bei 'landscape' umgedreht. Bei Gleichheit gilt 'portrait'. Mit Breite und Höhe sind die Merkmale width und height gemeint.

aspect-ratio

Während orientation nur einen qualitativen Vergleich von Höhe und Breite zuläßt, kann dies mit dem Merkmal aspect-ratio quantitativ erfolgen.

Der Wert ist das Verhältnis von width zu height. Die Notation besteht aus einer positiven ganzen Zahl, gefolgt von '/', gefolgt von einer positiven ganzen Zahl. Optionale Leerzeichen vor und nach dem '/' sind erlaubt. Anwendbar ist das Merkmal bei 'print', 'projection', 'screen' und 'tv'. Das Merkmal kann auch die Präfixe min- und max- haben.

device-aspect-ratio

Während aspect-ratio das Aspektverhältnis des verfügbaren Anzeigebereiches abfragt, bezieht sich das Merkmal device-aspect-ratio nur auf den gesamten Anzeigebereich, also bei Bildschirmen oder Monitoren auf deren Aspektverhältnis. Das Merkmal sagt also mehr darüber aus, welches Gerät überhaupt verwendet wird, als eine konkrete Information darüber zu liefern, wie Inhalte angeordnet werden können.

Der Wert ist das Verhältnis von device-width zu device-height. Die Notation besteht aus einer positiven ganzen Zahl, gefolgt von '/', gefolgt von einer positiven ganzen Zahl. Optionale Leerzeichen vor und nach dem '/' sind erlaubt. Anwendbar ist das Merkmal bei 'print', 'projection', 'screen' und 'tv'. Das Merkmal kann auch die Präfixe min- und max- haben.

color

Mit dem Merkmal color kann abgefragt werden, wieviele Bits pro Farbkanal beim Anzeigegerät verfügbar sind. Handelt es sich nicht um ein Gerät mit Farbausgabe, so ist der Wert 0, sonst eine positive ganze Zahl. Anwendbar ist das Merkmal bei visuellen Medien. Das Merkmal kann auch die Präfixe min- und max- haben.

Wird kein Wert angegeben, so trifft das Merkmal zu, wenn es sich um ein Gerät mit Farbausgabe handelt, der Wert also nicht 0 wäre.

Sollte das Gerät pro Farbkanal unterschiedlich viele Bits verfügbar haben, gilt die kleinste Zahl.

Sind die Farben in einem Index durchnumeriert, also nicht alle Farbkanäle frei wählbar, wird ebenfalls die kleinste Anzahl von Bits pro Farbkanal bei den verfügbaren Farben verwendet.

color-index

Sind die Farben in einem Index durchnumeriert, kann mit dem Merkmal color-index abgefragt werden, wieviele Farben im Index vorhanden sind. Ist kein Index verfügbar, ist der Wert 0, sonst eine positive ganze Zahl. Anwendbar ist das Merkmal bei visuellen Medien. Das Merkmal kann auch die Präfixe min- und max- haben.

Wird kein Wert angegeben, so trifft das Merkmal zu, wenn es sich um ein Gerät mit Farb-Index handelt, der Wert also nicht 0 wäre.

monochrome

Bietet das Anzeigegerät nur eine einfarbige Darstellung, etwa in Grauwerten, so kann mit dem Merkmal monochrome ähnlich zu color abgefragt werden, wieviele Bits für Helligkeitsunterschiede verfügbar sind. Handelt es sich nicht um ein Gerät mit einfarbiger Darstellung, so ist der Wert 0, sonst eine positive ganze Zahl. Anwendbar ist das Merkmal bei visuellen Medien. Das Merkmal kann auch die Präfixe min- und max- haben.

Wird kein Wert angegeben, so trifft das Merkmal zu, wenn es sich um ein Gerät mit einfarbiger Darstellung handelt, der Wert also nicht 0 wäre.

Beispiel, wie man unterschiedliche Stilvorlagen für Drucker mit und ohne Farbwiedergabe realisieren kann:

@import url("druck_kontrast.css") print and (monochrome);
@import url("druck_farbe.css") print and (color);

resolution

Die Auflösung des Anzeigegerätes kann als Merkmal resolution abgefragt werden. Der Wert ist eine positive Zahl, direkt gefolgt von einer Einheit, entweder 'dpi' für Pixel pro 2.54cm (inch) oder 'dpcm' für Pixel pro Zentimeter.

Anwendbar ist das Merkmal bei 'print', 'projection', 'screen' und 'tv'. Das Merkmal kann auch die Präfixe min- und max- haben.

Sind die Pixel nicht quadratisch, trifft das Merkmal resolution allein nie zu. Allerdings kann immer min-resolution verwendet werden, um auch bei nicht quadratischen Pixeln die kleinste Auflösung oder Pixeldichte abzufragen, entsprechend mit max-resolution die größte.

Bei Farbdruckern ist immer die Pixeldichte einer beliebigen Farbe gemeint.

scan

Für den Medientyp 'tv' kann abgefragt werden, mit welchem Modus das Bild aufgebaut wird. Verfügbar für dieses Merkmal scan sind die Werte 'progressive' (kontinuierlich fortschreitend) und 'interlace' (verschränkt, verschachtelt).

grid

Mit dem Merkmal grid kann bei visuellen und taktilen Medien abgefragt werden, ob die Ausgabe auf ein Flächenraster beschränkt ist oder alle Pixel einzeln modifizierbar sind. 'tty' ist etwa ein typisches Medium mit einer Rasterausgabe.

Der Wert ist entweder 0 oder 1. 1 trifft auf eine Rasterausgabe zu, 0 sonst.

Fehlerbehandlung bei Medienanfragen

Für Medienanfragen gibt es spezielle Fehlerbehandlungsregeln, die auch Rückschlüsse darauf zulassen, wie sich aktuelle Darstellungsprogramme verhalten, wenn in Zukunft weitere Medientypen und Merkmale in einer neuen CSS-Version eingeführt werden.

• Ein unbekannter Medientyp führt dazu, dass die Anfrage nicht zutrifft, die zugehörige Stilvorlage wird also nicht angewendet.
• Ein unbekanntes Merkmal wird wie 'not all' behandelt, was darauf hinausläuft, dass die Medienanfrage behandelt wird, als sei das unbekannte Merkmal nicht angegeben.
• Ein unbekannter Wert für ein Merkmal wird ebenfalls behandelt, als ob 'not all' angegeben sei, was darauf hinausläuft, dass die Medienanfrage mit unbekanntem Wert behandelt wird, als sei das Merkmal nicht angegeben.
• Anfragen mit fehlerhafter Syntax werden ansonsten so weit analysiert, bis ihr Ende gefunden ist, sie werden als 'not all' behandelt, also als ob sie nicht angegeben wären.

Behandlung von fehlerhaften Anweisungen, unbekannten Eigenschaften und Werten

CSS definiert auch eine Fehlerbehandlung. Das generelle Verhalten besteht darin, unbekannte Anweisungen zu ignorieren. Dies ermöglicht es unter anderem auch einzuordnen, was ältere Darstellungsprogramme tun werden, wenn sie auf Eigenschaften oder Werte stoßen, die erst nach ihrer Veröffentlichung spezifiziert wurden, welche sie also nicht kennen können. Damit ist es dann auch möglich, Stilvorlagen so zu strukturieren, dass ein Ersatz für Eigenschaften angeboten wird, die älteren Programmen unbekannt sind. Weil unbekannte Anweisungen ignoriert werden, kann man für alte Programme vor einer neuen Anweisung etwas notieren, welches die neue Anweisung ersetzt. Das alte Programm wird dann die neue Anweisung ignorieren, während neue Programme die neue Anweisung interpretieren und damit also der ältere Ersatz mit höherer Priorität überschrieben werden kann.

Das Darstellungsprogramm hat die Stilvorlage auch zu analysieren, wenn sie unbekannte Strukturen enthält. In solch einem Falle ist es das Ziel der Analyse, herauszufinden, wo der ungültige Teil eines Anweisung beginnt und wo er endet. Dieser Bereich wird dann ignoriert, als sei er nicht in der Stilvorlage vorhanden, der Rest wird interpretiert.

Unbekannte Eigenschaft

Beispiel:

p {color: blue; time-warp: -7days slow; background: yellow}

Die Eigenschaft time-warp wird dem Darstellungsprogramm unbekannt sein. Sie wird folglich einschließlich ihres Wertes ignoriert. Effektiv interpretiert das Darstellungsprogramm stattdessen:

p {color: blue; background: yellow}

Unbekannte Werte

Beispiel:

p {color: 450nm; font-family: sans-serif; font-size: 2; background: "red"}

Die Angabe von Wellenlängen, um Farben zu notieren, ist in CSS nicht definiert, daher ist der Wert falsch oder unbekannt. Bei der Angabe der Schriftgröße wurde die Einheit vergessen. Für die Hintergrundfarbe wurde fälschlich das Schlüsselwort für die Farbe in Anführungszeichen gesetzt.

Nach Ignorieren der fehlerhaften Anweisungen wird effektiv stattdessen folgendes interpretiert:

p {font-family: sans-serif}

Unbekannter Selektor

Beispiel:

h1, h2 & h3 { color:blue}

'&' ist in CSS2.1 ein unbekannter Selektor. Daher wird die Anweisung igoriert, also insbesondere auch für h1.

Fehlerhafte Deklaration

Beispiele:

h1 { color:blue; color }  /* ':' und Wert fehlen */
h2 { color:green;   color; color:blue }  /* in der Mitte dasselbe */
h3 { color:blue; color: } /* Wert fehlt */
h4 { color:red;   color:; color:blue } /* in der Mitte dasselbe */
h5 { color:blue; color{;color:red} } /* { } hier unzulässig */
h6 { color:red;   color{;color:green}; color:blue } /* in der Mitte dasselbe */

Effektiv wird das dann interpretiert als:

h1 {color:blue}
h2 {color:blue}
h3 {color:blue}
h4 {color:blue}
h5 {color:blue}
h6 {color:blue}

Fehlerhafte Struktur

Beispiele für zu ignorierende Strukturen angelehnt an Beispiel aus der Spezifikation

p @dumm {color: blue}     /* unerwartete @-Regel @dumm */
@ab @dafuer;               /* @-Regel mit unerwartetem @-Schlüsselwort @dafuer */
}} {{ - }}               /* Anweisung mit unerwarteten rechten geschweiften Klammern */
) ( {} ) h1 {color: blue } /* Anweisung mit unerwarteter rechter runder Klammer */

Unbekannte @-Regeln und @-Schlüsselwörter

Bei unbekannten @-Regeln und @-Schlüsselwörtern wird der komplette, zur @-Regel gehörige Block ignoriert. Beispiel:

@zeitmaschine {
 @warp-einstellung {
   time-warp: -7days slow;
   color: blue
 }
 h1 {color: red}
}
code {color: #af0}

Davon bleibt dann effektiv nur:

code {color: #af0}

weil es außerhalb der unbekannten @-Regeln steht.

Unerwartetes Ende der Stilvorlage

Am Ende einer Stilvorlage werden alle noch offenen Strukturen geschlossen. Beispiel:

@media print {
    h1:after { content: '!

Automatisches Schließen macht daraus effektiv:

@media print {
    h1:after { content: '!'}
}

Unerwartetes Ende einer Zeichenkette

Zeichenketten können keine Zeilenumbrüche enthalten, daher werden diese automatisch geschlossen, wenn ein Zeilenende erreicht wird. Allerdings tritt dann die Fehleranalyse für unbekannte Werte und Strukturen ein. Beispiel:

code {
 color: red;
 font-family: 'Courier New Times
 background: red;
 font-size: 1em
}

Das Darstellungsprogramm schließt 'Courier New Times', der Wert von font-family wäre dann: font-family: 'Courier New Times' background: red;.
'Courier New Times' background: red; ist aber keine gültiger Wert für font-family, daher wird die Anweisung ignoriert. Interpretiert wird:

code {
 color: red;
 font-size: 1em
}

Wohin gehören CSS-Anweisungen?

Die CSS-Anweisungen können sich entweder direkt in der (X)HTML-Datei oder separat in einer eigenen Datei befinden. Üblicherweise verwendet man die letztere der beiden Varianten, wofür es mehrere Gründe gibt. Es ist so etwa einfacher, die Stilvorlage zu wechseln oder mehrere alternative Stilvorlagen zu verwenden. Ein Darstellungsprogramm muss bei Verwendung einer externen Stilvorlage bei einem größeren Projekt mit vielen Dokumenten die Information über die Stilvorlage auch nur einmal laden und vorhalten und nicht bei jedem neuen Seitenaufruf neu laden und analysieren. Die (X)HTML-Datei sollte auch übersichtlich bleiben, wobei es dann kontraproduktiv wäre, wenn man mit dem Attribut style arbeiten würde. Angaben in diesem lassen sich zudem nur schwierig mit externen Stilvorlagen überschreiben, erschweren also ebenfalls die Verwendung von alternativen Darstellungen oder eine Aktualisierung von Stilvorlagen.

Das in XHTML ohnehin als veraltet gekennzeichnete Attribut style sollte also komplett vermieden werden. Das Element style ist vor allem bei Einzeldokumenten oder zum Test und zur Entwicklung neuer Stilvorlagen sinnvoll, wenn also möglichst alles in einem einzigen Dokument zusammengefaßt sein soll.

Falls Sie jetzt mit einem neuen Projekt beginnen, erstellen Sie also idealerweise mit Ihrem Texteditor eine neue Datei und nennen diese zum Beispiel "screen.css". In dieser Datei werden Sie dann künftig das Layout der Bildschirmdarstellung definieren.

Vermutlich haben Sie schon eine Idee, wie Ihre künftigen Dokumente präsentiert werden sollen. Wahrscheinlich werden diese neben dem eigentlichen Inhalt auch einen reinen Navigationsteil haben. Wenn nun jemand Ihre Dokumente liest und dann einen interessanten Artikel drucken möchte, bringt es ihm nichts, wenn die Hälfte des Papiers mit Navigationselementen bedruckt wird. Das können Sie verhindern, wenn Sie das Layout für die Druckausgabe in einer separaten CSS-Datei definieren. Legen Sie dazu eine weitere Textdatei mit dem Namen "print.css" an.

Selbstverständlich können Sie die Dateien nennen, wie Sie wollen, zum Beispiel "elefant.css" und "gruenekuh.css". Hilfreich ist meist allerdings ein Benennung, die charakteristisch für den Stil ist, insbesondere, wenn mehrere Stilvorlagen alternativ angeboten werden. Das erleichtert Ihnen auch, sich leichter zurechtzufinden.

In den nachfolgenden Artikeln werden wir aber davon ausgehen, dass Sie den obigen Namensvorschlag übernommen haben.

Wie beginne ich?

CSS-Dateien, die separat (also getrennt vom (X)HTML-Dokument) angelegt werden, sind äußerst schlicht aufgebaut. Sie sind darum auch sehr einfach zu schreiben. Alles, was Sie benötigen, ist eine eindeutige Zuordnung der Kodierung der Information im Dokument und mindestens eine Definition der Eigenschaften eines Elementes des zu dekorierenden Dokumentes. CSS hat eine andere Art der Notation oder Syntax als (X)HTML oder allgemein XML, die von dort bekannten Elementmarkierungen (<...>) sind in CSS nicht definiert.

Ganz zu Beginn Ihrer CSS-Dateien kann angegeben werden, welchen Zeichensatz Sie in diesem Dokument verwenden:

@charset "UTF-8";

Sofern die Datei von einem Dienstprogramm ausgeliefert wird (etwa per HTTP), hat die Angabe des Dienstprogrammes allerdings wie üblich Priorität gegenüber den Angaben im Dokument. Macht das Dienstprogramm keine Angabe, kann ein BOM (Bytereihenfolge-Markierung) am Anfang der Datei Einfluß auf die Dekodierung haben, dies sollte also vermieden werden, wenn die eigene Angabe Wirkung haben soll.

Trifft nichts davon zu, gibt aber ein Verweis einen Hinweis auf die Kodierung (etwa per Element link in (X)HTML), so wird dies verwendet. Gibt es auch die Angabe nicht, aber ein verweisendes Dokument, so wird dessen Kodierung verwendet. Gibt es auch das nicht, wird UTF-8 angenommen.

Vielleicht wenden Sie sich erstmal nur der 'screen.css' zu und schieben die 'print.css' für später auf. Üblicherweise lässt sich diese später einfach aus der 'screen.css' ableiten.

Anschließend sollten Sie mit etwas Kommentar beschreiben, was Sie hier eigentlich tun wollen. das könnte dann so aussehen:

@charset "utf-8";

/*
Stilvorlage Frühlung für example.com
(c) 2013  Reiner Zufall, Hinterm Zaunpfahl 3, Berlin-Mitte
*/

/*** globale Voreinstellung ***/
body {
  color:       #fff;
  background:  #000
}

Fühlen Sie sich bei den Kommentaren völlig frei. Wenn Ihnen dieses Konzept nicht zusagt, erfinden Sie ein eigenes. Nur scheuen Sie sich nicht, Kommentare großzügig zu verwenden.

Unter "globale Voreinstellung" sammelt man sinnvoller Weise jene Anweisungen, welche die gesamtheitliche Basis liefern; in obigem Beispiel, dass der Text grundsätzlich weiß und der Hintergrund schwarz ist.

HTML, XHTML oder XML?

Vielleicht besitzen Sie bereits eine HTML-, XHTML- oder XML-Datei, in der Sie die soeben erstellten CSS-Dateien einbinden möchten. Vielleicht müssen Sie diese Frage verneinen und fragen sich an dieser Stelle, welche Variante - HTML, XHTML oder lieber XML - Sie verwenden sollten, um ein Dokument zu erstellen. Um es auf einen Nenner zu bringen: Mit XHTML werden Sie vermutlich richtig liegen. Einige recht spezielle Regeln in HTML können unter anderem bei der Selektion von Elementen und Strukturen per CSS zu Überraschungen führen, was bei XML-Formaten nicht auftritt, auch daher ist ein XML-Format wie XHTML erstmal die einfachere Wahl, um CSS zu lernen. Mehr dazu finden Sie im Buch XHTML.

Wenn wir nachfolgend von HTML reden, gilt dies natürlich sinngemäß immer auch für XHTML und umgedreht. Die Dateiendung einer XHTML-Datei lautet entweder .xhtml oder .xht.

Falls Sie also noch keine (X)HTML-Seite haben, legen Sie diese nun mit Ihrem Texteditor an und nennen sie "index.xhtml". Ein Prototyp für eine XHTML-Datei mit etwas Inhalt sieht etwa wie folgt aus:

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      version="XHTML+RDFa 1.1"
      xml:lang="de">
<head>
   <title>Titel des Dokumentes</title>
</head>
<body>
  <h1>Dokumentüberschrift</h1>

  <p>Ein (sinnvoller) Gedanke könnte hier 
     in einem Absatz notiert werden.</p>
  <p>Weitere Absätze können natürlich folgen.</p>

  <h2>Kapitelüberschrift</h2>

  <p>Mit Überschriften kann das Dokument natürlich auch 
     in Kapitel oder Abschnitte aufgeteilt werden.</p>

</body>
</html>

Siehe dazu auch: Erste Seite mit XHTML.

CSS kann auch für nahezu beliebige XML-Formate verwendet werden. Allerdings dienen dort allgemein Stilvorlagenverarbeitungsanweisungen dem Zweck, auf Stilvorlagen zu verweisen. Das ist ein Mechanismus, der unabhängig vom verwendeten Format definiert ist, während einzelne XML-Formate wie XHTML oder SVG spezielle Elemente oder Attribute haben, die alternativ zu diesem allgemeinen Mechanismus verwendet werden können.

Einzelnachweise

CSS-Anweisungen lassen sich direkt in ein (X)HTML-Dokument oder SVG-Dokument einbauen (englisch auch 'Inline-Styles' genannt) oder aus externen Stilvorlagen des Typs text/css einbinden. Die beiden Methoden lassen sich auch kombinieren. Meistens hat man eine größere Anzahl von XHTML-Dateien, auf welche die gleiche Stilvorlage wirken soll. Oder man hat umgekehrt mehrere Stilvorlagen, zwischen denen der Nutzer frei wählen können soll. Daher ist eine externe Stilvorlage, das in die Dateien eingebunden wird, vorzuziehen, da man die CSS-Regeln nur einmal formulieren muss oder die komplette Stilvorlage einfach wechseln kann. Auch wird so eine Änderung in der externen Stilvorlage direkt auf allen Seiten wirksam.

CSS-Anweisungen im (X)HTML- und SVG-Dokument

Details zum Einbau sind bereits in den Büchern dazu beschrieben:

• Element style in XHTML
• Stilvorlagen in SVG

Global geltende Regeln werden im Kopf der (X)HTML-Datei im Element head eingebaut. Sie werden Element style notiert. Bei SVG empfiehlt es sich, das Element style mit den CSS-Angaben im obersten Element defs zu notieren, welches hinter title und desc des Wurzelelementes svg folgen kann.

Prototyp XHTML:

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      version="XHTML+RDFa 1.1"
      xml:lang="de">
<head>
   <title>Titel des Dokumentes</title>
   <style type="text/css">
    body {background: white; color: black}
    h1 {font-size: 2.5em; color:#060}
    h2 {font-size: 2.0em; color:#080}
   </style>
</head>
<body>
  <h1>Dokumentüberschrift</h1>

  <p>Ein (sinnvoller) Gedanke könnte hier 
     in einem Absatz notiert werden.</p>
  <p>Weitere Absätze können natürlich folgen.</p>

  <h2>Kapitelüberschrift</h2>

  <p>Mit Überschriften kann das Dokument natürlich auch 
     in Kapitel oder Abschnitte aufgeteilt werden.</p>

</body>
</html>

Prototyp SVG:

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="-150 -150 300 300"
  xmlns="http://www.w3.org/2000/svg" version="1.1"
  xml:lang="de">
<title>Beispiel für ein 
       mit CSS dekoriertes 
       SVG-Dokument mit Kreisen
</title>
<defs>
  <style type="text/css">
    circle.nr1 {stroke: black; 
                stroke-width: 5px; 
                stroke-opacity: 0.5}
    circle.nr2 {stroke: white; 
                stroke-width: 5px; 
                stroke-opacity: 0.5}
  </style>
</defs>

<circle r="1000" fill="yellow" />
<circle class="nr1" r="120" fill="red" />
<circle class="nr2" r="110" fill="blue" />
<circle class="nr1" r="80" fill="red" />
<circle class="nr2" r="70" fill="blue" />
<circle class="nr1" r="40" fill="red" />
<circle class="nr2" r="30" fill="blue" />

</svg>

Eine andere, nicht empfohlene Möglichkeit ist, die CSS-Anweisungen direkt in der Anfangsmarkierung des betreffenden Elementes zu notieren, auf welches die Anweisungen wirken sollen. Dazu wird bei (X)HTML oder SVG das Attribut style verwendet, in welchem die Anweisungen als Wert zu notieren sind. Es eignen sich allerdings nicht alle CSS-Anweisungen für diese Methode, etwa können so keine Selektoren verwendet werden, weil diese durch die Verwendung des Attributes bereits impliziert sind.

Das sieht dann zum Beispiel so aus:

 <img style="border:0;width:88px;height:31px" 
      src="vcss.png" 
      alt="Korrektes CSS!" />

Einbinden von externen CSS-Dateien in (X)HTML oder SVG

Für XML allgemein und XHTML oder SVG insbesondere können Stilvorlagenverarbeitungsanweisungen verwendet werden, um auf externe Stilvorlagendateien zu verweisen. Die Angaben folgen dann auf die XML-Verarbeitungsanweisung, zum Beispiel:

<?xml version="1.0" encoding="UTF-8" ?> 
<?xml-stylesheet href="css1.css" 
   type="text/css" 
   title="Stil 1" 
   alternate="yes" 
   media="all" ?>
<?xml-stylesheet href="css2.css" 
   type="text/css" 
   title="Stil 2"
   alternate="yes" 
   media="all" ?>
<?xml-stylesheet href="css0.css" 
   type="text/css" 
   title="Kein CSS"
   media="all" ?>

In diesem Falle würde also die Stilvorlage mit dem Titel 'Kein CSS' als Voreinstellung verwendet werden. Der Nutzer kann dann bei Bedarf im Darstellungsprogramm auswählen, ob er stattdessen lieber 'Stil 1' oder 'Stil 2' verwenden möchte.

Diese Methode ist bei HTML nicht vorgesehen.

Bei (X)HTML gibt es eine weitere, meistens verwendete Methode, die für diese Formate spezifisch ist. Das Referenzieren von externen CSS-Dateien geschieht im Kopf, also im Element head der (X)HTML-Datei mit dem Element link:

<link href="voreinstellung.css" 
      type="text/css" 
      title="Stil: Voreinstellung" 
      rel="Stylesheet" />
<link href="hellaufdunkel.css" 
      type="text/css" 
      title="Stil: Hell auf Dunkel" 
      rel="Alternate Stylesheet" />
<link href="dunkelaufhell.css" 
      type="text/css" 
      title="Stil: Dunkel auf Hell" 
      rel="Alternate Stylesheet" />
<link href="exp.css" 
      type="text/css" 
      title="Stil: Experimentell" 
      rel="Alternate Stylesheet" />
<link href="nix.css" 
      type="text/css" 
      title="Stil: Kein CSS" 
      rel="Alternate Stylesheet" />

Als Voreinstellung wird hier der Stil mit dem Titel 'Stil: Voreinstellung' verwendet. Der Nutzer kann dann bei Bedarf im Darstellungsprogramm auswählen, ob er stattdessen lieber einen der anderen Stile verwenden möchte.

Zu beachten ist dabei, dass alte oder mangelhafte Darstellungsprogramme nicht notwendig eine Auswahl von alternativen Stilvorlagen anbieten und selbst wenn sie es tun, es nicht sichergestellt ist, dass der jeweilige Nutzer weiß, wo er sie auswählen kann - ein Hinweis im Inhalt oder besser noch ein unabhängiger Auswahlmechanismus dort kann also nicht schaden.

Eine weitere Möglichkeit besteht darin, eine CSS-Regel innerhalb des Elementes style zu verwenden, um eine externe Datei zu importieren:

<style type="text/css">
  @import "screen.css"
</style>

Durch Verwendung des Attributes title bei style kann wiederum ein Name für die Stilvorlage festgelegt werden, womit es gegebenenfalls möglich ist, dies mit dem Mechanismus für alternative Stilvorlagen per link oder per Stilvorlagenverarbeitungsanweisung zu kombinieren.

Vielleicht haben Sie in den Grundlagen gelesen, dass Sie zwei CSS-Dateien - eine 'screen.css' für die Bildschirmausgabe und eine 'print.css' für die Druckausgabe - anlegen sollen. Nun, dann wollen wir diese auch korrekt einbinden. Schreiben Sie also den folgenden Text in Ihre im Grundlagen-Teil erstellte 'index.xhtml':

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      version="XHTML+RDFa 1.1"
      xml:lang="de">
<head>
   <title>Titel des Dokumentes</title>   
   <link rel="stylesheet" 
         href="screen.css" 
         type="text/css" 
         media="screen" />
   <link rel="stylesheet" 
         href="print.css" 
         type="text/css" 
         media="print" />
</head>
<body>
  <h1>Dokumentüberschrift</h1>

  <p>Ein (sinnvoller) Gedanke könnte hier 
     in einem Absatz notiert werden.</p>
  <p>Weitere Absätze können natürlich folgen.</p>

  <h2>Kapitelüberschrift</h2>

  <p>Mit Überschriften kann das Dokument natürlich auch 
     in Kapitel oder Abschnitte aufgeteilt werden.</p>

</body>
</html>

Mit der Ergänzung des Attributes media= haben Sie angegeben, welche CSS-Datei für welches Ausgabemedium verwendet werden soll.

Falls Sie unter Linux arbeiten, ist zu empfehlen, die 'print.css' mit der 'screen.css' zu verlinken, solange Sie keine separate 'print.css' nutzen, den Eintrag im Quelltext aber schon vorbereitet haben möchten:

ln -s screen.css print.css

Bitte beachten Sie außerdem, dass die CSS-Klassen ((X)HTML-Attribut class="Klassenname"; im CSS .Klassenname) und die CSS-IDs ((X)HTML-Attribut id="ID"; im CSS #ID) für die jeweiligen (X)HTML-Elemente in der Druck-Version des CSS genau so benannt werden müssen wie Sie diese auch schon in der normalen Version benannt haben, da die einzelnen XHTML-Elemente im XHTML-Dokument notiert werden und dieses Dokument nur einmal (für alle media-Typen) existiert.

Außerdem sollten Sie, wenn Sie für die normale Version zwei CSS-Dokumente erstellt haben, auch zwei CSS-Dokumente für die Druckversion mit der gleichen Aufteilung erstellen, um eine bessere Übersicht zu haben.

Box-Eigenschaften

Das Box-Modell in CSS

Für die Präsentation in visuellen Medien verwendet CSS für blockbasierte Formate wie (X)HTML ein sogenanntes Box-Modell (englisch: box model), welches die Präsentation eines Dokumentes in rechteckige Kästen aufteilt, die wiederum aus ineinander verschachtelte Kästen für die Randverhältnisse dieses Kastens bestehen. Dazu zählen Eigenschaften für den Außenabstand (margin), den Rahmen (border), den Innenabstand (padding) und den Inhalt (beispielsweise ein Text, width und height). Für alle diese Bestandteile können unterschiedliche Abmessungen angegeben werden. Der Vorteil des Box-Modells liegt in der Möglichkeit, bei allen Elementen die Präsentation genau bestimmen zu können, in Bezug auf Größen, Dicken, Farben und der Ausrichtung der einzelnen Seitenelemente (oben (*-top), rechts (*-right), unten (*-bottom), links (*-left)). In der Regel können die vier Richtungsangaben in einer gemeinsamen Definition zusammengefasst werden, diese nennt man Kurzschreibweise (englisch: shorthand notation). Dabei werden diese Anweisungen im Uhrzeigersinn aufgelistet, beginnend mit dem Wert für oben.

Der Inhalt ist im einfachsten Falle der Text einer Seite einschließlich gegebenenfalls vorhandener Bilder und anderer eingebundener Medien. Dieser hat seinen Platz im Mittelpunkt der Box, um ihn werden die anderen Strukturen des Box-Modells "herumgebaut". Ohne weitere Angaben bestimmt sich die Breite (width) bei den meisten Elementen aus dem verfügbaren Platz, die Höhe (height) aus der vorhandenen Menge an Inhalt, der dann in den durch Höhe und Breite zur Verfügung gestellten Platz paßt.

Ausmaße einer Box

Wenn für eine Box Maßangaben für die Höhe oder Breite erfolgen, beziehen diese sich auf den Inhalt. Alle nachfolgend erläuterten Bestandteile werden erst durch das Darstellungsprogramm hinzu addiert. Eine Box als Blockelement und ohne Maßangaben gestaltet, erstreckt sich über die volle zur Verfügung stehende Breite, die Höhe jedoch richtet sich nach dem Inhalt.

Gesamtbreite = linker Rand + linker Rahmen + linkes Polster
               + Breite
               + rechter Rand + rechter Rahmen + rechtes Polster

Gesamthöhe   = oberer Rand + oberer Rahmen + oberes Polster
               + Höhe
               + unterer Rand + unterer Rahmen + unteres Polster

Höhe und Breite – width und height

Mit den Eigenschaften width und height kann Höhe und Breite eines Elementes festgelegt werden. Auf inzeilige, nicht ersetzte Elemente sind die Eigenschaften nicht anwendbar. Ein inzeiliges, ersetztes Element ist eines, wo der - gegebenenfalls leere - Inhalt durch etwas ersetzt wird, etwa durch ein Bild oder allgemeiner ein anderes Dokument - in dem Sinne ist ein inzeiliges Element auch dann ein ersetztes, wenn der Inhalt trotzdem als Alternativtext statt des ersetzenden Inhaltes verwendet wird.

Der Wert ist eine nicht negative Länge oder ein nicht negativer Prozentwert, wobei sich der Prozentwert bei width auf die Breite der Box des umgebenden Elementes bezieht, bei height auf dessen Höhe. Prozentangaben sind nur definiert, wenn die Breite beziehungsweise Höhe des Elternelementes nicht von seinem Inhalt abhängt. Dazu gibt es das Schlüsselwort 'auto', welches auch die Voreinstellung ist und wie bei allen Eigenschaften das Schlüsselwort 'inherit', wenn die Größe vom Elternelement geerbt wird. Sonst werden die Eigenschaften nicht vererbt.

Beispiel drei positionierte (siehe Abschnitt unten) Quadrate, das erste enthält die beiden anderen:

div.Q1 {
  position: relative;
  width: 10em;
  height: 10em;
  background: rgba(200,200,200,0.4)
}
div.Q2 {
  position: absolute;
  top: 2em;
  left:2em;
  width: 5em;
  height: 5em;
  background: rgba(0,0,200,0.7)
}
div.Q3 {
  position: absolute;
  top: 4em;
  left: 4em;
  width: 5em;
  height: 5em;
  background: rgba(240,60,0,0.4)
}

Minimale und maximale Höhe und Breite – min-width, max-width, min-height und max-height

Statt die Größe des Inhalt mit width und height nur exakt festzulegen, können auch Schranken angegeben werden, die festlegen, welche Größen nicht unter- oder überschritten werden dürfen.

Die Anwendbarkeit ist dieselbe wie für width und height mit Ausnahme von Tabellenelementen, wo das Verhalten undefiniert ist. Vererbt werden die Eigenschaften nicht. Werte sind ebenfalls wie bei width und height nicht negative Längen und Prozente und 'inherit'. Bei max- kommt noch 'none' hinzu für keine Einschränkung.

Für min-* ist der Initialwert 0, für max- das Schlüsselwort 'none'.

Die Eigenschaften werden berücksichtigt, indem zunächst Höhe und Breite ohne die Eigenschaften bestimmt werden. Liegen die Größen außerhalb der Schranken, wird die nächstgelegene Schranke als Größenangabe verwendet.

Beispiel mit obigen Quadraten, diesmal werden Höhe und Breite des äußersten Quadrates allerdings durch den Inhalt mitbestimmt, indem min-* und max- verwendet werden:

div.Q1 {
  min-width: 4em;
  max-width: 15em;
  max-height: 8em;
  min-height: 6em;
  background: rgba(200,200,200,0.4);
  margin-bottom: 10em
}
/* Rest siehe oben, Blöcke aber nicht positioniert, 
   dazu ein Absatz mit Text */

Das ist der Absatz mit Text, der vermutlich so lang ist, dass er durch die angegebene maximale Breite umgebrochen wird.

Innenabstand (Polster) – padding

Der Innenabstand (auch Polster) gibt den Abstand des Inhalts zum Rahmen der Box an. Der Innenabstand (padding) wird im Gegensatz zum Außenabstand (margin) durch die Hintergrundfarbe beeinflusst. Es besteht die Möglichkeit einen allgemeinen Abstand zu definieren (padding), oder jede beliebige Seite einzeln (padding-top, padding-right, padding-bottom, padding-left).

Der Wert jeder Einzelangabe ist eine nicht negative Länge oder ein nicht negativer Prozentwert. Der Wert für padding kann aus ein bis vier Werten entsprechend einer Einzelangabe bestehen, die mit Leerzeichen voneinander separiert sind. Die Eigenschaft wird nicht vererbt, der Initialwert für jede Einzelangabe ist 0. Prozentangaben beziehen sich auf die Breite des umgebenden Blockes. Prozentangaben sind somit undefiniert, wenn die Breite des umgebenden Blockes von dem Element abhängt, für welches die Angabe zu padding in Prozent angegeben ist.

Wird für padding ein Wert angegeben, gilt er für alle Seiten. Bei zwei Werten gilt der erste Wert für padding-top und padding-bottom, der zweite für die beiden anderen. Bei drei Werten gilt der erste Wert für padding-top, der zweite für padding-right und padding-left, der dritte für padding-bottom. Bei vier Werten gilt die Zuordnung in der Reihenfolge padding-top, padding-right, padding-bottom, padding-left.

Beispiel:

p {
  padding-top:     1em;
  padding-right:   2em;
  padding-bottom:  1em;
  padding-left:    2em
}
/* ist äquivalent zu */
p {
  padding: 1em 2em
}

In diesem Beispiel wird den Absätzen links und rechts ein Innenabstand von 2em sowie oben und unten jeweils 1em zugewiesen.

Rahmen – border

Der Rahmen (border) schließt direkt an den Innenabstand an. Es kann eine allgemeine oder eine für jede Seite bestimmte Rahmenformatierung definiert werden (border-top, border-right, border-bottom, border-left). Ferner können auch noch Rahmeneigenschaften getrennt angegeben werden (border-width, border-style, border-color) und jeweils noch die Eigenschaft pro Seite in der Form 'border-S-E' wobei S ersetzt wird durch 'top', 'right', 'bottom' oder 'left' und E durch 'width', 'style oder 'color', also zum Beispiel border-top-color.

Die Eigenschaften können bei allen Elementen verwendet werden und werden nicht vererbt.

Rahmenbreite – border-width

Die Eigenschaft border-width legt die Rahmenbreite fest, entsprechend border-top-width, border-right-width, border-bottom-width, border-left-width für die Einzelseiten.

Der Wert einer Einzelangabe ist entweder eine nicht negative Länge oder eines der drei folgenden Schlüsselwörter, für die lediglich eine Größenrelation festgelegt ist:

'thin' <='medium' <= 'thick'.

Bei diesen Schlüsselwörtern hängt die konkrete Breite vom Darstellungsprogramm ab, ist aber pro Schlüsselwort und Dokument einheitlich durchzuhalten. Daneben kann natürlich wie immer auch 'inherit' als Schlüsselwort verwendet werden. Der Initialwert ist 'medium', als berechneter Wert wird entweder die absolute Länge verwendet oder aber 0, falls der zugehörige border-style den Wert 'none' oder 'hidden' hat.

Für border-width selbst können wieder ein bis vier Einzelangaben notiert werden, die mit Leerzeichen separiert sind. Die Zuordnung gilt sinngemäß wie bereits für padding beschrieben.

Beispiel:

p {
border: solid black;
border-top-width: thick;
border-bottom-width: medium;
border-left-width: thin;
border-right-width: 5em
}

Beispiel mit unterschiedlichen Rahmendicken wie angegeben.

Rahmenfarbe – border-color

Die Eigenschaft border-color legt die Rahmenfarbe fest, entsprechend border-top-color, border-right-color, border-bottom-color, border-left-color für die Einzelseiten.

Der Wert einer Einzelangabe ist entweder eine Farbangabe oder eines der Schlüsselwörter 'transparent' oder 'inherit'. Bei 'transparent' ist der Rahmen zwar gegebenenfalls vorhanden (was für die Berechnung der gesamten Box relevant ist), aber nicht sichtbar. Der Initialwert ist der Wert der Eigenschaft color (in Farbmodul von CSS 3 ist dies das von SVG übernommene Schlüsselwort 'currentColor', welches es aber in CSS 2.1 und frühreren Versionen noch nicht gibt).

Für border-color selbst können wieder ein bis vier Einzelangaben notiert werden, die mit Leerzeichen separiert sind. Die Zuordnung gilt sinngemäß wie bereits für padding beschrieben.

Beispiel:

p {
border: solid 1em;
border-top-color: red;
border-bottom-color: green;
border-left-color: blue;
border-right-color: yellow
}

Beispiel mit unterschiedlichen Rahmenfarben wie angegeben.

Rahmenstil – border-style

Die Eigenschaft border-style legt den Rahmenstil fest, entsprechend border-top-style, border-right-style, border-bottom-style, border-left-style für die Einzelseiten.

Der Wert einer Einzelangabe ist eines der folgenden Schlüsselwörter:

inherit

geerbt

none

Kein Rahmen, zugehörige border-width wird gleichzeitig 0, Initialwert

hidden

Kein Rahmen wie 'none', aber bei Tabellen entfallen alle überlappenden Rahmenstücke, wenn eines davon diesen Wert hat, egal wie die Werte der anderen Rahmenstücke sind

dotted

Punktierter Rahmen

dashed

Gestrichelter Rahmen

solid

Rahmen aus durchgezogener Linie

double

Rahmen mit zwei durchgezogenen Linien; die Breiten der Linien zusammen mit dem Abstand dazwischen sind gleich der zugehörigen border-width

groove

Rahmen ist von der Farbe oder dem Kontrast her so strukturiert, dass die Illusion erzeugt wird, der Rahmen wäre in die Malebene eingelassen oder eingeritzt

ridge

Gegenteiliger Effekt von 'groove'; Rahmen ist von der Farbe oder dem Kontrast her so strukturiert, dass die Illusion erzeugt wird, der Rahmen träte aus der Malebene hervor

inset

Rahmen ist von der Farbe oder dem Kontrast her so strukturiert, dass die Illusion erzeugt wird, der Inhalt läge in einer Vertiefung

outset

Gegenteiliger Effekt von 'inset'; Rahmen ist von der Farbe oder dem Kontrast her so strukturiert, dass die Illusion erzeugt wird, der Inhalt läge auf einer Erhöhung

Die Beschreibungen sind nicht sehr detailliert, wie die Stile genau erzeugt werden sollen, bei den komplizierteren Mustern liegt es am Darstellungsprogramm, den Stil plausibel umzusetzen, der Autor der Stilvorlage hat keinen weiteren Einfluß auf die Umsetzung.

Für border-style selbst können wieder ein bis vier Einzelangaben notiert werden, die mit Leerzeichen separiert sind. Die Zuordnung gilt sinngemäß wie bereits für padding beschrieben.

Beispiele siehe folgender Abschnitt.

Kurznotation Rahmen – border

Mit der Eigenschaft border kann alles zusammengefaßt werden, oder für die Einzelseiten: border-top, border-right, border-bottom, border-left.

Als Wert wird entweder 'inherit' notiert oder eine Kombination von ein bis drei Einzelwerten in der Reihenfolge border-width, border-style, border-color.

Für weggelassene Einzelwerte wird der jeweilige Initialwert angenommen.

Beispiele

Das folgende Beispiel zeichnet eine 2 Pixel breite, durchgezogene, blaue Linie um einen Absatz:

p {
  border: 0.5ex solid blue
}

Ein Absatz mit blauem Rahmen.

Das folgende Beispiel zeichnet links und rechts eine dicke blaue und oben und unten eine dünne grüne Linie:

p {
  border-top:     2px solid green;
  border-right:   10px solid blue;
  border-bottom:  2px solid green;
  border-left:    10px solid blue
}
/* das gleiche Resultat erzielen Sie auch so: */
p {
  border-style: solid;
  border-width: 2px 10px;
  border-color: green blue
}
/* oder wie hier: */
p {
  border-style: 2px solid green;  /* gilt für alle Seiten */
  border-right-width: 10px;   /* …und wird dann lediglich für rechts */ 
  border-left-width:  10px;   /* und links überschrieben */
  border-right-color: blue;
  border-left-color:  blue
}

Ein Absatz mit buntem Rahmen.

Die verschiedenen Stile bei einer Stärke von 1em (border: 1em STIL #fc9):

solid

double

dotted

dashed

groove

ridge

inset

outset

Rahmen bei Tabellen

Bei Tabellen können die Rahmen von Zellen überlappen oder nebeneinanderliegen, daher kann das Verhalten festgelegt werden.

Dies gilt nur für Boxen, welche als Tabelle definiert sind (display: table; oder display: inline-table;).

Zusammenfallende Rahmen – border-collapse

Wenn zwei Tabellenzellen aneinandergrenzen, kann festgelegt werden, ob sie unabhängig bleiben oder die Rahmen ineinander kollabieren sollen.

Der Wert der Eigenschaft border-collapse ist eines der Schlüsselwörter 'collapse', 'separate' oder 'inherit'. Die Eigenschaft wird vererbt. Bei 'collapse' fallen benachbarte Rahmen zusammen, 'kollabieren'. Bei 'separate' liegen sie nebeneinander und bleiben beide erhalten. Der Initialwert ist 'separate'.

Beispiel:

table {
  border:           1px solid black;
  border-collapse:  collapse
}

Haben im Falle von 'collapse' zwei benachbarte Zellen Angaben zum Rahmen, die miteinander in Konflikt stehen, wird nur der 'auffälligere' Rahmen angezeigt, solange keiner der beteiligten Rahmenstile 'hidden' ist.

Im Detail gelten folgende Regeln für einen Konfliktfall:

• Ist für einen Rahmen 'hidden' angegeben, wird gar kein Rahmen dargestellt
• Sonst: Rahmen mit dem Stil 'none' haben die niedrigste Priorität, hat ein anderer Rahmen einen anderen Stil, wird der dargestellt
• Sonst: Breitere Rahmen werden zugunsten benachbarter dünnerer angezeigt.
• Sonst bei gleicher Rahmenbreite gilt folgende Reihenfolge für den bevorzugt darzustellenden Rahmenstil, von höchster zu niedrigster Priorität: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', 'inset'.
• Sonst, sind nur unterschiedliche Farben angegeben, gewinnt die Angabe einer Zelle gegenüber der Angabe einer Zeile,

die gewinnt gegenüber einer Zeilengruppe, die gegenüber einer Spalte, die gegenüber einen Spaltengruppe, die gegenüber der gesamten Tabelle

• Gibt es sonst einen Konflikt zwischen zwei Elementen gleichen Typs, gewinnt, wer weiter links steht (Bei Schreibrichtung von links nach rechts, sonst rechts oben) und dann, wer weiter oben steht.

Dann gibt es für den Stil noch die Sonderregel, dass bei 'collapse' der Stil 'inset' wie 'ridge' dargestellt wird, während 'outset' im Falle 'separate' wie 'groove' dargestellt wird.

Rahmenabstand – border-spacing

Wird border-collapse als 'separate' gewählt, so kann mit border-spacing der Abstand zwischen benachbarten Rahmen angegeben werden.

Der Wert ist entweder 'inherit' oder eine nicht negative Länge optional gefolgt von einer weiteren nicht negativen Länge, die mit Leerzeichen separiert wird.

Die Eigenschaft wird vererbt und der Initialwert ist 0.

Ist eine Länge angegeben, gibt diese den horizontalen und den vertikalen Zellenabstand an. Sind zwei Werte angegeben, so gibt der erste den horizontalen und der zweite den vertikalen Abstand an.

Beispiel:

table {
  border:           1px solid black;
  border-collapse:  separate;
  border-spacing:   0.7ex 1.3ex
}

Rahmen – Ausblick CSS3-Arbeitsentwurf

Der Arbeitsentwurf für CSS3-Rahmen pendelt derzeit (Mai 2013) leider immer noch zwischen verschiedenen Stadien der Fertigstellung. Aufgrund substantieller Änderungen wird der Entwurf vermutlich in der nächsten Version wieder vom aktuellen Kandidaten zur Empfehlung auf einen Arbeitsentwurf mit Aufruf für letzte Kommentare zurückgestuft. Es handelt sich also nicht um eine Empfehlung, sollte daher noch nicht auf 'normalen' Seiten verwendet werden.

Weil es derzeit aber bereits ein Kandidat zur Empfehlung ist, können Darstellungsprogramme durchaus bereits Eigenschaften daraus ohne Präfix implementiert haben. Bei anderen können die Eigenschaften zu Testzwecken mit Präfix implementiert sein. Aufgrund der aktuellen Änderungen ist das Verhalten der Darstellungsprogramme derzeit also noch nicht als zuverlässig einzustufen und es kann mit Präfix von Version zu Version unterschiedlich sein.

Aktuell sollten Eigenschaften aus dem Modul also nur getestet werden. Das Verhalten aktueller Versionen von Darstellungsprogrammen mit Implementierung ohne Präfix ist sorgfältig zu beobachten. Bevor keine Empfehlung vorliegt, können mit jeder Version noch Änderungen des Verhaltes eintreten.

Neu ist im Arbeitsentwurf zum Beispiel die Möglichkeit von abgerundeten Ecken, für welche es hier ein Beispiel als Ausblick gibt. Abgerundete Ecken mit CSS 2.1 umzusetzen, ist deutlich trickreicher und benötigt meist zusätzliche, geeignete Graphiken, daher ist das Verlangen einiger Autoren besonders groß, diese für CSS 3 vorgeschlagene Eigenschaft zu verwenden.

Im folgenden Beispiel beginnt die Rundung 1em vor den Ecken.

p {
  border:         1px solid black;
  border-radius:  1em
}

Ein Absatz mit abgerundeten Ecken.

Ein Absatz mit abgerundeten Ecken.
Jede Ecke ein anderer Wert: border-radius: 4em 3em 2em 1em;

Ein Absatz mit abgerundeten elliptischen Ecken.
Jede Ecke ein anderer Wert: border-radius: 4em 3em 2em 1em / 1em 2em 3em 4em;

An den Beispielen ist gut zu erkennen, dass mit der Eigenschaft der abgerundete Rand in den Inhalt hineinragt. Damit das halbwegs gut aussieht, ist also mindestens der Innenabstand geeignet zu wählen. Der Inhalt wird nicht an die Kurvenform des Randes angepaßt, wie bei selbstgebastelten kurvigen Rahmen muß hier der Autor wie gehabt selbst nachbessern, um den Inhalt an die Kurvenform anzupassen.

To-Do:

Abwarten, bis die Empfehlung zu Backgrounds and Borders Module Level 3 raus ist und auf einer neuen Seite komplett beschreiben, dies hier dann übertragen und vervollständigen, den folgenden Abschnitt mit Präfixen entsorgen.

Abgerundete Ecken mit Präfix

Die Eigenschaft border-radius eignet sich jedenfalls gut, um zu üben, wie man experimentelle Implementierungen geeignet testet. Dazu erstellt sich der Tester am besten ein Test-Dokument mit geeignetem Inhalt und notiert die zu testende Eigenschaft der Einfachheit halber etwa in einem Element style im Test-Dokument. Das Testdokument sollte dann zur Dokumentation ebenfalls eine Beschreibung enthalten, was getestet wird, also welche Eigenschaft aus welchem Arbeitsentwurf. Zudem sollte angegeben sein, was das erwartete korrekte Verhalten ist und wie man es von einer fehlerhaften Implementierung unterscheiden kann.

Sofern das zu testende Darstellungsprogramm Eigenschaften wie border-radius noch nicht ohne Präfix interpretiert, kann man zum Zwecke des Testens die dafür gedachten Präfixe verwenden (siehe auch das Kapitel Syntax zu dem Thema).

Entsprechend der CSS-Empfehlung hat jedes Darstellungsprogramm für solch experimentelle Textimplementierungen ein eigenes Präfix, welches der zu testenden Eigenschaft voranzustellen ist: -moz- (Mozilla/Gecko wie etwa Firefox); -khtml- (Safari und Konqueror); -webkit- (Safari, Google Chrome, Chromium); -o- (Opera bis zur Version 9)

p {
  border: 1px solid black;
  -moz-border-radius:  1em;
  -khtml-border-radius:  1em;
  -webkit-border-radius:  1em;
  -o-border-radius:  1em;
  border-radius:  1em
}

Der hinten notierte Wert ohne Präfix sorgt dafür, dass - sofern vorhanden - die Interpretation gemäß Empfehlung umgesetzt wird, nicht die gegebenenfalls experimentellen Testvarianten, die davor notiert sind und zu anderen Darstellungen führen können. Um zu testen, ist also im Zweifelsfalle auszukommentieren, was nicht getestet werden soll. Die Programme interpretieren nur die Eigenschaften mit ihren eigenen Präfixen, daher braucht man etwa zum Test von Opera nicht die Eigenschaft für Mozilla auskommentieren, sondern sich nur entscheiden, ob man mit oder ohne Präfix testen will.

Außenabstand (Rand) – margin

Der Außenabstand (margin) gibt den Abstand zu anderen Elementen des Dokuments an. Er schließt direkt an den äußeren Bereich des Rahmens an. Dieser Bereich ist immer transparent.

Neben der zusammenfassenden Eigenschaft margin gibt es auch wieder Eigenschaften für die einzelnen Seiten: margin-top, margin-right, margin-bottom, margin-left.

Der Wert einer Einzelangabe ist eine Länge, eine Prozentangabe oder eines der Schlüsselwörter 'auto' oder 'inherit'. Prozentangaben beziehen sich auf die Breite des umgebenden Blocks.

Initialwert ist 0. Die Eigenschaft wird nicht vererbt. Vertikale Außenabstände haben keinen Effekt bei nicht ersetzten inzeiligen Elementen. Negative Außenabstände können angegeben werden, die Darstellung davon kann aber je nach Darstellungsprogramm unterschiedlichen Einschränkungen unterliegen.

Bei der zusammenfassenden Eigenschaft margin besteht der Wert aus einer Liste von ein bis vier Einzelwerten, die mit Komma separiert werden. Die Zuordnung gilt sinngemäß wie bereits für padding beschrieben.

Im folgenden Beispiel wird dem Absatz einen Außenabstand von 1em zugewiesen; außer links, dort sind es 3em:

p {
  margin:      1em;
  margin-left: 3em
}
/* ist äquivalent zu */
p {
  margin: 1em 1em 1em 3em
}

Ein Absatz mit Außenabstand wie angegeben und einem dünnen Rand, umgeben von einer Box mit Rahmen.

Zusammenfallende Außenabstände

Die Außenabstände benachbarter Boxen können unter gewissen Umständen bei der visuellen Präsentation zusammenfallen (englisch: collapsing margins). Das bedeutet, es wird nur der größere von zwei benachbarten Außenabständen bei der Präsentation berücksichtigt. Da kann unabhängig von der Verschachtelung auftreten.

Dazu gibt es einige Regeln, die Festlegen, welche Außenabstände zusammenfallen und welche nicht:

• Horizontale Außenabstände fallen nicht zusammen.
• Außenabstände des Wurzelementes eines Dokumentes fallen nicht zusammen.
• Elemente mit Freigabe (siehe Eigenschaft clear) können einen zusammenfallenden Außenabstand mit benachbarten Geschwistern haben, aber nicht mit dem unteren Außenabstand des Elternelementes.
• Elemente, die nicht im selben Textfluß stehen (siehe Eigenschaft float und Positionierung von Elementen), können keinen zusammenfallenden Außenabstand haben. Per float aus dem Textfluß genommene Elemente können auch keinen zusammenfallenden Rand mit eigenen Kindern haben.

Zusätzlich wird festgelegt, wann genau zwei Boxen benachbart sind:

• Beides sind Blockelemente oder Block-Boxen und stehen im selben Kontext (englisch: block formatting context, gemeint ist damit, dass sie hinsichtlich absoluter Postionierung oder hinsichtlich der Eigenschaft float in derselben Box stehen und die Eigenschaft overflow nicht 'visible' ist. Bei Boxen mit eigenem Kontext fällt der Außenabstand auch nicht mit ihren Kindern zusammen.
• Keine Boxen für inzeiligen Inhalt, keine Freigabe (siehe Eigenschaft clear), kein Rahmen und kein Innenabstand trennen die Boxen.
• Beide haben vertikal benachbarte Kanten in einer der folgenden Formen:
  • Oberer Außenabstand einer Box und oberer Außenabstand des ersten Kindelementes.
  • Unterer Außenabstand einer Box und oberer Außenabstand des nächsten Geschwisters.
  • Unterer Außenabstand des letzten Kindes und unterer Außenabstand seines Elternelementes, falls dessen Höhe per Wert 'auto' automatisch berechnet wird.
  • Oberer und unterer Außenabstand eines Elementes, welches keinen neuen Kontext etabliert und wo der berechnete Wert von min-height 0 ist, die berechnete Höhe 'auto' oder 0 ist oder keine Kindelemente hat.

Einfache Methoden, bei Bedarf zusammenfallende Außenabstände zu vermeiden, wäre also die Verwendung eines (unsichtbaren) Rahmens oder eines kleinen Innenabstandes.

Beispiel zweier aufeinanderfolgender Boxen, wo die Außenabstände zwischen den beiden Boxen zusammenfallen.

Oberer Absatz mit einem Außenabstand von 4em.

Unterer Absatz mit einem Außenabstand von 2em.

Beispiel jeweils mit Innenabstand und Rahmen:

Oberer Absatz mit einem Außenabstand von 4em.

Unterer Absatz mit einem Außenabstand von 2em.

Präsentationen und Anzeigebereiche

Neben dem Verständnis des Boxmodells ist es nützlich zu verstehen, wie die Struktur eines Dokumentes aussieht, welches mit einer Stilvorlage verziert werden soll. Vorrangig wird es sich dabei um ein XML-Format handeln oder um HTML.

Elemente in solchen Formaten sind ineinander verschachtelt. Daneben kann es passieren, dass insbesondere inzeilige Elemente innerhalb von Text als Inhalt eines Elementes auftreten. Während die inzeiligen Elemente direkt mit CSS ansprechbare Strukturen sind, stellt der einfache Textinhalt eines Elementes eine weitere Struktur dar, welche aber nicht gleichrangig mit einem benachbarten inzeiligen Element selektierbar ist. Während man den Elementen also eine selektierbare Box zuweisen kann, hat der Text vor oder nach solchen Elementen oder zwischen zweien einen anonymen Status, entsprechend einer anonymen Box, die nicht direkt selektierbar ist, etwa gibt es keinen Selektor für 'Text nach dem Element X'. Derartiger Text ist nur insgesamt inklusiver zugehöriger inzeiliger Elemente als Inhalt eines Elementes ansprechbar. Dabei bestimmt der Typ der nicht anonymen Box das Verhalten der anonymen Geschwister, hat man also etwa ein Blockelement zusammen mit einfachem Text als Elementinhalt (was auf eine schlechte Struktur des Dokumentes hinweist, falls der Unterschied nicht nur durch die Stilvorlage hervorgerufen wird), so werden die anonymen Boxen für den Text vor und nach dem Blockelement ebenfalls zu anonymen Blockboxen. Hat man hingegen ein inzeiliges Element neben Text, so werden die Texte vor und nach dem inzeiligen Element zu anonymen inzeiligen Boxen.

Für die Präsentation einer Box gibt es charakteristische Eigenschaften wie Größe oder Typ der Box, die Position oder Anordnung der Box im Dokument und die Beziehungen zu anderen Elementen in Dokument, als den Vorfahren, Geschwistern und Nachfahren. Wird der Inhalt eines Elementes durch eine externe Datei ersetzt (zum Beispiel beim (X)HTML-Element img), so können Eigenschaften des externen Dokumentes Einfluß auf die Präsentation haben, aber auch, welcher Bereich des zur Darstellung verfügbaren Platzes dem ersetzten Inhalt eingeräumt wird.

Einfluß auf eine visuelle Darstellung hat auch das zur Darstellung verwendete Modell für den Darstellungsbereich. Es gibt Medien mit einer Seitendarstellung wie klassische Bücher, wo also der Inhalt auf Seiten verteilt wird, die eine technisch bedingte vorgegebene Höhe und Breite haben. Ein ähnliches Modell liegt bei SVG vor, wo angegeben wird, welcher Bereich der Zeichenebene für die Präsentation relevant ist. Daneben gibt es kontinuierliche Medien, bei denen der Inhalt nicht aufgeteilt wird. Während die Breite oft, aber nicht notwendig, festgelegt ist, richtet sich die Höhe der Darstellung nach dem Inhalt. Sind die Abmessungen solcher kontinuierlich dargestellter Dokumente größer als der für die Darstellung verfügbare Platz, so bietet das Darstellungsprogramm einen interaktiven Mechanismus (etwa Rollbalken oder Gesten) an, mit welchem es möglich ist, sich verschiedene Teilbereiches des Dokumentes im Anzeigebereich anzusehen oder die Teilbereiche auch zu vergrößern oder zu verkleinern, um etwa zwischen der Darstellung des kompletten Inhaltes und lesbaren Detailausschnitten zu wechseln. Letztere Möglichkeit der interaktiven Skalierung gibt es insbesondere auch bei dem Modell von SVG, bei dem der Inhalt in der Regel weder auf Einzelseiten verteilt wird, noch die Darstellung dem verfügbaren Platz anders als durch Skalierung angepaßt werden kann.

Bei kontinuierlichen Medien ist demzufolge vom (verfügbaren) Anzeigebereich die Rede, der Bereich, wo Inhalte von Dokumenten dargestellt werden können. Bei SVG kann etwa Höhe und Breite des Dokumentes und sogar auch das Aspektverhältnis an den verfügbaren Anzeigebereich angepaßt werden. Bei der Darstellung von (X)HTML in kontinuierlichen Medien wird hingegen (ohne weitere Stilvorlagen), die verfügbare Breite für die Anzeige des Inhaltes genutzt, Texte dann automatisch umgebrochen, so dass sich die Anzahl der präsentierten Zeilen nach der Menge des Inhaltes richtet und damit auch die Höhe. Reicht der verfügbare Anzeigebereich nicht, wird ein interaktiver Mechanismus zur Verfügung gestellt, um das Dokument relativ zum Anzeigebereich zu verschieben, um auch aktuell nicht sichtbare Teile des Dokumentes zugänglich zu machen. Das Verfahren ähnelt ein wenig dem Umgang mit Schriftrollen statt Büchern, daher spricht man in dem Zusammenhang auch von einem Rollmechanismus oder Rollbalken (englisch: scroll bar).

CSS und auch SVG sprechen in dem Zusammenhang von einer gedachten Leinwand (englisch: canvas), auf welcher die Präsentation des gesamten Dokumentes erfolgt. Das Darstellungsprogramm bietet dem Nutzer dann ein Fenster oder Darstellungsfeld an (englisch: viewort oder viewbox), in welchem das gesamte Dokument oder ein Teil davon sichtbar gemacht wird.

CSS geht bei der Anordnung von Inhalten vom Begriff des beinhaltenden Blockes aus (englisch: containing block). Anordnung und Größe werden oft in Bezug auf solch einen Block bestimmt. Nachdem gemäß Boxmodell eine Box oder ein Block bestimmt wurde, stellt diese für seine Abkömmlinge, allgemeiner seinen Inhalt den beinhaltenden Block dar. Der Anzeigebereich ist entsprechend der anfängliche beinhaltende Block für das gesamte Dokument. Bei Medien mit einer Seitendarstellung ist hingegen die Seite selbst der anfängliche beinhaltende Block.

Layout-Eigenschaften

Mit Layout-Eigenschaften wird Boxen oder Blöcken zugewiesen, zu welchem Typ von Block sie gehören, wie sie positioniert sind, wie sie sich allgemein im Dokument verhalten sollen, beziehungsweise präsentiert werden sollen.

Typ und Anzeige der Box – display

Mit der Eigenschaft display wird festgelegt, welcher Typ eine Box ist, wie sie also präsentiert wird, ob etwa als eigenständiger Block oder als inzeilige Struktur im normalen Textfluß oder auch gar nicht oder als eine spezielle Form wie eine Tabelle oder eine Liste etwa.

Formate wie (X)HTML oder SVG geben vor, welcher Typ für welche Elemente in der Stilvorlage des Darstellungsprogrammes verwendet werden sollten. Bei SVG handelt es sich immer um inzeilige Elemente, bei (X)HTML ist die Zuordnung recht verschieden, je nach semantischer Bedeutung des verwendeten Elementes.

Mit CSS ist es jedoch auch für den Autor möglich, unabhängig von der semantischen Bedeutung eine Präsentation als ein anderer Typ zu erreichen. Insbesondere bei XML-Formaten, welche das Darstellungsprogramm nicht kennt, werden alle Elemente als inzeilig angenommen, weswegen es besonders wichtig für die Lesbarkeit von solchen Dokumenten ist, dass der Autor selbst eine Stilvorlage verfügbar macht, in welcher für alle Elemente mit abweichender semantischer Bedeutung ein angemessener Typ für die Präsentation notiert ist.

Mögliche Werte für display gemäß CSS 2.1 sind die Schlüsselwörter: 'inline', 'block', 'list-item', 'inline-block', 'table', 'inline-table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell', 'table-caption', 'none', 'inherit'.

CSS 2.0 und vermutlich in Zukunft auch wieder CSS 3 sehen zusätzlich das Schlüsselwort 'run-in', CSS 2.0 auch noch 'compact' und 'marker' vor. Nicht verfügbar in CSS 2.0 ist 'inline-block'.

Der Initialwert ist 'inline'. Die Eigenschaft wird nicht vererbt, ist für alle Elemente und Medien anwendbar.

Die Schlüsselwörter haben folgende Bedeutung:

inherit

geerbt

none

keine Box, keine Darstellung des Inhaltes, kein Einfluß aufs Layout

inline

wie in inzeiliges Element, also ein oder mehrere inzeilige Boxen

block

wie ein Blockelement, ein kompletter Block oder eine Hauptbox

inline-block

inzeilige Blockbox, ähnlich wie bei ersetzen Inhalt verhält sich die Box relativ zum umgebenden Inhalt wie eine inzeilige Box mit einem uniformen Inhalt wie einem Bild, nach innen verhält sich die Box wie eine Blockbox

list-item

wie ein Listenpunkt, etwa in (X)HTML das Element li, eine Hauptbox mit inzeiliger Listenbox

marker

wie eine Listenmarkierung vor oder hinter einer Box, wird verwendet mit den Pseudoelementen :before und :after, wenn diese Blockboxen zugeordnet sind

run-in, compact

abhängig vom Kontext eine Blockbox oder eine inzeilige Box, siehe folgender Text

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption

Boxen für Tabellenelemente, entsprechend den sinngemäßen Elementen in (X)HTML

Bei 'run-in' wird unterschieden, ob die folgende Box per float oder per Positionierung aus dem normalen Textfluß genommen wurde. Wenn das so ist, ist es eine normale Blockbox. Wenn nicht und eine andere Block-Box folgt, wird die 'run-in'-Box zu deren erster inzeiliger Box, sonst bleibt es eine Block-Box.

'run-in' könnte zum Beispiel verwendet werden, um eine Überschrift niedriger Ordnung (etwa das Element h6 in (X)HTML) in die erste Zeile des folgenden Absatzes zu setzen.

Bei 'compact' ist das Verhalten ähnlich. Wird die folgende Box per float oder per Positionierung aus dem normalen Textfluß genommen, so ist es eine normale Blockbox. Wenn nicht und eine andere Block-Box folgt, wird die 'compact'-Box zu einer inzeiligen Box, sonst bleibt es eine Block-Box. Die 'compact'-Box kann nur einzeilig sein, enthält also keine Zeilenumbrüche, sonst wird sie wie eine Block-Box behandelt. Die Breite der 'compact'-Box wird mit der Breite des Außenabstandes (margin) der folgenden Block-Box verglichen, ob linker oder rechter Rand hängt dabei von der Schreibrichtung ab, in Schreibrichtung die vordere Seite. Ist die Breite der 'compact'-Box größer als die Breite des relevanten margin der Block-Box, wird die 'compact'-Box als normale Block-Box behandelt. Andernfalls wird die 'compact'-Box auf Höhe der ersten Zeile der Block-Box im margin angeordnet, die Höhe der 'compact'-Box beinflußt dann auch die Höhe der ersten Zeile. Mit der Eigenschaft vertical-align kann wie bei inzeiligen Boxen die vertikale Position in der Zeile bestimmt werden.

'compact' kann etwa gut verwendet werden, um bei einer (X)HTML-Definitionsliste den zu definierenden Begriff (Element dt) neben der Definition (Element dd) in einer Zeile anzuordnen. Dafür eignet sich allerdings auch 'run-in', wenn man vermeiden möchte, dass der Außenrand Einfluß darauf hat, ob die Darstellung kompakt in einer Zeile ist oder nicht.

Der Wert 'none' hat offensichtlich das Potential, eine Barriere hinsichtlich der Zugänglichkeit von Inhalten zu erzeugen. Verwenden Autoren diesen Wert, müssen sie folglich sicherstellen, dass bei aktivierter Interpretation von CSS alle Inhalte zugänglich bleiben, beziehungsweise bei deaktivierter Interpretation von CSS nicht vorhandene, verwirrende oder unsinnige Strukturen dargestellt werden. Da insbesondere auch gerne mit der Pseudoklasse :hover Inhalte wieder sichtbar gemacht werden, die mit dem Wert 'none' zuvor statisch als nicht darzustellen gekennzeichnet wurden, ist natürlich ebenfalls sicherzustellen, dass die so behandelten Inhalte auch zugänglich sind, wenn im Darstellungsprogramm der Zustand :hover nicht oder nicht zuverlässig lange umsetzbar ist.

Beim Wert 'none' ist somit immer zu bedenken, dass dies gegebenenfalls relevanten Inhalt für den Nutzer unzugänglich macht, wenn das Darstellungsprogramm CSS interpretiert, während der Inhalt zugänglich ist, wenn die Interpretation von CSS deaktiviert ist. Relevante Inhalte sollen natürlich nicht unzugänglich gemacht werden, von daher ist die Verwendung immer kritisch zu sehen.

Da display auch für alle Medien anwendbar ist, reicht es somit nicht, dass man bei einigen Medien und Darstellungsprogrammen etwa mit den Pseudoklassen :hover oder :focus die Inhalte wieder interaktiv anzeigen lassen kann, denn diese Pseudoklassen sind nicht bei allem Medien und Darstellungsprogrammen verfügbar. Die Struktur des Dokumentes und die Stilvorlage müssen also so umgesetzt sein, dass bei jedem Medium und insbesondere auch ohne Zeigergerät ein Zugang zum Inhalt gewährleistet ist. Ähnliches gilt auch beim der Manipulation der Stilvorlage per Skript (ecma-script, java-script) über das Dokument-Objekt-Modell (DOM) - hier kann es etwa sinnvoll sein, etwas beim Start des Dokumentes per Manipulation des DOM nicht anzeigen zu lassen und es dann interaktiv wieder erscheinen zu lassen. Falsch wäre es hier offenbar, 'display: none' in die normale Stilvorlage zu schreiben, um das interaktive Sichtbarmachen einem Skript zu überlassen, denn dadurch würder der Inhalt für jene unzugänglich, bei denen Skript nicht interpretiert werden. Das richtige Vorgehen kann hier etwa sein, den Inhalt per normaler Stilvorlage anzeigen zu lassen, es dann per Skript verschwinden zu lassen und bei Bedarf dann wieder interaktiv sichtbar zu machen.

Es kann andererseits natürlich auch sein, dass Teile des Inhaltes bei bestimmten Medien nicht relevant sind, so könnte man etwa zum Drucken die Projektnavigation verschwinden lassen, so dass nur der Inhalt gedruckt wird.

Beispiel für display:

a.menuepunkt {
  display:  block;
  width: 10em;
  padding: 1ex;
  border: thin solid blue;
  margin: 1em
}

Das Element a hat als inzeiliges Element in (X)HTML per Stilvorlage des Darstellungsprogrammes eine inzeilige Box, dies kann in der Autoren-Stilvorlage im Bedarfsfalle überschrieben werden, so dass wie hier die Präsentation eines Blockelementes vorliegt. So werden dann auch Angaben zur Breite oder zum Außenabstand wirksam.

Das a der Klasse 'menuepunkt' wird somit als eigenständige Blockbox präsentiert. In dem Menü werden dann also die einzelnen Menüpunkte untereinander dargestellt, auch wenn es einfach einzelne, aufeinanderfolgende Elemente a sind, die also nicht in einer Liste stehen. Möchte man einerseits das Verhalten einer Blockbox für die inneren Eigenschaften beibehalten, die inzeilige Anordnung aber beibehalten, so würde man in CSS 2.1 eher folgendes formulieren:

a.menuepunkt {
  display:  inline-block;
  width: 10em;
  padding: 1ex;
  border: thin solid blue;
  margin: 1em
}

Sofern in der Breite genug Platz vorhanden ist, werden so die Blöcke nebeneinander angeordnet, gegebenenfalls wird automatisch in mehrere Zeilen umgebrochen. Ähnlich kann man vorgehen, wenn man die Verweise, was meist semantisch sinnvoller ist, in einer Liste angeordnet hat. Wendet man nun 'inline-block' auf die Listenpunkte an, so kann man aus der sonst vertikalen Anordnung der Listenpunkte auch einfach eine horizontale Anordnung mit automatischem Umbruch machen.

Sichtbarkeit – visibility

Während display darüber entscheidet, ob etwas überhaupt dargestellt wird oder im Falle des Wertes 'none' eben gar nicht mehr bei der Präsentation des Dokumentes berücksichtigt wird, gibt es mit der Eigenschaft visibility auch die Möglichkeit, nur über die Sichtbarkeit Angaben zu machen. Statt eines unsichtbar gemachten Inhaltes bleibt dann also einfach eine Lücke in der Darstellung an jener Stelle, wo der Inhalt nach wie vor ist. Ähnlich wie bei komplett transparenten Teilen eines Dokumentes trägt der Inhalt also nach wie vor zur Präsentation bei, wenn er unsichtbar ist.

Die Eigenschaft findet Anwendung bei visuellen Medien. Sie wird vererbt.

Folgende Schlüsselwörter können als Werte verwendet werden:

inherit

geerbt

visible

sichtbar, Initialwert

hidden

versteckt, nicht sichtbar

collapse

wie hidden, aber bestimmten Werten von display gibt es besondere Regeln, siehe Text

Sinngemäß, wie bereits für display: none' erläutert, gilt es auch, für visibility: hidden' und 'visibility: collapse' darauf zu achten, dass nicht für einige Nutzergruppen Zugänglichkeitsprobleme auftreten. Auch bei Manipulationen über das DOM oder bei der Verwendung von Pseudoklassen ist darauf zu achten, dass relevante Inhalte für alle Nutzer zugänglich bleiben.

Die Sonderrolle des Wertes 'collapse' tritt in Kombination mit bestimmten Tabellen-Werten der Eigenschaft display auf, wenn es sich bei den betroffenen Elementen oder Boxen und Zeilen, Spalten oder Zeilengruppen oder Zeilenspalten handelt. Bei dem Wert wird die gesamte Zeile, Spalte oder Gruppe entfernt, so dass Platz für anderen Inhalt frei wird. Überspannt eine Zelle einen Bereich mehrerer Zeilen oder Spalten, so ist es möglich, daß nur Teile davon durch die Eigenschaft unsichtbar werden, es wird also entsprechend abgeschnitten.

Beispiel eines unsichtbaren Block;, Elemente div dieser Klasse 'leer' könnten also generell keinen Inhalt haben:

div.leer {
 width: 10em; 
 height: 10em; 
 background: yellow;
 border: thin solid black; 
 margin:1em; 
 visibility: hidden}

Auch der CSS-Rahmen oder -Hintergrund werden dann nicht angezeigt:

Überlauf regeln – overflow

Bei visuellen Medien kann es passieren, dass mehr Inhalt vorhanden ist als in eine Box paßt, deren Größe festgelegt ist, so kann mit der Eigenschaft overflow angegeben werden, was mit dem restlichen, nicht in die Box passenden Inhalt passieren soll.

Prinzipiell gibt es die Möglichkeit, dass der Inhalt übersteht oder abgeschnitten wird oder aber Rollbalken verwendet werden, um die Darstellung so zu verschieben, dass ansonsten nicht angezeigter Inhalt sichtbar wird.

Folgende Schlüsselwörter können als Werte verwendet werden:

inherit

geerbt

visible

Der Inhalt steht über, wird also außerhalb der Box dargestellt

hidden

Überstehender Inhalt wird abgeschnitten, also nicht angezeigt und wird somit unzugänglich

scroll

Es werden immer Rollbalken angezeigt, gegebenenfalls wird im so erzeugten Anzeigebereich für das Element nur jeweils ein Teil des Inhaltes angezeigt. Mit den Rollbalken kann der Nutzer selbst einstellen, welcher Bereich sichtbar ist; durch diese Interaktion bleibt also der gesamte Inhalt zugänglich. Da bei Druckausgaben keine Rollbalken verfügbar sind, wird wie bei 'visible' der gesamte Inhalt ausgegeben.

auto

Rollbalken werden nur verfügbar gemacht, wenn der vorhandene Platz für den Inhalt nicht ausreicht. Da die Rollbalken selbst Platz benötigen, kann es in einigen besonderen Fällen zu mehrfachem Umspringen der Anzeige zwischen mit und ohne Rollbalken kommen.

Der Initialwert ist 'visible'. Eine Sonderregel gibt es für das Wurzelelement eines Dokumentes, aufgrund der besonderen Struktur bei (X)HTML ebenfalls beim Element body: 'visible' wird dort als 'auto' interpretiert, um zu gewährleisten, dass der Inhalt per Initialwert immer komplett zugänglich ist.

Die Eigenschaft wird nicht vererbt und ist auf Blockelemente in visuellen Medien anwendbar.

Da SVG nur Rollbalken für das gesamte Dokument vorsieht, haben die Werte dort eine spezielle Bedeutung, welche sich zumeist darauf reduziert, dass der überstehende Inhalt entweder sichtbar bleibt oder abgeschnitten wird.

Beispiele (gemeinsame Eigenschaften):

p {
width: 15em; 
height: 20em; 
padding: 1ex; 
margin: 1ex; 
border: thin solid black
}

Darstellung eines Absatzes mit 'overflow: visible' (unten drunter wurde hier ein größerer Außenabstand verwendet, ansonsten würde der überstehende Text in den darunter angeordneten Inhalt ragen und faktisch beides unlesbar machen):

Ein Absatz repräsentiert einen abgeschlossenen Gedankengang. Für einen weiteren Gedankengang sollte ein weiterer Absatz verwendet werden. Es handelt sich bei der Formulierung eines Absatz auch um einen Ideenentitätenschöpfungskreativvorgang. Ein Absatz enthält oft mehrere Sätze oder Ideen-Fragmente. Durch die Gruppierung in einem Absatz korreliert der Autor somit die Sätze oder Ideen-Fragmente zu einem neuen Sinnzusammenhang, zu einer neuen Idee, welche über jene der einzelnen Sätze oder Ideen-Fragmente hinausgeht und somit eine neue Entität im Konzept des Autors darstellt.

Dieser Absatz mit 'overflow: scroll':

Ein Absatz repräsentiert einen abgeschlossenen Gedankengang. Für einen weiteren Gedankengang sollte ein weiterer Absatz verwendet werden. Es handelt sich bei der Formulierung eines Absatz auch um einen Ideenentitätenschöpfungskreativvorgang. Ein Absatz enthält oft mehrere Sätze oder Ideen-Fragmente. Durch die Gruppierung in einem Absatz korreliert der Autor somit die Sätze oder Ideen-Fragmente zu einem neuen Sinnzusammenhang, zu einer neuen Idee, welche über jene der einzelnen Sätze oder Ideen-Fragmente hinausgeht und somit eine neue Entität im Konzept des Autors darstellt.

Da bei 'overflow: auto' bei diesem Beispiel vermutlich die gleiche Anzeige einträte, wird in folgendem Absatz der Satz mit dem lächerlich langen Wort einfach weggelassen:

Ein Absatz repräsentiert einen abgeschlossenen Gedankengang. Für einen weiteren Gedankengang sollte ein weiterer Absatz verwendet werden. Ein Absatz enthält oft mehrere Sätze oder Ideen-Fragmente. Durch die Gruppierung in einem Absatz korreliert der Autor somit die Sätze oder Ideen-Fragmente zu einem neuen Sinnzusammenhang, zu einer neuen Idee, welche über jene der einzelnen Sätze oder Ideen-Fragmente hinausgeht und somit eine neue Entität im Konzept des Autors darstellt.

Bei der Verwendung von 'overflow: hidden' kommt es dann wie erwartet zu Zugänglichkeitsproblemen:

Ein Absatz repräsentiert einen abgeschlossenen Gedankengang. Für einen weiteren Gedankengang sollte ein weiterer Absatz verwendet werden. Es handelt sich bei der Formulierung eines Absatz auch um einen Ideenentitätenschöpfungskreativvorgang. Ein Absatz enthält oft mehrere Sätze oder Ideen-Fragmente. Durch die Gruppierung in einem Absatz korreliert der Autor somit die Sätze oder Ideen-Fragmente zu einem neuen Sinnzusammenhang, zu einer neuen Idee, welche über jene der einzelnen Sätze oder Ideen-Fragmente hinausgeht und somit eine neue Entität im Konzept des Autors darstellt.

Positionierung – position

Mit der Eigenschaft position können Elemente aus dem normalen Textfluß genommen werden, um sie zu positionieren. Der normale Textfluß in (X)HTML ist erstmal ein linearer, was bedeutet, dass die Elemente nacheinander, wie sie im Quelltext stehen, präsentiert werden. Durch Positionierung ist es bei visuellen Medien auch möglich, die Reihenfolge zu ändern oder auch Strukturen nicht linear nacheinander, sondern etwa teilweise nebeneinander anzuordnen. Der Leser muß dann auswählen, welchen Inhalt er zuerst lesen möchte.

Für den Autor ergibt sich damit das Problem oder die Herausforderung, zu vermeiden, dass positionierte Elemente mit Inhalten im normalen Textfluß überlappen und somit Teile des Inhaltes unlesbar werden. Ferner können positionierte Elemente auch aus dem Anzeigebereich herausragen, somit gegebenenfalls für den Leser unzugänglich werden, weswegen sich der Autor darum mit weiteren Eigenschaften bemühen muß, etwa bei kontinuierlichen Medien im Bedarfsfalle Rollbalken einzusetzen, um die Zugänglichkeit des Inhaltes zu gewährleisten. Während also im normalen Textfluß weitgehend automatisch gewährleistet ist, dass Inhalte für den Leser auch zugänglich sind, übernimmt der Autor für diesen Sachverhalt die komplette Verantwortung, sobald Elemente positioniert werden. Da der Autor nicht die Kontrolle über die Größe des Anzeigebereiches und die verwendete Schriftgröße hat, kann das Problem sehr komplex werden, wenn viele Elemente positioniert werden. Es ist dann eher sinnvoll, nur sehr wenige Elemente zu positionieren, die die anderen Elemente dann enthalten, welche dort einem normalen Textfluß innerhalb des positionierten Elementes folgen.

Die Eigenschaft position wirkt auf alle Elemente bei visuellen Medien und wird nicht vererbt. Die Eigenschaft hat folgende Werte:

inherit

geerbt

static

Es handelt sich um eine normale Box im normalen Textfluß, die nicht positioniert ist. Dies ist der Initialwert

relative

Die Box wird im normalen Textfluß in ihrer normalen Größe berücksichtigt, aber gegebenenfalls versetzt angezeigt. Sie wird mit den Eigenschaften left, right, top, bottom versetzt. Auch wenn die Box nicht versetzt ist, wird sie als positioniert angenommen. Der normale Textfluß nach einer solchen Box wird so fortgesetzt, als sei die Box nicht versetzt worden.

absolute

Die Box wird aus dem normalen Textfluß genommen, in welchem sie nicht mehr berücksichtigt wird. Sie wird mit den Eigenschaften left, right, top, bottom unabhängig davon positioniert. Sofern ein Vorfahre ebenfalls positioniert ist, beziehen sich die Angaben auf die Position des nächsten positionierten Vorfahren, sonst auf das Wurzelelement. Wird dieses bei kontinuierlichen Medien gerollt, so rollt auch eine absolut positionierte Box mit.

fixed

Die Box wird aus dem normalen Textfluß genommen, in welchem sie nicht mehr berücksichtigt wird. Sie wird mit den Eigenschaften left, right, top, bottom unabhängig davon positioniert. Die Positionierung bezieht sich auf den Anzeigebereich. So fixierte Boxen rollen also bei kontinuierlichen Medien nicht mit, im Bedarfsfalle muß für die Kindelemente ein eigener Rollmechanismus realisiert werden (Eigenschaft overflow und Festlegung von Höhe oder Breite.

Versatz – left, right, top, bottom

Mit den Eigenschaften können positionierte Boxen versetzt werden, beziehungsweise deren Position kann festgelegt werden.

Der Wert ist entweder eines der Schlüsselwörter 'inherit' oder 'auto' oder eine Länge oder ein Prozentwert. Prozentwerte beziehen sich auf die Breite des Blockes, in welchem die Box steht (für left und right) oder auf die Höhe (für top und bottom). Der Initialwert ist 'auto'. Die Eigenschaften werden nicht vererbt und sind anwendbar auf visuelle Medien.

Die Eigenschaften haben einen Effekt, wenn position nicht den Wert 'static' hat.

left bezieht sich auf die Position der linken Seite, right auf die rechte. top bezieht sich auf die Position der oberen Seite, bottom auf die untere.

Bei position 'relative' geben die Eigenschaften also den Versatz zur Position im normalen Textfluß an, bei 'absolute' den Versatz relativ zum positionierten Vorfahren oder dem Wurzelelement, bei 'fixed' relativ zum Anzeigebereich.

Beispiele

Beliebt ist es etwa, das Navigationsmenü links oder rechts neben dem eigentlichen Inhalt zu positionieren. Dazu muß im normalen Textfluß Platz geschaffen werden, was auf verschiedene Weise geschehen kann. Am einfachsten ist bei (X)HTML die Verwendung von margin beim Element body. Nehmen wird dazu an, die Navigation stehe in einem Element mit dem Fragmentidentifizierer 'menue' und dessen Inhalt komme mit einer Breite von 12em aus:

body {margin-left: 13em}
#menue {
position: absolute;
top: 0.5em;
left: 0.5em;
width: 12em
}

Sinngemäß kann das Menü auch rechts angeordnet werden, bei der üblichen Schreibrichtung von links nach rechts ist dabei allerdings darauf zu achten, dass weder Text noch Bilder überstehen, weil sie sonst unter das Menü geraten können.

body {margin-right: 13em}
#menue {
position: absolute;
top: 0.5em;
right: 0.5em;
width: 12em
}

Nun kann auch alles positioniert werden und im Bedarfsfalle mit Rollbalken versehen. Dazu kann man den Inhalt etwa in einem anderen Element anordnen, hier mit dem Fragmentidentifizierer 'inhalt', wobei 'inhalt' und 'menue' so im Quelltext stehen, dass das eine kein Vorfahre des anderen ist, beide etwa einzige Kindelemente von body:

body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
#inhalt {
position: absolute;
top: 0.5em;
left: 13em;
right: 0.5em;
bottom: 0.5em;
overflow: auto;
}
#menue {
position: absolute;
top: 0.5em;
left: 0.5em;
bottom: 0.5em;
width: 12em;
overflow: auto;
}

Die Rollbalken sollten so im Bedarfsfalle für beide Inhaltsteile unabhängig voneinander erscheinen.

Ähnlich kann mit position 'fixed' vorgegangen werden, etwa so:

body {margin-left: 13em}
#menue {
position: fixed;
top: 0.5em;
left: 0.5em;
bottom: 0.5em;
width: 12em;
overflow: auto;
}

Etwas Ähnliches kann sich auch anbieten, um zum Beispiel zwei Versionen eines Textes miteinander zu vergleichen oder Kommentare zu einem Text neben diesem anzuordnen, damit der Leser Textpassagen nebeneinander frei rollen kann. Gegeben seien dazu Fragmente 'version1' und 'version2' mit den jeweiligen zu vergleichenden Inhalten:

#version1 {
position: absolute;
top: 0.5em;
left: 0em;
width: 50%;
height: 40em;
overflow: auto;
}
#version2 {
position: absolute;
top: 0.5em;
right: 0em;
width: 50%;
height: 40em;
overflow: auto;
}

Beliebt ist es auch, Teile des Inhaltes als Zusatzinformation dynamisch einzublenden. Diese will man dann gerne etwas versetzt zur Basisinformation angeben. Liegt etwa die Information in Elementen der Klasse 'info' vor und darin befindet sich als Kindelement jeweils ein Element der Klasse 'zusatz' mit der Zusatzinformation, so kann dies sinngemäß so umgesetzt werden:

.info
{
position: relative;
}
body:hover .info .zusatz
{
display: none
}
.info:hover .zusatz
{
position: absolute;
top: 2em;
left: 5em;
display: block;
width: 12em;
height: 12em;
overflow: auto
}

Enthält 'zusatz' etwa bei einem Navigationsmenü weitere interaktive Inhalte wie Verweise, so ist darauf zu achten, dass 'info' und 'zusatz' räumlich überlappen, sonst verschwindet 'zusatz' wieder, bevor das Zeigergerät von 'info' nach 'zusatz' gelangen kann. Ist kein Zeigergerät vorhanden oder nicht über dem Dokument, wird die Zusatzinformation im normalen Fluß angezeigt. Leider gibt es keine spezifische Abfrage in CSS, um spezielle Stilvorlagen für Leser mit Zeigergerät und ohne Zeigergerät getrennt anzubieten, daher kann es hier sinnvoll sein, ähnlich wie im Beispiel zu sehen zu improvisieren.

Einige alte Programme können zudem Probleme mit position 'relative' haben, wenn kein Versatz angegeben ist. Will man diese berücksichtigen, kann man etwa einen Versatz um einen Pixel angeben und diesen dann bei den Kindelementen wieder rückgängig machen oder vernachlässigen.

Beispiel vier positionierte Quadrate, das erste enthält die anderen:

div.Q1 {
  position: relative;
  left: 3em;
  width: 10em;
  height: 10em;
  background: rgba(200,200,200,0.4)
}
div.Q2 {
  position: absolute;
  top: 2em;
  left:2em;
  width: 5em;
  height: 5em;
  background: rgba(0,0,200,0.7)
}
div.Q3 {
  position: absolute;
  top: 4em;
  left: 4em;
  width: 5em;
  height: 5em;
  background: rgba(240,60,0,0.4)
}
div.Q4 {
  position: fixed;
  bottom: 4em;
  left: 2em;
  width: 5em;
  height: 5em;
  background: rgba(255,255,0,0.5)
}

In diesem Falle wird das die beiden anderen umschließende Quadrat relativ positioniert, es wird um 3em nach rechts versetzt. Die darin befindlichen Elemente werden absolut positioniert. Die zugehörigen Positionsangaben beziehen sich auf das umschließende Element, weil dies ebenfalls positioniert ist. Aufgrund der fixierten Positionierung für das vierte Quadrat findet sich dieses im Anzeigebereich links unten und verdeckt da gegebenenfalls andere Inhalte der Seite, die aufgrund der gewählten Teiltransparenz noch erkennbar sein mögen, dann aber nicht mehr gegebenenfalls anklickbar oder markierbar sind, sofern sie komplett unter dem Element liegen. Sollte dieses gelbe Quadrat im umschließenden grauen dargestellt werden, interpretiert das verwendete Darstellungsprogramm offenbar den Wert 'fixed' nicht.

Textumfluss – float und clear

Eine weitere Möglichkeit, ein Element aus dem normalen Textfluß zu nehmen, besteht in der Verwendung der Eigenschaft float. Anders als bei position wird das Element allerdings nicht direkt anderweitig positioniert, sondern nur nach links oder rechts an den Rand gesetzt, wonach es dann vom folgenden Inhalt umflossen wird. Mit der Eigenschaft clear kann dann für ein folgendes Element festgelegt werden, ob dieses Verhalten des Umfließens aufgehoben wird oder nicht. Sofern aufgehoben, wird dieser Inhalt dann unter dem zu umfließenden Element angeordnet. Dies trifft auch zu, wenn der Platz nicht ausreicht, um beide Inhalte nebeneinander anzuordnen.

Wird ein Element mittels float aus dem normalen Textfluß genommen, muß es auch immer eine definierte Breite haben, etwa festgelegt über die Eigenschaft width oder etwa bei ersetzten Elementen wie Bildern durch die intrinsische Breite.

Das mittels float nach links oder rechts verschobene Element wird zu einer Block-Box. Die Verschiebung erfolgt bis zum Rand der umgebenden Box. In vertikaler Richtung ändert sich die Anordnung nicht, das verschobene Element beginnt oben also in der aktuellen Zeile, in der es begonnen hätte, wenn es nicht verschoben worden wäre - beziehungsweise, sofern es keine aktuelle Zeile gibt, so ist das untere Ende der vorherigen Block-Box der Beginn der verschobenen Box. Somit kann also allenfalls folgender Inhalt die verschobene Box umfließen, nicht vorheriger Inhalt. Ist allerdings Inhalt in derselben Zeile in der verschobenen Box, auch davor, so wird dieser ebenfalls als umfließender Inhalt neben der verschobenen Box angeordnet.

Nicht positionierte Block-Boxen verhalten sich so, als sei das verschobene Element nicht vorhanden, nur ihr inzeiliger Inhalt umfließt gegebenenfalls die verschobene Box.

Es können auch mehrere aufeinanderfolgende Elemente verschoben werden. Solange genug Platz vorhanden ist, werden diese dann nebeneinander angeordnet, das frühere dann näher zum angegebenen Rand. Reicht der Platz nicht mehr aus, wird eine neue Zeile begonnen. Sind insbesondere mehrere aufeinander folgende verschobene Elemente unterschiedlich hoch, so wird die Box in der neuen Zeile neben der letzten der vorherigen angeordnet, die genug Platz neben sich läßt.

Der Außenabstand verschobener Boxen kollabiert nicht mit dem benachbarter Boxen.

float wird nicht vererbt, ist anwendbar aus visuelle Medien und dort auch nicht positionierte Elemente und kann folgende Werte haben:

inherit

geerbt

none

Die Box wird nicht verschoben, Initialwert

left

Die Box wird nach links verschoben, folgender Inhalt fließt rechts vorbei

right

Die Box wird nach rechts verschoben, folgender Inhalt fließt links vorbei

Sofern display nicht 'none' ist, wird diese Eigenschaft ignoriert, falls der Wert von float entweder 'left' oder 'right' ist (oder sich dieser Wert natürlich aus 'inherit' ergibt).

Mit der Eigenschaft clear kann festgelegt werden, wie Block-Boxen auf zu umfließende Elemente reagieren sollen. Die Eigenschaft clear wird nicht vererbt, ist anwendbar auf visuelle Medien und dort auch Block-Elemente. Sie kann folgende Werte haben:

inherit

geerbt

none

Keine Einschränkung des Umfließens

left

Die Box wird unter jenen Boxen angeordnet, für welche float 'left' gilt, für 'right' gelten keine Einschränkungen

right

Die Box wird unter jenen Boxen angeordnet, für welche float 'right' gilt, für 'left' gelten keine Einschränkungen

both

Die Box wird unter jenen Boxen angeordnet, die umflossen werden sollen

Als Beispiel sei ein Text gegeben, in welchem Bilder (Element img) stehen. Die Bilder gehören entweder zur Klasse 'gerade' oder 'ungerade' oder 'neu':

img.gerade {
float: left;
clear: left
}
img.ungerade {
float: right;
clear: right
}
img.neu {
clear: both
}

Gerade Bilder werden also nach links verschoben, allerdings nicht neben schon vorhandene Bilder der Klasse 'gerade'. Ungerade Bilder werden entsprechend nach rechts verschoben, allerdings nicht neben schon vorhandene Bilder der Klasse 'ungerade'. Bilder der Klasse 'neu' werden nie neben Bildern der Klasse 'gerade' oder 'ungerade' angezeigt. Es ist hierbei darauf zu achten, dass die verwendete Bilder eine intrinsische Breite haben, was etwa bei Pixelgraphik immer der Fall ist. Je nach den Angaben im Dokument können SVG-Dokumente eine Breite wie 100% aufweisen, das wäre zwar auch eine intrinsische Breite, schließt aber praktisch aus, dass daneben noch Inhalt angeordnet werden kann - ähnliches gilt für CSS-Boxen mit ähnlichen Angaben. Bei Textinhalten ist in der Regel eine Breite explizit anzugeben.

Zum Beispiel kann auch ein Navigationsmenü so neben dem Inhalt angeordnet werden. Dazu muß das Menü allerdings vor dem sonstigen Inhalt stehen, der es umfließen soll - was meist bei einer Projektnavigation über mehrere Dokumente inhaltlich nicht sinnvoll ist. Enthält das Menü allerdings nur Verweise auf Fragmente im selben Dokument, um dem Leser einen schnelleren Zugriff zu erlauben, ist die Anordnung weit vorne im Quelltext natürlich sehr hilfreich. Dann kommt die Verwendung von float in Betracht, sonst wird man eher die Positionierung vorziehen.

Sei das Menü also vor einigem weiteren Inhalt angeordnet und habe den Fragmentidentifizierer 'menu', es komme mit einer Breite von 12em aus, so kann man zum Beispiel notieren:

#menu {
float: right;
clear: right;
width: 12em;
padding: 1em;
margin: 1em;
border: thin solid #008;
color: #00a;
}

Betrachten wir noch kurz die Anwendung bei inzeiligen Erläuterungen:

.infoA {
float: left;
clear: left;
border: thin solid green;
max-width: 10em;
padding: 1ex;
margin: 1ex
}
.infoB {
float: right;
clear: right;
border: thin solid green;
max-width: 10em;
padding: 1ex;
margin: 1ex
}

Manchmal möchte man im laufenden Text Erläuterungen unterbringen und dafür nicht das Attribut title verwenden. Der Wert von title wird oft beim Drüberfahren mit einem Zeigergerät dynamisch eingeblendet. Etwa kann das Bedürfnis bestehen, die Zusatzinformation auch ohne Interaktivität ständig verfügbar zu halten oder diese zusätzlich zu strukturieren oder darin Bestandteile zu betonen oder hervorzuheben, wozu man zusätzliche inzeilige Elemente benötigt, was bei der Verwendung des Attributes title ausgeschlossen ist. Stattdessen könnte man etwa die zusätzliche Erläuterung umfließen lassen. Das Umfließen der Zusatzfinformation wird mit der Eigenschaft float erreicht, angewendet zum Beispiel auf ein Element span. Das ist insofern nützlich, als der Nutzer nicht erst herausfinden muß, ob Information vorhanden ist und wie er Zugang zu ihr bekommt. Ohne Interpretation von CSS wird die Zusatzinformation in normalen Textfluß präsentiert, bei Interpretation von CSS geeignet hervorgehoben, womit sich je nach Einsatz eine bessere Ergonomie ergeben kann - kundige Leser überspringen die Zusatzinformation, andere können sich gezielt darauf einlassen. Die Zusatzinformation sollte dann nur so formuliert sein, dass sie sowohl in den normalen Textfluß paßt als auch separiert als Einzelinformation einen Sinn ergibt, auch weil bei der Präsentation vom Nutzer nicht mehr eindeutig zuzuordnen ist, wo die Zusatzinformation exakt im Textfluß angeordnet ist.

Stapelung – z-index

Bedingt durch Positionierung und allgemeiner die Herausnahme von Elementen aus dem normalen Textfluß kann es bei visuellen Medien zu Überlappungen von Inhalten kommen.

Mit der Eigenschaft z-index kann für positionierte Elemente angegeben werden, welcher Inhalt über welchem dargestellt wird, wenn Inhalte überlappen. 'Über' ist hier in dem Sinne gemeint, dass man sich eine Achse in Richtung vom Bildschirm zum Betrachter vorstellt. 'Über' oder weiter vorne oder oben ist auf dieser Achse näher zum Betrachter hin gemeint, also jedenfalls besser sichtbar und weniger verdeckt als Inhalte dahinter.

So ergeben sich also Stapel von Inhalten von vorne nach hinten. Das Wurzelelement etabliert einen solchen Stapel-Kontext, der Wurzelstapel-Kontext, auf dem alle anderen aufbauen. Jede Box gehört zu einem Stapel-Kontext und hat darin ein bestimmtes Niveau relativ zu anderen Boxen im selben Stapel-Kontext. Boxen mit größeren Niveau liegen jeweils vor solchen mit kleinerem Niveau. Negative Niveaus sind ebenfalls möglich. Boxen mit gleichen Niveau werden nach der Reihenfolge im Quelltext angeordnet, die spätere also weiter oben.

Erzeugt eine Box einen neuen Stapel-Kontext, so ergeben sich daraus zwei Niveaus, ein Wert 0 für den Kontext, den es erzeugt und ein Wert per z-index für den Kontext, zu dem es gehört. Sofern z-index nicht angegeben ist, hat ein Element dasselbe Niveau wie das Elternelement.

Bei SVG gilt ansonsten ein anderes Modell, wobei dort praktisch von allen dargestellten Elementen die Position im Dokument anzugeben ist. Hier gilt, was weiter hinten im Quelltext steht, ist weiter oben in der Darstellung. Bis einschließlich Version 1.2 gibt es keine Eigenschaft wie z-index, mit welcher dies beeinflußt werden kann. Bei anderen Formaten, wo CSS anwendbar ist, kann mit z-index hingegen die Reihenfolge von positionierten Elementen beeinflußt werden.

Der Wert von z-index ist entweder eine ganze Zahl oder eines der Schlüsselwörter 'auto' oder 'inherit'. Vererbt wird die Eigenschaft nicht, der Initialwert ist 'auto'.

Der Wert von z-index legt also das Niveau im aktuellen Stapel-Kontext fest. Und der Wert legt fest, ob ein eigener Stapel-Kontext erzeugt wird.

Mittels einer ganzen Zahl wird das Niveau im aktuellen Stapel-Kontext festgelegt und ein eigener Stapel-Kontext erzeugt, worin das Niveau '0' ist.

Beim Wert 'auto' ist das Niveau im aktuellen Stapel-Kontext dasselbe wie beim Elternelement. Ein eigener Stapel-Kontext wird nicht erzeugt.

Zum Beispiel soll ein Element mit Fragmentidentifizierer 'Navigation' beim Drüberfahren mit dem Zeigergerät von hinten nach vorne geholt werden, wobei davon ausgegangen wird, dass keine Box ein höheres Niveau als '100' hat und kein niedrigeres als '-100'. Daneben sollte irgendwo, in diesem Falle etwa rechts oben kein anderer Inhalt einen Teil des Elementes überlappen, damit das Drüberfahren mit dem Zeigergerät eindeutig ist.

#Navigation {
position: absolute;
top: 0;
right: 0;
background: white;
color: black;
width: 12em;
height: 10em;
overflow: auto;
z-index: -100
}
#Navigation:hover {
z-index: 100
}

Als weiteres Beispiel seien wieder positionierte Quadrate betrachtet. Per z-index wird hier die Reihenfolge geändert. Die Quadrate stehen in der angegebene Reihenfolge im Quelltext, sortiert von heller vorne nach dunkler hinten. Die Reihenfolge wird allerdings per z-index umgedreht, die hellen werden also oben, weiter im Vordergrund präsentiert und verdecken teiltransparent die hinteren. Rechts daneben gibt es eine ähnliche Gruppe, aber ohne Angabe von z-index, also mit der Reihenfolge wie im Quelltext.

div#Q0 {
  position: relative;
  width: 30em;
  height: 10em;
  border: thin solid black;
  background: #008
}
div#Q1 {
  position: absolute;
  top: 1em;
  left:1em;
  width: 5em;
  height: 5em;
  background: rgba(250,250,250,0.7);
  z-index: 10
}
div#Q2 {
  position: absolute;
  top: 2em;
  left: 2em;
  width: 5em;
  height: 5em;
  background: rgba(200,200,200,0.7);
  z-index: 8
}
div#Q3 {
  position: absolute;
  top: 3em;
  left: 3em;
  width: 5em;
  height: 5em;
  background: rgba(150,150,150,0.7);
  z-index: 6
}
div#Q4 {
  position: absolute;
  top: 4em;
  left: 4em;
  width: 5em;
  height: 5em;
  background: rgba(100,100,100,0.7);
  z-index: 4
}

Zuschneiden von Boxen – clip

Mit der Eigenschaft clip kann bei Block-Boxen und ersetzten Elementen wie Bildern der Rand beschnitten werden. Dies bedeutet, es kann ein Bereich der Box angegeben werden, welcher sichtbar dargestellt wird, der Rest nimmt beim CSS für Formate wie (X)HTML Platz ein, ist aber nicht sichtbar. Die Eigenschaft ist auch bei SVG anwendbar, aufgrund des anderen Darstellungsmodelles ist dort aber nur relevant, dass nur ein Teil des Elementes sichtbar dargestellt wird. Mittels clipPath bietet SVG allerdings einen wesentlich allgemeineren Ansatz, um Teile eines Elementes nicht sichtbar darzustellen oder auch mittels mask teilweise nur teiltransparent darzustellen. Aufgrund von Problemen in den CSS-Spezifikationen bei der Definition von clip und den deutlich flexibleren und vielseitigen Möglichkeiten sind diese Methoden in SVG also der Eigenschaft clip vorzuziehen.

Die Eigenschaft ist anwendbar für visuelle Medien und wird nicht vererbt. Ferner muß die Eigenschaft overflow einen anderen Wert als 'visible' haben, damit clip anwendbar ist. Mögliche Werte sind:

inherit

geerbt

auto

Größe und Positionierung des Zuschneidebereiches ist dieselbe wie die Box, abgeschnitten wird also, was übersteht, das ist der Initialwert

Form-Wert

Es wird eine Form parametrisiert, welche den Zuschneidebereich angibt, siehe weiterer Text

Hinsichtlich der Notation und Interpretation des Form-Wertes gibt es in CSS2.0 und CSS2.1 leider unterschiedliche, sich widersprechende Angaben. Da Autoren bei CSS-Stilvorlagen selbst nicht angeben können, welcher Version sie folgen, ist der Form-Wert formal undefiniert. SVG 1.0 und 1.1 legen allerdings explizit fest, dass für SVG die Notation und Interpretation nach CSS2.0 gilt. Da auf die Definition in CSS2.0 allerdings ein falsches Beispiel folgt und sich auch einige Programme trotzdem nach CSS2.1 richten oder die Implementierung von der Empfehlung sonstwie abweicht, ist dies in der Praxis auch kein Verhalten, auf welches man sich verlassen kann. Daher sollte der Form-Wert in der Praxis vermieden werden.

Gemäß CSS2.0 sieht der Form-Wert wie folgt aus, wobei ? jeweils eine Länge oder das Schlüsselwort 'auto' repräsentiert:
rect (? ? ? ?)
Das Ergebnis des Zuschneidens ist ein rechteckiger Ausschnitt. Die Reihenfolge von links nach rechts der vier Werte entspricht dem Abstand von oben, rechts, unten, links von der Kante der Block-Box oder des ersetzten Elementes. 'auto' bedeutet dabei, dass der Rand mit der der Box übereinstimmt. 'auto' entspricht dabei dem Zahlenwert 0. Zahlenwerte geben jeweils den Versatz zu jeweiligen Kante der Box an, wobei positive Abstände nach innen zeigen, also den dargestellten Bereich verkleinern und negative nach außen zeigen, den dargestellten Bereich also vergrößern.

Haben Elternelemente ebenfalls einen solchen Zuschnitt, so gilt für das Kindelement die Schnittmenge als dargestellter Bereich.

Die Definition in CSS2.1 weicht davon in folgenen Punkten ab:
Der Form-Wert sieht wie folgt aus:
rect (?, ?, ?, ?)
Autoren sollen zur Separation jeweils ein Komma verwenden, Darstellungsprogramme müssen aber eine Notation ohne Komma in gleicher Weise interpretieren. Eine Mischung, einmal mit Komma, einmal nur mit Leerzeichen ist in jedem Falle nicht zulässig.
Anders als bei CSS2.0 repräsentieren hier die Zahlenwerte einen Versatz des dargestellten Bereiches von der oberen linken Ecke der Block-Box, beziehungsweise des ersetzten Elementes. Der erste Wert gibt also den Versatz der oberen Kante des darzustellenden Bereiches von der oberen Kante der Box an, der zweite Wert den Versatz der rechten Kante des darzustellenden Bereiches von der linken Kante der Box, der dritte Wert den Versatz der unteren Kante des darzustellenden Bereiches von der oberen Kante der Box an, der vierte Wert den Versatz der linken Kante des darzustellenden Bereiches von der linken Kante der Box. Für den ersten und vierten Wert bedeutet 'auto' dasselbe wie 0, für den zweiten und dritten Wert entspricht das der rechten, beziehungsweise unteren Kante der Box - bei 'auto' ergibt sich also formal, trotz anderer Bedeutung der Werte der gleiche Effekt wie für CSS2.0, sonst stimmt das Ergebnis in der Regel nicht überein.

Wird die Eigenschaft zum Beispiel auf eine Klasse von Bildern angewendet, die verschiedene Größen haben, fällt es mit der Definition von CSS2.0 leicht, bei allen einen gleichgroßen Randbereich abzuschneiden. Bei der Definition nach CSS2.1 fällt es hingegen leicht, bei allen einen gleichgroßen Ausschnitt relativ zur linken oberen Ecke sichtbar zu machen.

Aufgrund der Widersprüche von CSS2.1 gegenüber CSS2.0 wird hier auf ein Beispiel verzichtet. Im Kapitel 'Praxis' finden sich weitere Erläuterungen und auch Alternativen.

Abgrenzung – outline

Statt einem Rahmen oder einen Abstand zu verwenden, um ein Element vom umgebenden Inhalt abzugrenzen, können auch die Eigenschaften outline* verwendet werden.

Anders als bei border* trägt outline nicht zur Berechnung der Größe oder Position bei und wird immer über den Inhalt gelegt. Ferner resultiert outline nicht zwangsläufig in der Darstellung eines Rechtecks. Die Eigenschaft eignet sich also insbesondere in der Anfangsphase bei der Erstellung des Layouts, wenn man kontrollieren möchte, welche Dimensionen Elemente haben und welche Position sie gerade haben. Die sichtbare Abgrenzung eignet sich dann gut, um das Verhalten einer Box abzuschätzen, ohne das Verhalten dadurch signifikant zu beeinflussen, wie dies etwa beim testweisen Einsatz von border der Fall wäre.

Ähnlich wie bei border gibt es wieder verschiedene Eigenschaften, um das Erscheinungsbild der Abgrenzung zu beeinflussen und eine Eigenschaft outline, die all dies zusammenfaßt. Anders als bei border umgibt outline als Abgrenzung immer das gesamte Element, man kann also nicht angeben, dass man nur eine Abgrenzung nach links, rechts, oben oder unten haben möchte.

Die Eigenschaften sind allesamt anwendbar auf alle Elemente bei visuellen und interaktiven Medien. Die Eigenschaften werden nicht vererbt.

Abgrenzungsbreite – outline-width

Der Wert zur Angabe der Breite entspricht der von border-width und ist dort bereits erläutert. Initialwert ist auch hier 'medium'.

Abgrenzungsstil – outline-style

Der Wert zur Angabe des Stils entspricht dem von border-style und ist dort bereits erläutert. Der Initialwert ist auch hier 'none'.

Abgrenzungsfarbe – outline-color

Der Wert der Angabe der Farbe der Abgrenzung ist entweder eine Farbe oder eines der Schlüsselwörter 'invert' oder 'inherit'. Der Initialwert ist 'invert'.

Bei 'invert' wird eine Inversion der Pixel auf dem Bildschirm vorgenommen, also es wird etwa bei einem weißen Hintergrund eine schwarze Abgrenzung gewählt und umgedreht, jedenfalls so, dass die Abgrenzung sich deutlich von den drunterliegenden Farben unterscheidet. Sollte ein Darstellungsprogramm über keinen Algorithmus verfügen, um die Invertierung zu realisieren, soll es den Wert von color verwenden, ähnlich wie bei der Rahmenfarbe.

Kurzform für Abgrenzung – outline

Mit outline werden die Einzeleigenschaften zusammengefaßt. Als Wert wird entweder 'inherit' notiert oder eine Kombination von ein bis drei Einzelwerten outline-color, outline-style, outline-width.

Beispiele Abgrenzung

p {outline: red dotted thin}

Dies ist ein Absatz mit einem Beispieltext darin,
wobei ein Wort mit größerer Schrift und Zeilenumbrüche vorhanden sind, um das Verhalten der Abgrenzung besser sichtbar zu machen.
Sowohl bei dem Wort mit größerer Schrift als auch beim Tiefer- und Höherstellen wird sichtbar, dass die Abgrenzung nicht immer ein Rechteck sein muß: ₁₂₄E⁴⁵⁶in sehr sehr fragwürdiger Inhalt, der vermutlich über mehrere Zeilen geht.

p {
 padding: 1ex; 
 margin: 1ex; 
 border: blue solid 1ex; 
 outline: red dashed 1ex}

Dies ist ein Absatz mit blauem Rahmen und roter Abgrenzung. Damit kann man sehen, wo die Abgrenzung relativ zum Rahmen angeordnet ist. Ein Elternelement hat zudem eine schwarze Abgrenzung und einen Innenabstand von 1ex.

Ein dunkelgrünes div enthalte einen Absatz, um zu gucken, wie sich der Wert 'invert' auswirkt, das könnte etwa einen rosa Farbton ergeben, was sowohl einen hohen Farbkontrast als auch Helligkeitskontrast darstellt:

div{
background: #060;
padding: 2em
}
p {
 padding: 1ex; 
 margin: 1ex;  
 outline: invert dashed 1ex}

Absatz mit etwas Text und invertiertem outline.

Übersicht aller Schriftformatierungen

Eigenschaft	Kurzbeschreibung	Mögliche Werte	Verwendung, Beispiel, Kommentar
font-family	Einstellung der Schriftart	Liste mit Namen von Schriftarten	Als Wert wird eine Liste mit Namen der Schriftarten verwendet. Es können mehrere Schriftarten (durch Kommata abgetrennt) angegeben werden, da ja nicht jeder alle möglichen Schriftarten auf dem Rechner hat. Treten im Namen Leerzeichen auf, ist der Name in Anführungszeichen zu setzen. Als letzter Listenpunkt sollte eine generische Schriftfamilie wie etwa "sans-serif" oder "serif" angegeben werden (das sind vordefinierte Schlüsselwörter, die nie in Anführungszeichen zu setzen sind), weil Darstellungsprogramme für jede generische Schriftfamilie eine geeignete Schriftart bereitstellen muß, also immer auch garantiert eine Schriftart überhaupt die Darstellung des Textes gewährleistet. Beispiel: font-family:'Times New Roman',serif => Anwendungsbeispiel
font-size	Einstellung der Schriftgröße	Länge, Prozentwert oder eines der Schlüsselwörter xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, inherit	Bei den Schlüsselwörtern richtet sich die Größe der Schrift nach der im Darstellungsprogramm angegebenen Größe - sofern der Nutzer das selbst für sich optimal eingestellt hat, ergibt sich für 'medium' so optimale Lesbarkeit. Das Darstellungsprogramm verändert bei den anderen Schlüsselwörtern die Größe entsprechend der Bezeichnung (zum Beispiel "smaller"=kleiner als die bisherige aktuelle Schriftgröße) beziehungsweise sucht die für den jeweiligen Begriff vorgesehenen Einstellungen heraus. Beispiele: font-size:larger oder font-size:2em oder font-size:150% => Anwendungsbeispiel oder Anwendungsbeispiel oder Anwendungsbeispiel
font-weight	Einstellung des "Schriftgewichtes"	normal, bold (=fett), bolder (=fetter), lighter (=dünner); 100 - 900 (verschiedene Abstufungen in Hunderter-Schritten; 700 = bold)	"Schriftgewicht" entspricht einfach nur der Fette des Textes, das heißt, ob der Text fett geschrieben ist oder nicht. Dabei gilt es zu beachten, dass nicht bei allen Schriftarten alle Gewichte verfügbar sind, es wird dann das nächstliegende verfügbare verwendet; verschiedene Angaben können also gleich dargestellt werden. Beispiel: font-weight:bold => Anwendungsbeispiel
font-style	Einstellung des Schriftstils	normal, italic, oblique	italic repräsentiert eine kursive Darstellung der Schrift und oblique eine schräggestellte. Das Schrägstellen der Glyphen kann leichter durch Scherung automatisch simuliert werden, während eine echte kursive oder auch oblique Schrift spezielle Repräsentationen der Glyphen erfordert. Sofern diese nicht vorhanden ist, wird oft auch für italic eine automatisch gescherte Variante verwendet. Beispiel: font-style:oblique => Anwendungsbeispiel
font-variant	Einstellungen der Schriftvariante	normal, small-caps (=Kapitälchen; kleine Großbuchstaben)	Bsp.: font-variant:small-caps => Anwendungsbeispiel
font-stretch (nicht in CSS2.1)	Ausdehnung eines Textes; Schriftlaufweite	normal, wider (=weiter), narrower (=enger), condensed (=gedrängt), semi-condensed (=halb-gedrängt), extra-condensed (=stark gedrängt), ultra-condensed (=sehr stark gedrängt), expanded (=geweitet), semi-expanded (=halb-geweitet), extra-expanded (=stark geweitet), ultra-expanded (sehr stark geweitet)	Beispiele: font-stretch:extra-expanded oder font-stretch:condensed => Anwendungsbeispiel oder => Anwendungsbeispiel Wegen mangelnder Interpretation in den Darstellungsprogrammen wird die Eigenschaft einstweilen in CSS2.1 nicht aufgeführt.
font-size-adjust (nicht in CSS2.1)	Korrektur der Schriftgröße bei Verwendung mehrerer Schriftgrößen	der Wert ist eine Zahl oder das Schlüsselwort 'none'	Die Zahl gibt das Verhältnis zweier charakteristischer Schriftgrößen an, 1 entspricht also der vom Autor gewählten Referenzschrift. Sind in dieser einige Glyphen nicht verfügbar, wird in der Liste der font-family auf die nächste Schriftart zurückgegriffen. Glyphen dieser zweiten Schriftart können bei gleicher Schriftgröße bei gleicher Angabe der Schriftgröße eine andere Anmutung oder Lesbarkeit haben. Mittel font-size-adjust kann dann ein Korrekturfaktor angegeben werden, damit dies ausgeglichen wird. Charakteristischer Vergleichwert ist dabei zum Beispiel das Verhältnis von 1em zu 1ex bei den jeweiligen Schriftarten. Der Korrekturfaktor ist folglich ein Wert größer als 0, der typisch zwischen 0.5 und 2 liegt. Werte kleiner als 1 verkleinern die Schriftgröße, Werte größer als 1 vergrößern sie. Beispiel unter der Annahme, dass bei der ersten Schriftart einige Glyphen fehlen: <span style="font-family:Cracked, fantasy; font-size-adjust: 1.25">Ein Bëïspïël ℵ ℜ ℑ ℘</span> => Ein Bëïspïël ℵ ℜ ℑ ℘ Wegen mangelnder Interpretation in den Darstellungsprogrammen wird die Eigenschaft einstweilen in CSS2.1 nicht aufgeführt.
font	Zusammenfassung der font-Eigenschaften	Kurzform der einzelnen Eigenschaften	Hier werden Eigenschaften zu einer Kurzform zusammengefaßt. Die Reihenfolge ist vorgegeben, allerdings sind viele Angaben optional, können also weggelassen werden. Zunächst können Werte für font-style, font-variant, font-weight notiert werden, alle optional und egal in welcher Reihenfolge. Dann folgt font-size, optional gefolgt von einer Kombination von einem Schrägstrich '/' mit folgendem line-height, gefolgt von font-family (line-height wird im Abschnitt über Textformatierungen erläutert und gibt die Zeilenhöhe an, sinnvoller Weise immer größer gleich 1em). Alternativ kann auch ein Schlüsselwort angegeben werden, welches einen bestimmten Satz von Werten repräsentiert: 'caption', 'icon', 'menu', 'message-box', 'small-caption', 'status-bar'. Diese Sätze sind im Darstellungsprogramm oder in der verwendeten graphischen Oberflächen definiert. Beispiele: font:bold italic small-caps 1.4em/2em serif => Anwendungsbeispiel; font:message-box => Anwendungsbeispiel

Auswahl der Schriftart - font-family

Mit Hilfe der Eigenschaft font-family läßt sich angeben, welche Schriftart zur Präsentation in visuellen Medien gewünscht ist.

Der Wert von font-family ist eine Liste von Namen von Schriftarten oder Schlüsselwörtern für generische Schriftfamilien oder das Schlüsselwort 'inherit'. Die einzelnen Listenpunkte sind mit Komma voneinander zu separieren, optionale, zusätzliche Leerzeichen sind auch erlaubt. Namen können oder müssen je nach den verwendeten Zeichen in Anführungszeichen gesetzt werden, wobei einfache (') und doppelte (") Anführungszeichen zulässig sind. Schlüsselwörter dürfen nicht in Anführungszeichen gesetzt sein. Zulässig für Namen, die nicht in Anführungszeichen gesetzt werden müssen, sind solche, die aus Buchstaben oder Ziffern bestehen [a-zA-Z0-9] , zusätzlich den Zeichen '-' und '_' und Zeichen ab dem Zeichen U+00A0. Sie dürfen aber nicht mit einer Zahl beginnen oder einem '-' gefolgt von einer Zahl oder mit zwei '-'. Insbesondere sind also zum Beispiel Namen, die Leerzeichen enthalten, immer in Anführungszeichen zu setzen. Ist der Name einer Schriftart gleich einem der vordefinierten Schlüsselwörter, ist der Namen ebenfalls immer in Anführungszeichen zu setzen.

Die Eigenschaft ist anwendbar auf alle Elemente und wird auch vererbt. Darstellungsprogramme für visuelle Medien müssen immer mindestens eine Schriftart verfügbar haben, der Initialwert ist dann der Name einer verfügbaren Schriftart und ist damit vom Darstellungsprogramm abhängig.

Die Liste wird vom Darstellungsprogramm durchgegangen, im Zweifelsfalle für jeden einzelnen, darzustellenden Glyphen, ob eine Schriftart mit dem Namen verfügbar ist. Ist das der Fall, wird diese verwendet, sonst wird mit dem nächsten Namen weitergesucht. Ist die Liste durchgearbeitet und keine Schriftart gefunden, die zu den angegebenen Namen paßt, so ist die zu verwendende Schriftart undefiniert und es liegt am Darstellungsprogramm, ob eine andere Schriftart zu Präsentation verwendet wird oder die Glyphen gar nicht oder mit Platzhaltern präsentiert werden. Fortgeschrittene Programme können nach erfolglosem Durchgehen der Liste auch ihnen bekannte Namen in der Liste identifizieren und stattdessen eine ähnliche, verfügbare Schriftart auswählen. Das Zeichen für einen nicht verfügbaren Glyphen ist zumeist ebenfalls in einer Schriftart definiert, also auch von der verwendeten abhängig.

Schlüsselwörter für generische Schriftfamilien

Schriftartfamilien werden in fünf Kategorien eingeteilt, den sogenannten generischen Schriftfamilien, welche durch Schlüsselwörter angegeben werden können.

• serif haben Serifen und sind proportional. Bei proportionalen Schriftarten haben die Buchstaben unterschiedliche Breiten. So ist ein "m" breiter als ein "i". Serifen sind weitere Verzierungen der Schriftarten. Beispielschriftarten: Times, Garamond
• sans-serif haben keine Serifen sind aber ebenfalls proportionale Schriftarten. Beispielschriftarten: Arial, Geneva, Helvetica, Tahoma, Verdana
• monospace können Serifen aufweisen, sind aber keine proportionalen Schriftarten. Das heißt, jeder Buchstabe nimmt den gleichen Platz ein wie ein anderer. Auch als Schreibmaschinenschrift bekannt. Beispielschriftarten: Courier, Lucida Console
• cursive sind Schriftarten, die Handschriften ähneln. Beispielschriftarten: Comic Sans, Lucida Handwriting
• fantasy sind Schriftarten, die in keines der anderen vier Muster passen.

Darstellungsprogramme für visuelle Medien müssen für jedes Schlüsselwort eine Schriftart verfügbar haben (wobei nicht ausgeschlossen ist, dass etwa per Voreinstellung des Nutzers) immer dieselbe Schriftart verwendet wird oder auch eine mit anderen als den angegebenen Charakteristika. Jedenfalls ist sichergestellt, dass ein Text überhaupt irgendwie dargestellt wird, wenn die Werte-Liste von font-family mit einer generischen Schriftfamilie endet.

Namen und Schriftarten

In CSS werden sogenannte Schriftartfamilien verwendet. Diese Schriftartfamilien können jeweils aus diversen einzelnen Schriftarten bestehen, unten denen mit weiteren Eigenschaften ausgewählt werden kann.

So hat zum Beispiel die Schriftartfamilie Arial die Schriftarten: Arial Bold, Arial Italic oder Arial Bold Italic.

Namen einiger häufig verwendeter Schriftartfamilien sind:

• Times
• Arial
• Helvetica
• Verdana
• Courier
• Comic

Beispiele für Familien mit einer freien Lizenz, die also prinzipiell überall verfügbar gemacht werden können, aber trotzdem nicht notwendig überall installiert sind:

• Bitstream Vera
• DejaVu
• Ubuntu

weitere sind zum Beispiel Linux Libertine, Linux Biolinum, Gentium, Avocado, Liberation, Junicode, Cardo, Computer Modern.

Schriftarten mit freier Lizenz (GNU):

• Nimbus Roman No9 L
• Nimbus Sans L

Ein Darstellungsprogramm kann für seine eigene Stilvorlage gezielt Schriftarten auswählen, die verfügbar sind. Auch ein Nutzer kann dies für seine Stilvorlage tun. Der Autor eines Dokumentes hat allerdings kaum Kontrolle darüber, welche Schriftarten beim Nutzer verfügbar sind. Die Dateien mit den Schriftarten unterliegen dem Urheberrecht, was zur Folge hat, dass nicht bei jedem Nutzer jede Schriftart verfügbar ist, weil nicht jeder eine Lizenz hat, die Schriftart zu verwenden. Um keine Lizenzgebühren an andere zahlen zu müssen, haben Konzerne wie Microsoft oft Schriftarten entwickelt, die ähnlich aussehen, wie die Schriftarten, die von anderen unter einer Lizenz stehen und nutzen sie mit einer eigenen Lizenz, was dann zur Folge hat, dass Kunden von Microsoft diese Schriftarten verfügbar haben, nicht aber zwangsläufig andere, die keine passende Lizenz haben. Daneben können die Schriftarten auch in verschiedenen Formaten vorliegen und aus ähnlichen Lizenzgründen kann es Darstellungsprogrammen nicht möglich oder erlaubt sein, bestimmte Formate für Schriftartendateien zu dekodieren, was dann zur Folge hat, dass auch deswegen Schriftarten nicht verfügbar sind.

Von daher ist es immer wichtig, als letzte Option eine generische Schriftfamilie anzugeben und sich nicht darauf zu verlassen, dass für die ansonsten angegebenen Namen von Schriftarten auch exakt jeweils die gewünschte Schriftart verfügbar ist.

Beispiele zu font-family

Gemeinhin gelten Schriften ohne Serifen als gut lesbar auf Monitoren oder allgemeiner Geräten mit geringerer Auflösung, während Schriften mit Serifen gut geeignet sind für gedruckte Texte und hohe Auflösung. Ein guter Ansatz für eine Ausgabe einfach auf dem Bildschirm ist also:

body {
font-family: sans-serif
}

oder für die Druckausgabe entsprechend:

body {
font-family: serif
}

Werden in einer Liste dann Namen von bestimmten Schriftarten angegeben, ist es zumeist sinnvoll, dass sie wenigstens der gleichen generischen Schriftfamilie angehören, also etwa:

div.menu {
font-family: 'Bitstream Vera Sans', 
             'DejaVu Sans', 
             Helvetica, 
             Arial, 
             sans-serif 
}

oder

div.menu {
font-family: 'Bitstream Vera Serif', 
             'DejaVu Serif', 
             'Times New Roman', 
             Times, 
             Garamond, 
             serif 
}

Regel @font-face

Die Regel beschreibt die Eigenschaften einer Schriftfamilie und stellt insbesondere eine Möglichkeit bereit, Schriftartendateien zu referenzieren.

Die allgemeine Syntax der Regel sieht wie folgt aus: Sie beginnt mit der Zeichenfolge '@font-face {' und endet mit dem Zeichen '}' In dem mit geschweiften Klammern gekennzeichnete Block können die Bezeichner notiert werden, die im folgenden erläutert werden.

Minimales Beispiel zur Referenzierung genau einer Schriftart ohne weitere Angaben:

@font-face {  
        /* der Schriftart einen Namen geben: */
        font-family: "Meiner"; 
        /* Schriftartendatei referenzieren und Format angaben: */
        src: url("fonts/meiner.svg#F") format(svg)
}

Entsprechend wird dann bei der Eigenschaft font-family der Wert des Bezeichners font-family verwendet, um die Schriftart zu nutzen:

body {font-family: 'Meiner', sans-serif}

Anmerkung: Aus verschiedenen Gründen ist es dringend zu empfehlen, nur lokale Quellen mit relativen URIs als Schriftartendateien zu verwenden. Bei externen Dateien hat der Autor etwa keinerlei Kontrolle über Änderungen. Die Verwendung einer relativen URI schützt ferner die Privatsphäre der Nutzer der Seite. Schriftartendateien unterliegen auch oft speziellen Lizenzen, welche die Nutzung einschränken können. Es ist also immer sicherzustellen, dass im jeweiligen Zusammenhang die Verwendung auch erlaubt ist.

Bezeichner von @font-face

Die für @font-face verfügbaren Bezeichner lehnen sich teilweise an gleichnamige Eigenschaften an, erlauben aber auch darüberhinaus eine Einordnung. Die Bezeichnier sind: font-family, font-style, font-weight,font-variant, font-stretch, font-size, unicode-range, units-per-em, src, panose-1, stemv, stemh, slope, cap-height, x-height, accent-height, ascent, descent, widths, bbox, definition-src, baseline, centerline, mathline, topline.

Die Bedeutungen sind die gleichen wie bei den entsprechenden Eigenschaften, mit denen eine Schriftart ausgewählt wird. Nur dass bei dieser Regel nicht ausgewählt wird, sondern die im Element definierten Glyphen einer bestimmten Schriftart mit entsprechenden Eigenschaften zugeordnet werden und dann wiederum als solche für Textelemente ausgewählt werden kann.

font-family

Angabe der Schriftfamilie.
Wert entsprechend der gleichnamigen Eigenschaft. Sind mehrere Schriftfamilien angegeben, treffen alle auf die Glyphen zu.

font-style

Angabe des Stiles.
Mögliche Werte sind entweder 'all' als Voreinstellung für alle oder eine Liste mit den möglichen Werten 'normal', 'italic', 'oblique'. Was angegeben ist, trifft jeweils auf den definierten Zeichensatz zu.

font-variant

Angabe der Variante.
Möglicher Wert ist eine Liste mit den möglichen Werten 'normal', der Voreinstellung und 'small-caps'.

font-weight

Angabe des Gewichtes.
Möglicher Wert ist entweder 'all', die Voreinstellung für alle Gewichte, oder eine Liste von Gewichten mit den möglichen Werten 'normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'.

font-stretch

Angabe der Dehnung.
Möglicher Wert ist entweder 'all' oder eine Liste von Dehnungen mit den möglichen Werten 'normal', 'ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded'. Voreinstellung ist 'normal'.

font-size

Angabe der Schriftgröße.
Möglicher Wert ist entweder 'all' oder eine Liste von absoluten Längen.

unicode-range

Angabe des abgedeckten Unicode-Bereiches. Damit wird vermeiden, dass der Zeichensatz überhaupt geladen wird, wenn nur Zeichen außerhalb des angegebenen Bereiches benötigt werden. Der Wert ist eine Liste von Unicode-Bereichen. Voreinstellung ist 'U+0-7FFFFFFF' (Typisch wird der selbst definierte Zeichensatz nicht all diese Zeichen enthalten, daher ist zu empfehlen, den zutreffenden Bereich korrekt anzugeben).

Ein Bereich wird in der hexadezimalen Schreibweise notiert, für ein Zeichen etwa U+215A Dabei gibt es wiederum verschiedene Möglichkeiten. Zum einen kann ein '?' als Platzhalter für die letzte Ziffer verwendet werden, also zum Beispiel U+215?, das deckt dann alle Zeichen von U+2150 bis U+215F ab. Auch zwei Fragezeichen sind erlaubt, also zum Beispiel U+00?? geht dann von U+0000 bis U+00FF (Latin-1). Größere Bereiche können mit zwei Nummern verbunden mit einem Bindestrich notiert werden, Beispiel: U+15C00-15FFF entspricht dem Bereich U+15C00 bis U+15FFF (aztekisch).

units-per-em

Angabe, wievielen Einheiten in lokalen Koordinaten die Einheit em entspricht.
Der Wert ist eine Zahl. Die Angabe ist bei Verwendung vieler anderer Attribute erforderlich, damit diese einen Sinn ergeben.

src

Der Bezeichner ist erforderlich und ermöglicht es, eine Schriftartendatei zu referenzieren. Der Wert ist eine Liste mit Kommata als Separatoren. Listenpunkte sind Referenzen zu Schriftartendateien oder alternativ der Name einer Schriftart (wie bei der Eigenschaft font-family mit gleicher Funktion, eine Schriftart zu referenzieren, die beim Nutzer gegebenenfalls bereits installiert ist). Referenziert wird durch die Angabe einer URI/IRI der Schriftartendatei in der üblichen Notation für URI/IRI. Optional kann darauf ein Hinweis auf das verwendete Format notiert werden.

Der Hinweis beginnt mit der Zeichenkette 'format(' und endet mit ')'. Dazwischen steht eine Liste mit Kommata als Separatoren. Ein Listenpunkt ist jeweils eine Zeichenkette, die für ein bestimmtes Format steht. Bekannt sind zum Beispiel folgende Zeichenketten:

svg

SVG-Zeichensatz, typische Dateiendungen: .svg, .svgz

type-1

PostScript Type 1, typische Dateiendungen: .pfb, .pfa

truetype

TrueType, typische Dateiendung: .ttf

truetype-gx

TrueType mit GX-Erweiterungen, typische Dateiendung: .ttf

truetype-aat

TrueType mit vorgeschrittenen Erweiterungen, typische Dateiendung: .ttf

opentype

OpenType, typische Dateiendungen: .ttf, .otf

embedded-opentype

Embedded OpenType, typische Dateiendung: .eot

truedoc-pfr

TrueDoc Portable Font Resource, typische Dateiendung: pfr

speedo

Speedo

intellifont

Intellifont

panose-1

Angabe der PANOSE-Nummern.
Dabei handelt es sich um Klassifikationsnummern für 'TrueType', insgesamt 10 Zahlen, welche die Schlüsseleigenschaften einer lateinischen Schrift festlegt. Der Wert besteht auch zehn ganzen Zahlen, jeweils durch Leerzeichen getrennt. Die Voreinstellung sind zehn Nullen, was bedeutet, dass jeder Zeichensatz zu der Nummernkombination passt.

stemv

Angabe der vertikalen Stengelbreite (englisch: stem).
Gemeint ist damit eine typische Breite einer vertikalen Struktur bei den Glyphen, zum Beispiel die Breite des vertikalen Stiches von 'L', 'I', 'd', 'p' etc.

Wenn dies Attribut verwendet wird, muss auch units-per-em' verwendet werden.

Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.

stemh

Angabe der horizontale Stengelbreite (englisch: stem).
Gemeint ist damit eine typische Breite einer horizontalen Struktur bei den Glyphen, zum Beispiel die Breite von Serifen oder des horizontalen Stiches von 'H', 'L', '-', 'z', 't' etc.

Wenn dies Attribut verwendet wird, muss auch units-per-em' verwendet werden.

Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.

slope

Angabe des Winkels von vertikalen Strukturen.
Sind vertikale Strukturen in einem Zeichensatz nicht exakt vertikal, sondern gekippt, etwa beim Typ 'italic' oder 'oblique'. Es handelt sich um einen Winkel entgegen dem Uhrzeigersinn von der Vertikalen aus zur vertikalen Struktur

Der Wert ist eine Zahl. Die Voreinstellung ist 0.

cap-height

Angabe der typischen Höhe von großen Buchstaben, von der Basislinie aus gemessen.
Sofern vorhanden ist das zum Beispiel die Höhe von 'M' oder 'H'.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.

x-height

Angabe der typischen Höhe von kleinen Buchstaben, von der Basislinie aus gemessen.
Sofern vorhanden ist das zum Beispiel die Höhe von 'x' oder 'a'. Die Größe ist insbesondere wichtig für die Eigenschaft font-size-adjust, weil die Berechnung des Anpassungsfaktors auf dieser Größe basiert. Daher sollte der Wert angegeben werden.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.

ascent

Angabe der maximalen Höhe von Buchstaben, von der Basislinie aus gemessen, aber ohne Akzentzeichen.
Sofern vorhanden ist das zum Beispiel die Höhe von 'l', 'b' oder 'h'.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.

descent

Angabe der maximalen Tiefe von Buchstaben, von der Basislinie aus gemessen, aber ohne Akzentzeichen.
Sofern vorhanden ist das zum Beispiel der Teil unter der Grundlinie von 'j', 'g' oder 'y'.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

Der Wert ist eine Zahl. Voreinstellung ist undefiniert. Ist der Wert undefiniert, wird das Attribut ignoriert.

accent-height

Angabe der Höhe von Zeichen mit Akzent, im Koordinatensystem des Zeichensatzes angegeben.

Der Wert ist eine Zahl. Ist der Bezeichner nicht angegeben, wird der Wert von accent angenommen. Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

widths

Angabe der Breite von Glyphen.
Der Wert ist eine Liste von Kombinationen von optionalen Unicode-Bereichen und einer Zahl oder mehreren Zahlen. Der Listenseparator ist ein Komma.

Die Notation des Unicode-Bereiches ist bereits für das Attribut unicode-range beschrieben. Ist kein Bereich für eine Zahl angegeben, wird U+0-7FFFFFFF angenommen.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden. Wenn nicht genug Glyphenbreiten angegeben sind, gilt für die restlichen Glyphen der letzte Wert. Sind zuviele angegeben, werden die überschüssigen Breiten ignoriert.

Beispiel:

widths="U+4E00-4E1F 1736 1874 1692"

oder

widths="U+1A?? 1490, U+215? 1473 1838 1927 1684 1356 1792
    1815 1848 1870 1492 1715 1745 1584 1992 1978 1770"

bbox

Angabe des maximalen begrenzenden Rechtecks.
Das begrenzende Rechteck ist das kleinste (horizontal und vertikal) ausgerichtete Rechteck, welches jeweils einen jeden Glyphen des Zeichensatzes komplett umschließt.

Der Wert besteht aus einer Liste von vier Zahlen, jeweils mit einem Komma als Separator. Die erste Zahl gibt den x-Wert unten links an, die zweiten den y-Wert unten links, die dritte den x-Wert oben rechts, die vierte den y-Wert oben rechts.

definition-src

Der Wert ist die URI/IRI in der üblichen Notation für eine Resourcen-Datei zur Aufnahme von Bezeichnern. Wird die Schriftart also in mehreren Stilvorlagen mit der Regel @font-face verwendet, so kann man sich damit die wiederholte Angabe der Bezeichner in den verschiedenen Stilvorlagen sparen und braucht nur jeweils auf die Resourcen-Datei verweisen.

baseline

Angabe zur Ausrichtung bezüglich der unteren Grundlinie.
Der Wert ist eine Zahl, die einen Versatz im Koordinatensystem des Zeichensatzes angibt.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

centerline

Angabe zur Ausrichtung bezüglich der zentralen Grundlinie.
Der Wert ist eine Zahl, die einen Versatz im Koordinatensystem des Zeichensatzes angibt.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

mathline

Angabe mathematischen Ausrichtung bezüglich der Grundlinie.
Der Wert ist eine Zahl, die einen Versatz im Koordinatensystem des Zeichensatzes angibt.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

topline

Angabe zur Ausrichtung bezüglich der unteren Grundlinie.
Der Wert ist eine Zahl, die einen Versatz im Koordinatensystem des Zeichensatzes angibt.

Wenn dieser Bezeichner verwendet wird, muss auch units-per-em' verwendet werden.

Mit der Eigenschaft font-size kann die Schriftgröße angegeben werden, genauer die sogenannte Geviertgröße, die mit der CSS-Einheit em korrespondiert. Die Geviertgröße ist ein typisches Maß für einen Glyphen, sofern vorhanden oft gut repräsentiert durch die Breite des Großbuchstabens M. Allerdings können Glyphen sowohl weniger als auch mehr Platz benötigen als 1em, falls es sich um eine proportionale Schrift handelt. Das so festgelegte Maß bestimmt demzufolge also nicht nur die Schriftgröße, sondern auch Längen, die in der Maßeinheit em angegeben werden, zusammen mit der verwendeten Schriftart auch Längen, die in der Maßeinheit ex angegeben werden.

Der Wert ist ein Schlüsselwort für eine absolute Größenangabe oder eine relative Größenangabe oder eine Längenangabe oder ein Prozentwert oder das Schlüsselwort 'inherit'. Die Eigenschaft wird vererbt und ist auf alle Elemente bei visuellen Medien anwendbar. Der Initialwert ist das Schlüsselwort 'medium'.

Schlüsselwörter für absolute Größenangaben

Das Darstellungsprogramm stellt eine geordnete Liste von Schriftgrößen zusammen, ausgehend von der vom Nutzer eingestellten bevorzugten Schriftgröße 'medium'. Von dort aus werden in abnehmender Größe die Werte für die Schlüsselwörter 'small', 'x-small', 'xx-small' bestimmt und mit ansteigender Größe die Werte für die Schlüsselwörter 'large', 'x-large', 'xx-large'.

Mit dem Konzept kann also ausgehend von einer Größe, die festgelegt wird, bevor die CSS-Kaskade einsetzt, ein fester Bezugspunkt für Größenangaben in em oder ex für jede Stelle im Dokument verwendet werden, ohne dass es notwendig ist, die Größe als absolute Längenangabe festzulegen.

Zum Beispiel werden traditionell Überschriften größer präsentiert als normaler Text. Unabhängig von der Positionierung in der Kaskade kann so durch eine absolute Angabe erreicht werden, dass Überschriften gleichen Ranges gleichgroß präsentiert werden, unabhängig davon, wie groß etwa die Geviertgröße des Elternelementes gerade in der Kaskade ist.

Zu beachten ist zudem, dass der Nutzer eine minimale Schriftgröße am Darstellungsprogramm festlegen kann. Kleinere Geviertgrößen werden also automatisch auf diesen Wert gesetzt. Legt der Nutzer etwa fest, dass seine bevorzugte Schriftgröße (entspricht 'medium') auch die minimale ist, so werden auch Schlüsselwörter, die kleinere Größen repräsentieren, nicht kleiner als 'medium' dargestellt. Zudem sollten Darstellungsprogramme für Monitore generell vermeiden, dass eine Größe dieser Liste unterhalb von 9 Gerätepixeln liegt.

Historisch wurde in CSS1 ein Skalierungsfaktor zwischen den Listenpunkte von 1.5 empfohlen, in CSS2.0 einer von 1.2. Auch letzteres kann besonders bei den kleineren Größen noch immer zu Problemen führen, weswegen die Programme auch davon abweichen können, um bessere Lesbarkeit zu erreichen. CSS2.1 gibt deshalb keinen Skalierungsfaktor mehr als Empfehlung vor.

Beispiele für die Präsentation im aktuell verwendeten Darstellungsprogramm:

xx-small	winzig
x-small	sehr klein
small	klein
medium	mittel
large	groß
x-large	sehr groß
xx-large	riesig

Schlüsselwörter für relative Angaben

Als Schlüsselwörter für relative Angaben sind zudem 'smaller' und 'larger' verfügbar. Ausgehend von der aktuellen Größe wird bei 'smaller' dann von den absoluten Größen die nächstkleinere gewählt, bei 'larger' die nächstgrößere, sofern vorhanden. Entspricht die aktuelle Größe nicht einem der Schlüsselwörter für absolute Angaben, so wird anhand der Liste für absolute Angaben eine Einordnung und Schätzung vorgenommen, um ungefähr eine proportionale Größenänderung zu erreichen.

Längen und Prozente

Längenangaben und Prozente sind im Kapitel numerische Angaben erläutert. Für font-size sind negative Werte nicht erlaubt.

Prozentwerte beziehen sich auf die geerbte font-size, 100% entsprechen also dem Wert des Elternelementes. Entsprechend ist 1em der aktuelle Wert des Elternelementes - der berechnete Wert von font-size und 1ex bestimmt sich aus dem aktuellen 1em zusammen mit der verwendeten Schriftart. Beim Wurzelement entsprechen 100% oder 1em genau dem Schlüsselwort 'medium' oder der vom Nutzer eingestellten optimalen Schriftgröße - von dieser sollte der Autor im normalen Textfluß auch nicht abweichen. Relevant und üblich sind anderen Textgrößen natürlich für besondere Strukturen wie Überschriften.

Hinsichtlich der sinnvollen Verwendbarkeit der möglichen Einheiten kommt es stark darauf an, von wem die Stilvorlage stammt und um welchen Inhalt es sich handelt.

Weil der Nutzer volle Kontrolle und Kenntnis über das verwendete Gerät und das Darstellungsprogramm und seine eigenen Sehgewohnheiten hat, kann dieser natürlich sehr gut Einheiten wie mm, cm, pt, pc, in oder px verwenden, auch für die Stilvorlage des Darstellungsprogrammes kann das sinnvoll sein. Der Autor eines Textes wird hingegen keine Kontrolle oder Kenntnis über diese Dinge haben, daher sind diese Einheiten für ihn weitgehend ungeeignet, jedenfalls für die Präsentation von Text auf einem Monitor. Die Einheit px kann sich noch gut eignen, wenn eine Box nur Pixelgraphik und keinen Text enthält. Für Stilvorlagen zum Drucken können auch die Einheiten mm, cm, pt, pc oder in geeignet sein, sofern der Autor jedenfalls den Druck selbst vornimmt, also zwangsläufig entscheiden muß, wie groß der Text gedruckt werden soll. Werden Text und Stilvorlage hingegen nur bereitgestellt, damit sie vom Nutzer gedruckt werden können, ist es natürlich wesentlich sinnvoller, dass sich die Stilvorlage wie bei der Darstellung am Monitor auch an der vom Nutzer voreingestellten optimalen Größe orientiert, also entweder Schlüsselwörter für die absoluten oder relativen Angaben verwendet oder Einheiten wie em oder ex oder Prozentwerte.

Wie bereits im Kapitel numerische Angaben erläutert, ist zudem die Bedeutung der Einheiten mm, cm, pt, pc, in oder px in CSS2.1 korrumpiert und schon daher nicht verläßlich für Autoren, während die Nutzer immerhin noch direkt nachprüfen können, was das Darstellungsprogramm aus diesen Einheiten macht.

Als Faustformel für Autoren kann also gelten: Für Boxen, die Text enthalten, sind Schriftgrößen mit den Schlüsselwörtern anzugeben oder in Prozentwerten oder in den Einheiten em oder ex. Bei den anderen Einheiten ist eine Prognose über die Präsentation nur schwer möglich und kann beim Nutzer zudem zu Problemen mit der Lesbarkeit führen, was diesen dazu nötigen kann, die Interpretation von Stilvorlagen komplett zu deaktivieren. Ergibt sich aus der Kaskade eine Schriftgröße, die kleiner als die vom Nutzer angegebene minimale Schriftgröße ist, wird diese auf die minimale Schriftgröße korrigiert, folglich darf ein Autor nicht damit rechnen, dass die Angabe von Schriftgrößen garantiert den gewünschten Effekt hat, wenn diese kleiner als 1em für das Wurzelelement ist (ein direktes Maß für die eventuell kleinere minimale Schriftgröße hat der Autor nicht, diese ist jedenfalls nicht größer als 1em des Wurzelelementes).

Beispiele

p {
  font-size: 1em
}
.wichtig {
  font-size: 120%
}

h1 {
  font-size: xx-large
}
h2 {
  font-size: x-large
}
h3 {
  font-size: large
}
h4, h5, h6 {
  font-size: larger
}
sub, sup {
  font-size: small
}

Mit der Eigenschaft font-weight kann die Schriftstärke beeinflusst werden. Repräsentationen von Glyphen bestehen aus Strichen oder Kurven mit einer gewissen Breite, die allerdings nicht exakt konstant sein muß. Eine große Schriftstärke korrespondiert dabei mit einem relativ breiten Strich, die Schrift wird fett genannt. Eine kleine Schriftstärke korrespondiert dabei mit einem relativ schmalen Strich, die Schrift wird mager genannt. Wären die Repräsentationen der Glyphen wirklich als Striche konstanter Breite realisiert, könnte man die Schriftstärke bei Schriftarten, die mit Vektorgraphik realsiert sind, leicht stufenlos ändern. Weil solche Änderungen aber Einfluß auf die Lesbarkeit hätten, ebenso wie eine exakt immer gleiche Breite des Striches, sind in der Praxis für viele Schriftarten explizit einige Repräsentationen mit verschiedenen Strichstärken verfügbar, die Auswahl ist diskret. Während CSS davon ausgeht, dass die relevanten Stärken mit neun Werten repräsentiert werden können, haben viele Schriftarten ein anderes System, meist mit weniger Werten, was in CSS durch eine Zuordnungsvorschrift gelöst wird. Es ist also oft damit zu rechnen, dass verschiedene Angaben in CSS zur Schriftstärke trotzdem zu Darstellungen mit derselben Schriftstärke führen können. Es kann zudem auch vorkommen, dass nicht alle verfügbaren Schriftstärken einer Schriftart überhaupt mit CSS auswählbar sind, etwa weil diese über das System von CSS mit neun Werten hinausgehen und CSS auch keinen Mechanismus anbietet, die Bezeichungen der jeweiligen Schriftart direkt anzugeben.

Mögliche Angaben sind Schlüsselwörter, zum einen neun Zahlen: 100, 200, 300, 400, 500, 600, 700, 800, 900. Je höher die Nummer desto fetter die Schrift beziehungsweise größer die Schriftstärke. Zum anderen können auch folgende Schlüsselwörter verwendet werden:

• 'inherit' - geerbt
• 'normal' - ist ein Synonym für 400, für normale Schriftstärke, der Initialwert
• 'bold' - ist ein Synonym für 700, für fette Schrift
• 'bolder' wählt eine Schriftstärke aus, die fetter ist als die geerbte Schriftstärke
• 'lighter' wählt eine Schriftstärke aus, die magerer oder dünner ist als die geerbte Schriftstärke

font-weight ist anwendbar auf visuelle Medien und alle Elemente und wird vererbt.

Da die meisten Schriftarten eben nicht der Zuordnung zu den neun Stärken folgen, es auch keinen Standard gibt, wie die Stärken einheitlich zu bezeichnen sind und es CSS nicht zuläßt, die Bezeichnungen der verwendeten Schriftart anzugeben, wird folgende heuristische Zuordnung empfohlen: Falls neun Stärken vorliegen, wird diese Zuordnung verwendet. Sonst: Eine normale, mittlere Stärke entspricht dem Wert '500'. Gibt es einen Stärke 'bold' oder 'Bold', wird diese '700' zugeordnet. Sind dann noch weitere Stärken vorhanden, werden die sinngemäß zugeordnet, also fetter als 'bold' mit größeren Werten, magerer als 'normal' dann kleiner als '500'.

Wenn dann zu einem CSS-Wert eine Zuordnung fehlt, wird bei Werten kleiner als 400 der nächstgelegene verfügbare kleinere Wert verwendet, gibt es diesen nicht, wird der nächstgelegene verfügbare größere Wert verwendet. Bei Werten größer als 500 wird entsprechend der nächstgelegene verfügbare größere Wert verwendet, gibt es diesen nicht, wird der nächstgelegene kleinere Wert verwendet. Bei 400 wird sofern verfügbar 500 gewählt, sonst die nächstgelegene kleinere Stärke als 400. Bei 500 wird sofern verfügbar 400 gewählt, sonst die nächstgelegene kleinere Stärke als 400.

Beispiel:

p {
  font-weight: bolder;
}

Normaler Text, magerer Text und fetter Text.

Anmerkung: Im Vektorformat SVG werden Glyphen von Schriftarten als normale Flächen realisiert, die also auch einen Strich haben können (Eigenschaften und Präsentationsattribute vom Typ stroke*), folglich kann man dort auf Kosten der optimalen Lesbarkeit auch die Strichstärke stroke-width auf einen größeren Wert setzen und stroke auf die gleiche Farbe wie fill, um eine größere Schriftstärke zu erreichen, ohne auf eine Auswahl aus den eingeschränkten Möglichkeiten von font-weight zurückgreifen zu müssen. Mit dem Trick läßt sich dann zumindest in dem Zusammenhang teilweise das Problem umgehen, dass bei einer Schriftart nicht alle Strichstärken verfügbar sein mögen.

Mit der Eigenschaft font-style kann die Schrift bei visueller Präsentation besonders hervorgehoben werden. Während bei 'normaler' Schrift markante Züge von Glyphen oft horizontal und vertikal ausgerichtet sind, etwa bei Glyphen wie H, L, F, kann durch den font-style auch eine Verkippung und Scherung der Glyphen erreicht werden. Dabei ist zu unterscheiden zwischen Schriften, die rein rechnerisch durch eine Scherung einer normalen Schrift realisiert werden und solchen, wo der visuelle Effekt der Verkippung durch eine ähnliche Schrift erreicht wird, die aber komplett neu erstellt wird. Bei letzterer kann auch die Verwendung von Ligaturen anders sein, jedenfalls sind die Glyphen nicht durch eine einfache affine Transformation aus der normalen Schrift zu erhalten. Letzterer Typ wird kursiv (englisch italic genannt, ersterer oblique.

Üblicherweise findet die Verkippung in Leserichtung statt, also bei oblique in Form einer Scherung, bei der der Teil des Glyphen oberhalb der Grundlinie abhängig von der jeweiligen Höhe des Fragments nach rechts verschoben wird, je höher, desto mehr verschoben. Unterhalb der Grundlinie wir dann entsprechend mit weiterem Abstand von der Grundlinie mehr nach links verschoben. In Ausnahmefällen gibt es auch eine umgedrehte Richtung sein, also ein Verkippen oben nach links.

font-style hat die Schlüsselwörter 'normal' für eine normale, aufrechte Schrift, 'italic' für kursive Schrift und 'oblique' für eine oblique Schrift und 'inherit'. Ist keine echte kursive Schrift verfügbar, kommt ersatzweise auch eine oblique zum Einsatz.

Der Initialwert ist 'normal'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.

Beispiel:

p {
  font-style: italic;
}

Normaler Text, kursiver Text und obliquer Text.

Mit Hilfe der Eigenschaft font-variant lässt sich die Darstellung einer Schrift beeinflussen. Neben der üblichen Darstellung mit komplett unterschiedlichen Glyphen für große und kleine Buchstaben (Majuskeln und Minuskeln) gibt es auch eine Variante, bei welcher für die kleinen Buchstaben lediglich im Wesentlichen verkleinerte Versionen der großen Buchstaben verwendet werden. Diese kleinen Großbuchstaben werden auch Kapitälchen genannt und die Höhe entspricht im Wesentlichen der Einheit 1ex, während die normalen Großbuchstaben die charakteristische Höhe 1em haben.

Dabei können diese Kapitälchen auch hinsichtlich der Lesbarkeit gegenüber der Möglichkeit einer einfachen Skalierung weiter optimiert sein, also einen eigenen Schrifttyp darstellen. Ist solch eine Version für eine Schrift nicht verfügbar, wird stattdessen vom Darstellungsprogramm eine einfache Skalierung vorgenommen.

Mögliche Werte sind:

• 'inherit' - geerbt
• 'normal' - für eine normale Schrift mit Majuskeln und Minuskeln
• 'small-caps' - Verwendung von Kapitälchen statt Minuskeln

Der Initialwert ist 'normal'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.

Beispiel:

p {
  font-variant: small-caps
}

Jeweils ein Absatz mit 'small-caps', 'normal' und nochmals 'small-caps':

Dies gibt den Text mit Kapitälchen wieder.

Normale Variante mit Majuskeln und Minuskeln.

Abschätzung des Unterschiedes zwischen 1em und 1ex beim Glyphen Mm.

Mit der Eigenschaft font-stretch kann das typische Aspektverhältnis Breite zu Höhe von Glyphen beeinflußt werden. Als einfachste Näherung kann man sich vorstellen, dass ausgehend von einem normalen Aspektverhältnis jede Glyphe in horizontaler Richtung skaliert wird, also gestaucht oder gestreckt. Bei den tatsächlichen Schrifttypen werden allerdings die Glyphen gegenüber dieser einfachen Veranschaulichung hinsichtlich der Lesbarkeit optimiert sein.

Diese Eigenschaft ist in CSS 2.0 verfügbar, aufgrund mangelnder Implementierungen wird sie jedoch in CSS 2.1 nicht erwähnt, und wird erst wieder in einem Arbeitsentwurf für das Font-Modul von CSS3 aufgeführt.

Mögliche Werte sind:

• 'inherit' - geerbt
• 'narrower' stärker zusammengedrängt als geerbt
• 'wider' stärker geweitet als geerbt
• 'normal' für normale Textausdehnung (Initialwert)
• 'condensed' für zusammengedrängt
• 'semi-condensed' für halb zusammengedrängt
• 'extra-condensed' für stark zusammengedrängt
• 'ultra-condensed'für extrastark zusammengedrängt
• 'expanded' für geweitet
• 'semi-expanded' für halb geweitet
• 'extra-expanded' für stark geweitet
• 'ultra-expanded' für extrastark geweitet

Die Reihenfolge ist von am stärksten zusammengedrängt bis zum am stärksten geweitet: 'ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'normal', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded'. 'narrower' und 'wider' setzen die Eigenschaft dann vom geerbten Wert auf den nächsten engeren oder weiteren in der Liste, ohne aber über die Liste hinauszureichen, 'narrower' als 'ultra-condensed' ist also wieder dasselbe 'ultra-condensed' und entsprechend 'wider' als 'ultra-expanded' ist also wieder dasselbe 'ultra-expanded'.

Die Eigenschaft wird vererbt und ist anwendbar für alle Elemente bei visuellen Medien.

Beispiel

p {
  font-stretch: expanded
}

Dieser Text wird gedehnt dargestellt.

Dieser Text wird extrastark zusammengedrängt dargestellt.

Übersicht aller Textformatierungen

Eigenschaft	Beschreibung	Mögliche Werte
letter-spacing	Einstellung des Abstandes zwischen den Glyphen.	Schlüsselwort 'normal' oder eine Länge
line-height	Einstellung der Zeilenhöhe	Schlüsselwort 'normal', eine Länge, ein Prozentwert oder eine Zahl als Kurzversion der Angabe in der Einheit em. Bei 'normal' wird die Zeilenhöhe automatisch so bestimmt, dass sich kein Überlapp mit der vorherigen Zeile ergibt, auch nicht, wenn die Zeile verschiedene Schriftgrößen oder ersetzte Elemente wie Bilder enthält. Die Prozentangabe bezieht sich auf die Geviertgröße 1em.
text-align	Horizontale Textausrichtung	center right left justify
text-decoration	Einstellung der Textdekoration	underline overline line-through none blink (Die Interpretation von 'blink' ist optional, kann also denselben Effekt wie 'none' haben.)
text-indent	Einstellung der Texteinrückung der ersten Zeile einer Block-Box	Eine Länge oder eine Prozentangabe. Die Prozentangabe bezieht sich auf die Breite des umgebenden Blockes.
text-shadow	Einstellung des Textschattens (nicht in CSS 2.1)	Schlüsselwort 'none' oder eine mit Komma separierte Liste von speziellen Werten. Ein Wert besteht aus einer Farbangabe und zwei oder drei Längen, wobei es egal ist, ob man erst die Farbe oder erst die Längen notiert.
text-transform	Transformation zwischen Groß- und Kleinschreibung	capitalize uppercase lowercase none
vertical-align	Vertikale Ausrichtung von inzeiligem Inhalt oder von Tabellenzellen	Eine Länge oder einer Prozentwert, wobei sich der Prozentwert auf line-height bezieht, oder ein Schlüsselwort: baseline sub super top text-top middle bottom text-bottom
white-space	Behandlung von Leerzeichen und Zeilenumbrüchen in Block-Boxen	normal pre nowrap pre-wrap (nicht in CSS2.0) pre-line (nicht in CSS2.0)
word-spacing	Einstellung des Abstandes zwischen Wörtern	Eine Länge oder das Schlüsselwort 'normal'

Mit der Eigenschaft text-align kann die horizontale Ausrichtung von inzeiligen Inhalten einer Block-Box beeinflußt werden.

Die möglichen Werte lauten:

• 'inherit' geerbt
• 'left' linksbündig
• 'right' rechtsbündig
• 'center' mittig
• 'justify' Blocksatz

Der Initialwert hängt von der normalen Textlaufrichtung ab (etwa festgelegt mit der Eigenschaft direction oder einer entsprechenden Methode). Ist die Textlaufrichtung von links nach rechts, ist 'left' der Initialwert. Ist die Textlaufrichtung von rechts nach links, ist 'right' der Initialwert.

Die Eigenschaft wird vererbt und ist anwendbar auf Block-Container bei visuellen Medien. Die Eigenschaft hat allerdings keine Wirkung, wenn die Eigenschaft white-space den Wert 'pre' oder 'pre-wrap' hat.

Die meisten Darstellungsprogramme nehmen bei der Aufteilung von Text auf Zeilen keine Silbentrennung vor. Reicht der verfügbare Platz nicht mehr für das nächste Wort aus, so wird bei 'left', 'right' und 'center' das nächste Wort als Zeilenanfang der nächsten Zeile verwendet. Ist das Wort länger als die Zeile, steht das Wort über. So nimmt der Text einer Zeile also zumeist weniger Platz ein, als verfügbar ist, manchmal auch mehr. Bei der nicht bündigen Seite entsteht so also leerer Raum oder Text steht über den Rand der Box über. Bei der mittigen Anordnung wird dann entsprechend nach beiden Seiten gleichviel Platz gelassen oder die Wörter stehen gleichviel über.

Bei 'justify' wird das erste Wort entsprechend bündig am Zeilenanfang angeordnet, das letzte bündig zum Zeilenende, jedenfalls sofern es sich nicht um die letzte Zeile handelt oder ein manueller Zeilenumbruch angegeben ist. Besonders durch Variation der Breite der Leerzeichen zwischen den Wörtern, optional auch durch Stauchung der Glyphen oder der Abstände zwischen den Glyphen verteilt das Darstellungsprogramm dann die Wörter mit gleichen Leerzeichenbreiten über die Zeile. Besonders wenn die Breite einer Zeile gering ist und darin nur wenige Wörter stehen, kann dies die Lesbarkeit beeinträchtigen, was zur Ermüdung des Lesers beitragen kann.

'justify' eignet sich daher besser für breite Blöcke, in welchen alle Wörter viel kürzer sind als die Breite des Blockes. Unter diesen Umständen ist auch bei den anderen Ausrichtungen der variable Leerraum auf der nicht bündigen Seite weniger störend als bei Blöcken mit geringer Breite, woraus sich ganz allgemein schließen läßt, dass Autoren geringe Zeilenbreiten vermeiden sollten, gleich welche Anordnung sie bevorzugen. Ist eine kleine Breite hingegen unvermeidlich, gibt es vermutlich bei 'justify' die größeren Beeinträchtigungen hinsichtlich der Lesbarkeit.

Beispiele:

p {
  text-align: center
}

Dies zentriert den damit formatierten Text.
Das wird unter anderem gerne für Überschriften verwendet.
Aber auch bei Gedichten, wo festgelegte Zeilen eine strukturelle Bedeutung haben, ist die Zentrierung eine klassische Anordnungsmethode, auch weil hier die Zeilen oft nicht den gesamten verfügbaren Platz benötigen.
Bei normaler Prosa, wie diesem Absatz hingegen, schränkt die Zentrierung die Lesbarkeit wieder deutlich ein.
Aufeinanderfolgende längere Komposita wie Textanalysesanleitungswerkverzeichnisstrukturkommission zur Sekundarstufenschülerkleinstgruppenbildungseignungsermittlung können hier interessante Strukturen hervorrufen, wie bei den anderen Anordnungen auch.

p {
  text-align: right
}

Auch eine rechtsbündige Anordung ist für längere Texte, bei denen die Leserichtung von links nach rechts geht, eher problematisch für die Lesbarkeit. Allerdings bei Listen mit kurzen Einträgen oder Navigationsmenüs, insbesondere wenn letztere rechts vom Inhalt angeordnet sind, kann diese zu interessanten Effekten führen. Man achte bei der Anordnung rechts neben dem Inhalt auch darauf, dass überstehende Inhalte unangenehm überlappen können, etwa bei langen Wörtern: 'Desoxyribonukleinsäureanalyseanordnungsbedienungsanleitung'.

p {
  text-align: justify
}

Dies gibt den damit formatierten Text im Blocksatz aus. Um einen Eindruck zu bekommen, wie dies wirkt, ist zusätzlich die Breite der Box eingeschränkt. Zum Ausprobieren sollte man ruhig einmal den Anzeigebereich so weit verkleinern, dass der verfügbare Platz nochmals verkleinert wird. Wörter wie 'Donaudampfschiffahrtskapitänsanwärterpatentverfahrensvorschriften' können bei allen Anordnungen zu unansehnlichen Ergebnissen führen, wenn die Breite der Box nicht ausreicht.
Als kleine Hilfe sei hier noch angemerkt, dass man bei langen Wörtern wie Komposita den Darstellungsprogrammen bei der Trennung des Wortes helfen kann, indem man einen bedingten Trennstrich an geeigneten Stellen einfügt, dies ist das Zeichen &#173;. Bei älteren Programmen kann dies Zeichen allerdings auch fehlinterpretiert werden, weswegen man sich überlegen muß, ob die Fehlinterpretation bei alten Programmen der schlimmere Effekt ist oder das zu lange Wort bei allen Programmen. Zum Test: 'Donau­dampf­schiffahrts­kapitäns­anwärter­patent­verfahrens­vorschriften'.

Mit der Eigenschaft word-spacing kann der Präsentationsabstand zwischen den einzelnen Wörtern eines Textes beeinflußt werden.

Der Wert ist eine Länge oder eines der Schlüsselwörter 'normal' oder 'inherit'. Der Initialwert ist 'normal'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.

Die Schriftart oder das Darstellunngsprogramm selbst gibt vor, welcher Abstand zwischen Wörtern als normal anzusehen ist. Dies entspricht dem Schlüsselwort 'normal'. Relativ dazu kann der Abstand vergrößert oder verkleinert werden. Dazu wird die angegebene Länge zum normalen Abstand hinzuaddiert. Inbesondere ergeben sich bei den durchaus erlaubten negativen Werten also kleinere als normale Abstände.

Man beachte, dass auch die Eigenschaft text-align den Wortabstand beeinflussen kann, insbesondere beim Wert 'justify'. Bei einer entsprechenden Kombination kann es also zu Abweichungen zur Angabe von word-spacing kommen. Je nach Implementierung können sich auch bei negativen Längen Einschränkungen bei der korrekten Präsentation ergeben - man sollte sich also nicht darauf verlassen, dass etwa beim letzten der folgenden Beispiele die Reihenfolge der Wörter vertauscht wird.

Beispiele:

p {
  word-spacing: 1.5em
}

Die Wörter des Textes werden in einem Abstand von 1.5em angezeigt.

p {
  word-spacing: -1ex
}

Wiki Book

Wenn die Implementierung die Eigenschaft uneingeschränkt interpretiert, sollte mit folgender Angabe statt 'Book Wiki' sowas wie 'Wiki Book' zu sehen sein:

p {
  word-spacing: -10em
}

Book Wiki

p { 
  max-width: 20em;
  border: thin solid;
  padding: 1ex;
  word-spacing: -0.4ex;
  text-align: justify
}

Dies ist ein Beispiel für die Kombination mit text-align. Damit gibt es also zwei Eigenschaften, welche über den Abstand zwischen zwei Wörtern bestimmen. Besonders auffällig wird das natürlich wieder, wenn längere Wörter wie Sauerstoffflaschenadapterdichtungstest oder aber auch Feenzauberstabspezialreinigungsmittel und so weiter kurz hintereinander auftreten, mit wenigen anderen kurzen Wörtern dazwischen ...
Auffällig ist hier natürlich auch die schlechte Lesbarkeit in einigen Zeilen bedingt durch die kleinen Abstände. Und Leerraum zwischen Wörtern ist eine Auszeichnungsmethode, die es nicht immer gegeben hat. Die alten Römer etwa bevorzugten oft die Verwendung von Majuskeln ohne Leerraum zwischen den Wörtern - und Satzzeichen waren da auch nicht im Gebrauch.

Mit der Eigenschaft letter-spacing kann der Abstand zwischen den Glyphen beeinflußt werden. Der Wert ist entweder eine Länge oder das Schlüsselwort 'normal' oder 'inherit'.

Initialwert ist 'normal'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.

Die jeweilige Schriftart gibt vor, wie groß der 'normale' Abstand zwischen Glyphen ist. Die Längenangabe addiert sich zu diesem 'normalen' Abstand. Mit der Angabe einer negativen Länge kann man also erreichen, dass die Glyphen näher zusammenrücken oder sogar überlappen, bei einer großen Länge erreicht man den Effekt einer gesperrten Schrift, neben kursiv oder fett eine weitere Möglichkeit, Textstellen besonders hervorzuheben. Bei großen Abständen kann das Darstellungsprogramm zudem Ligaturen in einzelne Glyphen aufteilen, um den gewünschten Effekt der Sperrung zu unterstreichen.

p {
  letter-spacing: .2em
}

Die Buchstaben des Textes werden mit einem zusätzlichen Abstand von 0.2em angezeigt.

p {
  letter-spacing: .5cm
}

Die Buchstaben des Textes werden mit einem zusätzlichen Abstand von 0.5cm angezeigt.

p {
  letter-spacing: -0.2ex
}

Die Buchstaben des Textes werden mit einem verkleinerten Abstand von -0.2ex angezeigt, also zusammengerückt.

Mit Hilfe der Eigenschaft text-decoration lassen sich Textdekorationen angeben. Zum Text werden dazu zumeist zusätzliche Strukturen wie Striche in der Textfarbe color hinzugefügt.

Mögliche Werte sind:

• 'inherit' geerbt
• 'none' keine Dekoration, der Initialwert
• 'underline' unterstrichen
• 'overline' Linie über dem Text
• 'line-through' durchstreichen
• 'blink' blinken - Wechsel zwischen sichtbar und nicht sichtbar

Die Eigenschaft ist anwendbar auf alle Elemente bei visuellen Medien und wird nicht vererbt.

Hinsichtlich der Vererbung ist allerdings anzumerken, dass sich die Dekoration des Elternelementes über inzeiligen Inhalt hin fortsetzt, obwohl die Eigenschaft nicht vererbt wird. Die Frage der Fortsetzung ist bei tabellenartigen Blockelementen undefiniert, der Autor sollte bei einer Abweichung vom Initialwert im Zweifelsfalle die Eigenschaft immer explizit setzen, um ein definiertes Verhalten zu bekommen. Ähnlich undefiniert ist das Verhalten, wenn das Elternelement unsichtbar ist, das Kindelement aber sichtbar, und die Eigenschaft beim Elternelement angegeben ist. Die Eigenschaft setzt sich auch nicht in absolut positionierte Kindelemente fort oder solche, die per float aus dem normalen Textfluß genommen wurden. Die Eigenschaft findet ferner nur Anwendung auf die Glyphen, einschließlich Leerzeichen, nicht auf ersetzte Elemente wie Bilder oder auf inzeilige Blöcke.

Hinsichtlich 'blink' ist zu bedenken, dass dies Zugänglichkeitsprobleme verursachen kann, weil der Leser die Blinkerei nicht gezielt deaktivieren kann, ohne die gesamte Stilvorlage zu deaktivieren, von daher ist von einer Verwendung abzuraten. Auch das zeitliche Verhalten des Blinkens kann nicht eingestellt werden. Generell ist für CSS 3 ein Modul in Vorbereitung, wo man ähnliche Effekte definiert per Animation erreichen kann. Bei SVG ist deklarative Animation bereits jetzt möglich.

Weil die Farbe der Dekoration bestimmt wird durch den Wert von color von dem Element, für welches text-decoration angegeben ist, ermöglicht dies über einen Umweg bei geeigneter Struktur des Dokumentes auch eine Dekoration in anderer Farbe als der des dekorierten Textes. Zu dem Zwecke ist die Textfarbe beim Kindelement zu ändern.

Beispiele:

p {
  text-decoration: underline
}

Dies unterstreicht den Text.
Wie ist das Verhalten bei ^höher- und _tiefergestelltem Text?
Was passiert bei Änderung der Schriftgröße?

p {
  text-decoration: line-through
}

Dies streicht den Text durch.
Wie ist das Verhalten bei ^höher- und _tiefergestelltem Text?
Was passiert bei Änderung der Schriftgröße?

Oft werden Verweise mit 'underline' unterstrichen. Dies hat aber – je nach Schriftart – den Nachteil, dass ein gesetzter Unterstrich eventuell nicht sichtbar ist.

Unterstrich_hier_dazwischen.

Um diesen Effekt zu vermeiden kann für Unterstreichungen auch ein Rahmen verwendet werden (border-bottom: 1px solid #000).

Unterstrich_hier_dazwischen

p {
  text-decoration: underline;
  color: blue;
  background: white
}

p > span
{
  text-decoration: none;
  color: red
}

roter Text blau unterstrichen

Mit Hilfe der Eigenschaft text-transform kann Text so präsentiert werden, dass er unabhängig von der Notation im Quelltext groß- oder kleingeschrieben erscheint oder aber auch nur der Anfangsbuchstabe jeden Wortes großgeschrieben wird. Betroffen sind also nur Buchstaben oder Glyphen, für welche es sowohl Majuskeln als auch Minuskeln gibt, also vorrangig zum Beispiel im deutschen Sprachraum die Buchstaben A-Z, a-z, Umlaute und die ß-Ligatur, wobei letztere ein Problemfall ist, weil für den Großbuchstaben der ß-Ligatur (also: ẞ) erst 2008, also recht spät eine Kodierung im Rahmen von Unicode (U+1E9E, &#7838;) eingeführt wurde, der Großbuchstabe also in vielen Schriftarten gar nicht enthalten sein mag.

Mögliche Werte sind:

• 'inherit' geerbt
• 'none' keine Änderung gegenüber dem Quelltext
• 'capitalize' die erste Buchstabe eines jeden Wortes wird großgeschrieben, der Rest bleibt unverändert
• 'uppercase' durchgehende Verwendung von Großbuchstaben.
• 'lowercase' durchgehende Verwendung von Kleinbuchstaben.

Der Initialwert ist 'none'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente in visuellen Medien.

XHTML:

<p>dies ist ein satz mit durchgehender kleinschreibung.<br />
DIES IST EIN SATZ DURCHGEHEND GRO&#7838;GESCHRIEBEN.<br />
Umlaute und Ligaturen: Ää Öö Üü &#7838;ß</p>

CSS:

p {
  text-transform: capitalize
}

dies ist ein satz mit durchgehender kleinschreibung.
DIES IST EIN SATZ DURCHGEHEND GROẞGESCHRIEBEN.
Umlaute und Ligaturen: Ää Öö Üü ẞß

p {
  text-transform: uppercase
}

dies ist ein satz mit durchgehender kleinschreibung.
DIES IST EIN SATZ DURCHGEHEND GROẞGESCHRIEBEN.
Umlaute und Ligaturen: Ää Öö Üü ẞß

p {
  text-transform: lowercase
}

dies ist ein satz mit durchgehender kleinschreibung.
DIES IST EIN SATZ DURCHGEHEND GROẞGESCHRIEBEN.
Umlaute und Ligaturen: Ää Öö Üü ẞß

In CSS können Farben für verschiedene Bestandteile eines Elementes festgelegt werden. Bei blockbasierten Formaten wie (X)HTML etwa folgende: Text (color: …;), Hintergrund (background-color: …;) und Rahmen (border-color: …;).
SVG hat eine andere Struktur und Methode, wie ein Dokument präsentiert wird, daher decken sich die Eigenschaften nur teilweise mit diesen. In SVG gibt es etwa keine Rahmen und im Sinne von CSS auch keinen Hintergrund, daher haben diese Eigenschaften keinen Effekt, dafür aber zum Beispiel die Füllung und der Strich eines Elementes, fill und stroke.

Farbdefinitionen können in CSS über einen Farbnamen oder einen numerischen Farbwert mit spezieller Notation erfolgen.

Farbnamen

In CSS bis Version 2.0 sind nur die 16 Farbnamen von HTML 4 definiert. In CSS 2.1 kommt noch 'orange' hinzu. Im Farbmodul von CSS 3 werden jedoch alle SVG-Farbnamen gelistet.

Die SVG-Farbnamen sind zum Beispiel dem SVG-Buch zu entnehmen: Farbnamen.

Farbnamen in CSS 2.0

black	#000000	gray	#808080
maroon	#800000	red	#FF0000
green	#008000	lime	#00FF00
olive	#808000	yellow	#FFFF00
navy	#000080	blue	#0000FF
purple	#800080	fuchsia	#FF00FF
teal	#008080	aqua	#00FFFF
silver	#C0C0C0	white	#FFFFFF

Namen für Systemfarben in CSS 2

Die Systemfarben richten sich nach den System-Einstellungen des Nutzers. Man kann diese Farbangaben beispielsweise verwenden, um eine Seite zu erstellen, die der Benutzeroberfläche des Nutzers ähnlich sieht.

• activeborder
• activecaption
• appworkspace
• background
• buttonface
• buttonhighlight
• buttonshadow
• buttontext
• captiontext
• graytext
• highlight
• highlighttext
• inactiveborder
• inactivecaption
• inactivecaptiontext
• infobackground
• infotext
• menu
• menutext
• scrollbar
• threeddarkshadow
• threedface
• threedhighlight
• threedlightshadow
• threedshadow
• window
• windowframe
• windowtext

Die Angaben sind in Farbmodul von CSS 3 als veraltet gekennzeichnet. Als Alternative ist ein Arbeitsentwurf in Arbeit.

Numerische Farbwerte

Die Notierung von numerischen Farbwerten kann in CSS bis Version 2.1 im Farbraum sRGB (Rot, Grün, Blau) erfolgen. Das Farbmodul von CSS 3 fügt den Farbraum HSL (Farbton [hue], Sättigung [saturation], Helligkeit [lightness]) hinzu. Die Angabe erfolgt als dezimaler- oder prozentualer Wert, bei sRGB auch als Hexadezimalwert. Zusätzlich ist beim Farbmodul von CSS 3 die Angabe eines Wertes für den Alpha-Kanal zur Darstellung der Transparenz möglich.

Hexadezimalwert

Ein hexadezimaler Farbwert stellt eine Farbe aus dem sRGB-Farbraum dar, eingeleitet von einer Raute '#', gefolgt von hexadezimalen Ziffern.

Dies ist entweder exakt eine Ziffer für jeden Farbkanal, also 3 Ziffern insgesamt, jeweils eine Möglichkeit von folgenden: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F. Große und kleine Buchstaben bedeuten jeweils das gleiche, im dezimalen System sind a bis f die Zahlen 10 bis 15.

Alternativ kann auch eine Notation mit zwei von den Ziffern pro Kanal gewählt werden, also 6 Ziffernn insgesamt. Das deckt dann dezimal den Bereich von 0 bis 255 ab. Die Konversion von der einziffrigen Notation in die mit zwei Ziffern pro Kanal erfolgt einfach durch Verdopplung der einzelnen Ziffer, #fff ist also gleich #ffffff oder auch weiß oder #abc ist gleich #aabbcc.

Beispiele lange Variante:

color: #fafc00;
color: #000000;
color: #ffffff;
color: #c0c0c0;

Wenn sich die Werte des jeweiligen sRGB-Werts wiederholen, kann man also auch die kurze Variante schreiben.

color: #ffff00; /* ist das gleiche wie */
color: #ff0;
 
color: #aa6633 /*ist das gleiche wie*/
color: #a63;

color: #ca6633; /* kann jedoch nicht abgekürzt werden */
color: #ca63;   /* dies ist eine fehlerhafte Farbangabe, weil 4 statt 3 oder 6 Ziffern verwendet werden! */

sRGB-Wert

Hierbei werden die jeweiligen sRGB-Werte in Abstufungen von 0 bis 255 (256 Farbwerte pro Farbe) oder als prozentuale Angabe notiert. Werte außerhalb des gültigen Bereiches werden zur Präsentation auf den nächstgelegenen gültigen Wert gesetzt, negative Zahle also auf 0 und Werte größer als 255 oder 100% auf 255 beziehungsweise 100%.

Die Notation beginnt mit 'rgb(' und endet mit ')'. Dazwischen befinden sich die Angaben zu den drei Kanälen, jeweils mit Komma separiert, also zum Beispiel rgb(255,255,255), entspricht #fff in hexadezimaler Schreibweise oder auch weiß.

Statt einer dezimalen Angabe ist auch die Angabe von drei Prozentwerten möglich, jeweils im Bereich von 0% bis 100%, die Angabe des Symboles '%' ist wichtig, damit das Darstellungsprogramm zwischen Prozentangaben und dezimalen Angaben unterscheiden kann. Es darf nicht gemischt werden, also ein Kanal in dezimaler Notation und einer in prozentualer Notation ist nicht erlaubt - auch nicht beim Wert 0. Ansonsten ist die Notation für prozentuale Angaben die gleiche wie für dezimale. Anders als bei den anderen Notationen sind bei Prozentangaben auch nichtganzzahlige Angaben erlaubt.

color: rgb(255,255,0);
color: rgb(0,0,0);
color: rgb(255,255,255);
color: rgb(192,192,192);

/* entspricht: */
color: rgb(100%,100%,0%);
color: rgb(0%,0%,0%);
color: rgb(100%,100%,100%);
color: rgb(75%,75%,75%);

/* bei Prozenten kann auch mit Kommawerten gearbeitet werden */
color: rgb(7.5%,99.1%,33.3%);

HSL-Wert

Das Farbmodul von CSS 3 erlaubt auch die Angabe in einem alternativen Farbraum. Die Notation beginnt mit 'hsl(' und endet mit ')' dazwischen befinden sich die Angaben zu den drei Werten des Farbraumes, jeweils mit Komma separiert.

Hierbei wird zuerst der Farbwert als Zahl ohne Einheitszeichen angegeben. Die Zahl steht für einen Winkel in Grad, wobei man sich die Farben im Kreis angeordnet denkt, wobei rot 0 und 360 entspricht, grün 120 und blau 240. Die anderen Farben sind als Mischfarben dazwischen angeordnet, also violett zwischen 240 und 360, orange und rot zwischen 0 und 120, cyan zwischen 120 und 240. Werte außerhalb des Bereiches 0 bis 360 werden dann vor der Präsentation per Modulo 360 auf den Bereich zurückgerechnet.

Der zweite Wert steht für die Sättigung in Prozent, wobei 0% für einen Grauwert ohne Farbe steht und 100% für die Farbe ohne Beimischung von grau. Werte außerhalb des gültigen Bereiches werden wieder bei der Darstellung auf den nächstgelegenen gültigen Wert gesetzt.

Der dritte Wert steht für die Helligkeit, ebenfalls ein Prozentwert, wobei 0% für schwarz steht und 100% für weiß, 50% entspricht der 'normalen' Farbe. Werte außerhalb des gültigen Bereiches werden wieder bei der Darstellung auf den nächstgelegenen gültigen Wert gesetzt.

/* Farben wie im obigen Beispiel */
color: hsl(60,100%,50%);
color: hsl(0,0%,0%);
color: hsl(0,0%,100%);
color: hsl(0,0%,75%);

Darstellungsprogramme, die CSS nur bis Version 2.1 interpretieren, werden solche Werte natürlich als ungültig einstufen, daher empfiehlt es sich, eine auch in CSS 2.1 gültige Anweisung voranzustellen, etwa so:

color: rgb(255,255,0);
color: hsl(60,100%,50%);

Farbangaben mit Alpha-Wert

Um teiltransparente Farben zu erreichen, führt das Farbmodul von CSS 3 einen zusätzlichen Alpha-Kanal ein. Dies funktioniert ähnlich oder gleich den bereits früher für SVG definierten Eigenschaften wie fill-opacity oder stroke-opacity.

Die Notation ist wieder rückwärtsinkompatibel zu CSS 2.1, daher sollte man für alte Darstellungsprogramme immer eine Alternative in der alten Notation ohne Teiltransparenz bereitstellen.

Für die Teiltransparenz wird ein zusätzlicher vierter Wert für den Alpha-Kanal als Zahl im Bereich zwischen 0 (vollkommen transparent) und 1 (deckend) hinter den drei bereits erklärten Werten und einem weiteren Komma notiert. Werte außerhalb des gültigen Bereiches werden wieder bei der Darstellung auf den nächstgelegenen gültigen Wert gesetzt.

Es werden außerdem die Schlüsselwörter rgb und hsl jeweils hinten um ein a ergänzt. Die Angabe des Alpha-Kanals ist bei der Nutzung von hexadezimalen Werten nicht möglich. Beispiele:

/* Gelb mit 50% Deckkraft */
background: rgba(255,255,0,0.5);
background: hsla(60,100%,50%,0.5);

Schlüsselwort 'transparent'

In CSS 1 ist es für die Eigenschaft background-color zulässig, den Wert 'transparent' zu setzen. Seit CSS 2 ist der Wert auch erlaubt für border-color. Mit CSS 3 ist der Wert zulässig für alle Eigenschaften mit Farbwerten mit Ausnahme der Eigenschaft color. Die Wirkung ist gleich einem komplett durchsichtigen, unsichtbaren Objekt, welches aber dennoch vorhanden ist, also etwa beim Box-Modell immer noch zur Berechnung von Abmessungen beiträgt. 'transparent' entspricht dem Wert rgba(0,0,0,0).

Schlüsselwort 'currentColor'

Das Farbmodul von CSS 3 übernimmt von SVG das Schlüsselwort 'currentColor'. Damit kann der berechnete Wert der Eigenschaft color als Farbwert für anderen Eigenschaften verwendet werden. Wird das Schlüsselwort bei color selbst verwendet, so wird es behandelt wie 'inherit'.

Eigenschaft opacity

Das Farbmodul von CSS 3 übernimmt von SVG auch die Eigenschaft opacity. Dies bedarf allerdings für die Kombination mit der in CSS verfügbaren Eigenschaft z-index einer kleinen Erweiterung.

Mit opacity kann ein Element samt seiner Kindelemente teiltransparent gemacht werden. Die Eigenschaft ist demzufolge für visuelle Medien anwendbar. Das Element samt Kindelementen wird damit zu einem einzigen, graphischen Block zusammengefaßt. Dieser wird dann komplett entsprechend dem Wert von opacity teiltransparent wiedergegeben.

Wie bei der Erweiterung der Farbangaben um einen Alpha-Wert wird hier eine Zahl als Wert für die Teiltransparenz angegeben. Der Wertebereich liegt zwischen 0 (komplett durchsichtig) und 1 (komplett undurchsichtig, Voreinstellung). Werte jenseits dieses Bereiches werden vor der Präsentation auf den nächstgelegenen Wert aus dem Bereich 0 bis 1 gesetzt. Dies ist dann auch der berechnete Wert.

Weicht der Wert von 1 ab, gibt es Sonderregeln für die Verwendung mit der Eigenschaft z-index. Elemente von außerhalb können nicht per z-index so angeordnet werden, dass sie hinsichtlich der z-index-Reihenfolge zwischen zwei Elementen angeordnet werden, auf welche gemeinsam die Eigenschaft opacity mit einem Wert ungleich 1 wirkt.

Beispiel:

.knopf {
display: block;
width: 2em;
height: 2em;
background: #006;
color: white;
opacity: .4
}
.knopf:hover {
background: #00a;
opacity: .8
}

Dieser 'Knopf' ist also teil-durchsichtig. Sofern er auf Strukturen des Elternelementes einschließlich dem Hintergrund liegt, schimmert der Hintergrund also sowohl durch den dunkelblauen Hintergrund also auch den weißen Inhalt. Beim Drüberfahren mit einem Zeigergerät wird solch ein 'Knopf' dann etwas weniger transparent und heller. Ähnliche Strukturen lassen sich auch verwenden, um bei Bedarf Zusatzinformationen einzublenden und besser sichtbar zu machen. Mit den in Arbeit befindlichen CSS-Modulen für Übergänge und zur Animation lassen sich dann natürlich solche Änderungen auch kontinuierlich durchführen. In SVG gehen solche Animationen schon lange und eignen sich gut, um die Ergonomie und Übersichtlichkeit von interaktiven Projekten zu verbessern. Durch Änderung der Transparenz läßt sich die Aufmerksamkeit des Nutzers auf gerade relevante Bereiche eines Projektes lenken, während momentan gerade nicht so relevante Bereiche nahezu transparent gehalten werden können, bis der Nutzer seine Aufmerksamkeit darauf lenkt. Die Information selbst bleibt also immer komplett präsent, lediglich die Gewichtung der Aufmerksamkeit kann mit der Eigenschaft elegant verschoben werden.

Weil sowohl Hintergrund als auch Inhalt teiltransparent werden, eignet sich die Eigenschaft allerdings schlecht, um nur einen teiltransparenten Hintergrund zu erzeugen. Bei Farben verwendet man dann besser Farbangaben mit Angabe des Alpha-Kanals oder bei Bildern solche, die selbst teiltransparent sind (zum Beispiel bei PNG oder SVG einstellbar - insbesondere kann man in einem SVG-Dokument als Hintergrund auch ein Bild im Format JFIF/JPEG unterbringen, um dieses teiltransparent zu machen, welches allein diese Möglichkeit nicht hat).

Verweise

• CSS Farb-Spezifikation auf w3.org
• Farbangaben auf selfhtml.org
• Farbtabelle einiger Schattierungen mit Farbfächer

Werkzeuge (Auszug)

Editoren Windows

• Topstyle
• Style Master
• Notepad++ (ein sehr schlanker Editor, der für sehr viele Sprachen ein Syntax-Highlighting mitbringt)
• PSPad mit CSS-Code Strukturierung und Einbindung von Topstyle
• ConTEXT

Editoren MAC

• Style Master
• CSSEdit
• CODA

Editoren Linux/UNIX

• gedit (GNOME)
• Geany (GTK+/GNOME)
• KWrite (KDE)
• Kate (KDE)
• BlueFish (GTK+ und Windows)

CSS Tools MAC

• Xylescope Zeigt die CSS-Formatierung auf verschiedene Arten an

CSS Browser Tools

• Firebug - Firefoxextension
• EditCSS - Firefox Extension
• Web Developer - Firefox Extension
• CSSViewer - Firefox Extension
• Ultimate CSS Gradient Generator Online-Editor für Browser übergreifende Farbverläufe

CSS Optimierer

• CSSTidy

Warum überhaupt CSS/Web Standards?

• Artikel "The business value of web standards" erläutert übersichtlich, wieso Web Standards (und damit intensive CSS-Nutzung) sinnvoll sind und sich auch bezahlt machen. WWM in XHTML erklärt, wieso für Firmen die Beachtung von Web Standards sinnvoll ist.
• "Developing With Web Standards" ist eine gute einführende Lektüre.

Referenzen und Tutorials

• Die W3C-Seite zu CSS ist die Referenz. Sie bietet u.a. die Recommendation vom 12. Mai 1998 zur CSS2 Spezifikation auf englisch und deutsch.
• Weiterhin gibt es den SelfHTML CSS-Bereich.
• www.css4you.de - eine sehr übersichtliche Referenz.
• How To write Efficient CSS erklärt kompakte Schreibweise z.B. für font oder border.

Websites rund um CSS

• CSS-Technik – Seite mit CSS Ressourcen, Skripten und Tutorials.
• Bei A List Apart werden neue Techniken erklärt (in englisch).
• Der Ultimate CSS Gradient Generator hilft bei der Erstellung Browser übergreifender Farbverläufe für Hintergründe in CSS.

CSS-Kompatibilität und Fehlerbehebung

• Der CSS-Spickzettel und [1] erläutern typische Fehler beim Erstellen von Style-Sheets.
• Curing Float Drops and Wraps konzentriert sich auf das Beheben von Problemen mit floats.
• CSS2 Kompatibilitäts-Tests und -Übersicht und RichInStyle listen CSS-Bugs von einzelnen Browsern. Wichtig, wenn man sie umgehen will.
• CanIUse.com ist eine gute Übersicht zur Browserunterstützung für neu eingeführte Eigenschaften in HTML5, CSS3 und SVG.

CSS-Experimente, Anregungen

• Der csszengarden ist eine Seite, die jeden einlädt, sein eigenes CSS für eine gegebene HTML-Vorlage zu erstellen. Viele Webdesigner sind dieser Aufforderung nachgekommen, so dass eine Sammlung exzellenter CSS-Designs entstanden ist. Ein schönes Beispiel für die Flexibilität von CSS.
• The Man in Blue zeigt auf http://www.themaninblue.com/experiment/InForm/index.htm, wie Formulare prinzipiell angeordnet werden können. Sinnvoll, die einzelnen Stile kurz anzuschauen und die Wirkung zu merken, dann das eigene Formular zu bauen.
• http://www.moronicbajebus.com/playground/cssplay/ bietet CSS-Experimente und -Vorlagen
• CSS Destroy beinhaltet CSS-Experimente, die meistens aus einer interessanten Idee hervorgehen, jedoch von den meisten Browsern "zerstört" (nicht wie gewünscht gerendert) werden.
• Eric A. Meyer ist durch seine CSS-Experimente bekannt geworden. Beispiele seiner Arbeit und mehr finden sich unter meyerweb.com/eric/css/.