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 noch langweilig schwarz-weiß aus. Mit CSS wird die Seite viel angenehmer zu lesen.

Viel Spaß beim Lernen und Ausprobieren!

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 SVG) eingesetzt. CSS soll dabei festlegen, wie ein besonders ausgezeichneter Inhalt dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als Gruppe erkannt werden können. Man zeichnet im Dokument also die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird.

Um ein HTML-Dokument ansprechend zu gestalten, benötigt man CSS. Zwar ist es ebenfalls mit HTML möglich, Farben, verschiedene Schriftarten, Hintergrundbilder und ähnliches zu verwenden. Dieser Missbrauch einer Auszeichnungssprache für Visualisierungszwecke befindet sich glücklicherweise seit einigen Jahren wieder auf dem Rückzug: die Trennung zwischen Inhalt (HTML) und Darstellung (CSS) wird wieder stärker betont.

Die Verwendung von CSS bietet zudem eine Reihe von Vorteilen. Zum Beispiel erleichtert es CSS, eine aus vielen HTML-Dokumenten bestehende Website einheitlich zu gestalten. Die Design-Anweisungen werden in diesem Fall in einer separaten CSS-Datei definiert und die HTML-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 HTML-Dokument Änderungen vornehmen zu müssen.

Für die professionelle Webseitengestaltung noch wichtiger ist der folgende Punkt: CSS ermöglicht es auch, die Darstellung dem jeweiligen Browser oder dem Ausgabemedium (zum Beispiel Ausdrucke, Projektion, Sprache usw.) entsprechend anzupassen. Das ist nützlich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen oder um für ein Anzeigemedium wie einen PDA oder ein Mobiltelefon mit geringerer Auflösung die Anzeige zu optimieren (geringere Seitenbreite und -höhe).

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

Cascading Style Sheets sind eine wichtige Entwicklung im Zuge der Bemühungen um ein Semantic Web, da es bei konsequenter Anwendung die komplette Trennung von Inhalten und Aussehen ermöglicht.

CSS gilt heutzutage als die Standard-Stylesheetsprache für das Web.

Um CSS anzuwenden, sind keine speziellen Programme nötig. Man kann ein Stylesheet mit jedem beliebigen Texteditor erstellen (z.B. Notepad unter Windows oder vi unter Linux/Unix) und es dann anschließend in die gewünschten Dokumente einbinden. Wenn ausreichende HTML-Kenntnisse vorhanden sind, ist die Benutzung von CSS sehr schnell, d.h. in wenigen Stunden oder Tagen, zu erlernen. Der Einarbeitungsaufwand ist also deutlich geringer als bei anderen weiterführenden Werkzeugen für Webdesigner.

Ein Nachteil ist die Client-seitige Verarbeitung: der Webdesigner und der Anwender sind darauf angewiesen, dass die Browserhersteller die Spezifikationen richtig in ihren Browsern implementieren.

Einige Browser-Hersteller entwickeln ihre eigenen proprietären Erweiterungen für CSS, die dann ausschließlich auf dem entsprechenden Browser sichtbar werden. Ein Beispiel sind Überblendeffekte, die nur mit dem Internet Explorer funktionieren.

Das Konzept der Cascading Style Sheets (CSS) wurde 1994 von Håkon Wium Lie vorgeschlagen. Bert Bos arbeitete zu dieser Zeit an der Implementation eines Browsers namens Argo, der seine eigene Stylesheet-Sprache 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 Stylesheets 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, u.a. 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 veröffentlicht und seit 2004 durch CSS Level 2 revision 1 (CSS 2.1) ersetzt. Diese Version bereinigte Unstimmigkeiten und es entfielen diejenigen Teiltechniken, die vorher in verschiedenen Browsern nicht korrekt implementiert wurden. CSS 2.1 brachte selbst keine grundlegend neuen Fähigkeiten mit sich. CSS 2.1 wurde nach vielen Überarbeitungen am 07.06.2011 als endgültige Empfehlung vom W3C veröffentlicht und wird derzeit von allen modernen Rendering-Engines zum größten Teil umgesetzt.

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

Eigenschaften und Werte

Eine CSS-Eigenschaft (property) bestimmt, was in der Darstellung angepasst werden soll. Ein Wert (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. Siehe dazu das Kapitel Kaskadierung, Spezifität und Vererbung.

	Unterstützung von inherit im Internet Explorer Der Internet Explorer bis Version 7 unterstützt den Wert inherit nur für die Eigenschaften direction und visibility.

Selektoren

Ein Selektor hat die Aufgabe, das gewünschte Element auszuwählen (selektieren). Die zu einem Selektor passende CSS-Notation 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 als blau festgelegt, was unter anderem dazu führt, dass der darin notierte Text blau dargestellt wird.

Eindeutige Kennzeichnung

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. Eine 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.

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. Dies ist hilfreich, um immer wiederkehrende Formatierungen anzuwenden, ohne diese auf alle gleichartigen Elemente auszudehnen.

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. 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}

Dies weist allen Elementen eine blaue Farbe zu.

Attribut-Selektoren

Elemente können auch anhand anderer Attribute als id oder class ausgewählt werden. Dazu dienen die Attribut-Selektoren, welche in eckige Klammern gefasst werden.

[href] – Attributname

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

[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".

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 vorkommt. 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 Attribut lang mit "de" beginnt, gefolgt von einem Bindestrich und einem beliebigem Teil, also zum Beispiel <p lang="de-DE"> oder <p lang="de-CH">.

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 alle externen Verweise einer Seite.

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

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

[class*="warn"] – Operator für Wert, die diese Zeichenkette enthalten

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

Pseudo-Klassen und Pseudo-Elemente

CSS kann darüber hinaus bestimmte Bereiche eines Dokuments dynamisch gestalten, ohne dass dafür eine Änderung im Quelltext des Dokuments 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 Pseudo-Klassen und Pseudo-Elemente):

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 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 Browser) jedoch von rechts nach links. Selektoren sollten so allgemein wie möglich gehalten werden, um die Auswertung durch den Browser 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">Ein Zitat</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

…

Geschwister, direkt nachfolgend

…

Geschwister, alle

…

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.

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

Syntax

/* Kommentar */

Wohin gehört ein CSS?

Die CSS-Definitionen 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, da man die (X)HTML-Datei nicht unnötig aufblähen und vor allem die CSS-Definitionen auch von weiteren (X)HTML-Seiten bequem einbinden möchte.

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

Vermutlich haben Sie schon eine Idee, wie Ihre künftige Website aussehen sollte. Wahrscheinlich wird diese neben einem Präsentationsteil auch einen reinen Navigationsteil haben. Wenn nun jemand Ihre Website besucht und 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, z.B. "elefant.css" und "gruenekuh.css". 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 Deklaration des Zeichensatzes und Ihre Definition der grafischen Eigenschaften mindestens eines HTML-Elementes. Spezielle Tags (<...>) sind nicht erforderlich.

In die erste Zeile Ihrer CSS-Dateien kommt die Definition, welchen Zeichensatz Sie in diesem Dokument verwenden:

@charset "utf-8";

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. Meine CSS-Headers sehen meist etwa wie folgt aus:

@charset "utf-8";
 
/*
master stylesheet for www.boeni.com
(c) 2007  Stephan Böni, CH-Basel
 
version history:
1.0.0  22.06.2007  sb  initial release
1.0.1  25.06.2007  sb  fix menubar height (firefox)
1.1.0  01.07.2007  sb  new background image and smoother colors
*/
 
/*** global defaults ***/
body {
  color:       #ffffff;
  background:  #000000;
}

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 "global defaults" sammle ich jene Definitionen, 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 einen Website zu erstellen. Um es auf einen Nenner zu bringen: Mit XHTML werden Sie vermutlich richtig liegen. Mehr dazu finden Sie im Buch Websiteentwicklung: XHTML.

Wenn wir nachfolgend von HTML reden, gilt dies natürlich immer auch für XHTML, welches der Nachfolgestandard von HTML ist. 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". Siehe dazu Websiteentwicklung:_XHTML:_Erste_Seite.

Einzelnachweise

CSS-Anweisungen lassen sich direkt in ein HTML/XHTML-Dokument einbauen (auch Inline-Styles genannt) oder aus externen Stylesheets des Typs text/css einbinden. Die beiden Methoden lassen sich auch kombinieren. Meistens hat man eine größere Anzahl von HTML-Dateien, die gleich „gestylt“ werden sollen, so ist ein externes Stylesheet, das in die HTML-Dateien eingebunden wird, vorzuziehen, da man die CSS-Regeln nur einmal formulieren muss. Auch wird so eine Änderung im externen Stylesheet direkt auf allen HTML Seiten ersichtlich.

CSS-Regeln im (X)HTML-Dokument

Global geltende Regeln werden im Kopf der HTML-Datei (zwischen <head></head>) eingebaut. Sie werden nach dem HTML-Tag <style> formuliert und enden wieder mit dem abschließenden Tag </style>.

Eine andere Möglichkeit ist, die CSS-Regeln direkt im betreffenden HTML-Tag als style-Attributwerte zwischen den Anführungszeichen zu formulieren, z.B.:

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

Einbinden von externen CSS-Dateien in (X)HTML

Das Einbinden von externen CSS-Dateien geschieht im Kopf (zwischen <head></head>) der HTML-Datei. Hierbei gibt es zwei Möglichkeiten:

• Mit dem link-Element für XHTML:

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

Anmerkung: "stylesheet" im rel-Attribut ist ein vordefinierter Begriff, mit dem Sie festlegen, dass diese CSS-Datei für dieses HTML-Dokument das Standard-Stylesheet sein soll. Eine andere mögliche Option wäre rel="alternate stylesheet".

Anmerkung: der Slash (/) am Ende des <link>-Tags muss nur bei XHTML geschrieben werden.

• Mit dem style-Element und @import:

<style type="text/css">
/* <![CDATA[ */
  @import "screen.css";
/* ]]> */
</style>

Inzwischen ist die erste Variante gebräuchlicher.

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.html":

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="print.css" type="text/css" media="print" />
    <title>Meine erste Homepage</title>
  </head>
  <body>
    <p>Hallo Welt</p>
  </body>
</html>

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

Falls Sie unter Linux arbeiten, empfehle ich Ihnen, die print.css mit der screen.css zu verlinken, so lange Sie keine separate print.css nutzen, den Eintrag im HTML-Code aber schon vorbereitet haben möchten.

ln screen.css print.css

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

Außerdem sollten Sie (der IE stellt die Website auch bei Nichtbeachten dieser Regel korrekt dar), wenn Sie für die screen-Version zwei CSS-Dokumente erstellt haben, auch zwei print-Dokumente mit der gleichen Aufteilung erstellen.

Box-Eigenschaften

Das Box-Modell in CSS

CSS verwendet ein sogenanntes Box-Modell (engl. box model), welches den Aufbau einer Webseite in rechteckige Kästen aufteilt, die wiederum aus in einander verschachtelte Kästen für die Randverhältnisse dieses Kastens bestehen. Dazu zählen der Außenabstand (margin), der Rahmen (border), der Innenabstand (padding) und der Inhalt (beispielsweise ein Text). Für alle diese Bestandteile können unterschiedliche Maße definiert werden. Der Vorteil des Boxmodells liegt in der Möglichkeit, alle Elemente genau bestimmen zu können, in Bezug auf Maße, 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 Definitionen im Uhrzeigersinn aufgelistet, beginnend mit dem Wert für oben.

Der Inhalt ist im einfachsten Fall der Text einer Seite. Dieser hat seinen Platz im Mittelpunkt der Box, um ihn werden die folgende Elemente "herumgebaut".

Ausmaße einer Box

Wenn für eine Box Maßangaben für die Höhe und/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 immer ü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

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. Negative Werte sind hier nicht möglich.

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 Initialwert beträgt 0. Falls also padding nicht definiert wird und von keinem höher liegenden Element geerbt wird, gilt padding: 0;.

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.

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

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

Ein Absatz mit buntem Rahmen.

Sie können also die drei Eigenschaften Breite (width), Stil (style) und Farbe (color) separat definieren.

Die Breite der Line kann statt mit einer Maßeinheit auch mit thin (dünn), medium (mittel) oder thick (dick) definiert werden. Je nach Browser erhalten Sie aber sehr abenteuerliche Resultate.

Den Stil bezeichnet die Art der Rahmenlinie. Die Werte hidden (unsichtbar), dotted (gepunktet), dashed (gestrichelt), solid (durchgezogen), double (doppelt durchgezogen) sind selbsterklärend. Dazu kommen noch die etwas ungewöhnlicheren Werte groove (Nut, wirkt wie eine eingedrückte Linie), ridge (Grat, das Gegenteil von groove), inset (wirkt wie wenn die Box eindrückt ist) und outset (wirkt wie wenn's aus der eigedrückten Box wieder hieraus kommt; das Gegenteil von inset). Je nach Browser wird die definierte Rahmenfarbe hier passend geändert oder ignoriert und durch Grauschattierungen ersetzt. Schließlich gibt's noch den Stil-Wert none (kein Rahmen), welcher wie hidden wirkt, aber die Rahmenbreite auf 0 zurücksetzt. Verwenden Sie dies also besser nicht, da es nur verwirrt.

Die verschiedene Stile bei einer Stärke von drei Pixeln (border: 3px STIL #fc9;):

solid

double

dotted

dashed

groove

ridge

inset

outset

Bei den Farben gelten die für CSS üblichen Regeln. Siehe dazu Kapitel: Farben. Zudem dürfen Sie auch den Wert transparent (durchsichtig) verwenden.

Zusammenfallende Rahmen (border-collapse)

Dies gilt nur für Boxen, welche als Tabelle definiert sind (display: table; oder display: inline-table;). Wenn zwei Boxen aneinander angrenzen, kann definiert werden, ob sie unabhängig bleiben oder die Rahmen ineinander kollabieren sollen.

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

Der Standard-Wert ist separate und diese Einstellung gilt prioritär. Das heißt, erst wenn bei beiden der zwei sich angrenzende Boxen border-collapse: collapse gesetzt wurde, verschmelzen die Rahmen.1

Rahmen – CSS3

Neu ist die Möglichkeit von abgerundeten Ecken. 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: .5em 2em 1em 1.5em;

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.

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;
}

Zusammenfallende Ränder (collapsing margins)

CSS-Spezifikation des W3C: „In dieser Spezifikation bedeutet der Ausdruck zusammenfallende Ränder, dass benachbarte Ränder (die durch keine Polsterungs- oder Rahmenbereiche voneinander getrennt sind) von zwei oder mehr Boxen (die nebeneinander liegen oder verschachtelt sein können) so zusammenfallen können, dass sie einen einzigen Rand bilden.
In CSS2 kann es nicht vorkommen, dass horizontale Ränder zusammenfallen.“

Quelle: http://www.edition-w3.de/TR/1998/REC-CSS2-19980512/kap08.html#heading-8.3.1

Anders ausgedrückt bedeutet dies, dass wenn sich die Ränder zweier aufeinander folgender Boxen berühren, lediglich der Rand des Elements mit dem größeren Rand berücksichtigt wird. Der kleinere Rand entfällt.

Layout-Eigenschaften

Das folgende Beispiel macht aus einem a-Tag eine Box:

a {
  display:  block;
  float:    right;
}

Mehrere solcherart hintereinander definierte Boxen werden von rechts nach links fließend dargestellt. Man beachte, dass ohne die Deklaration von float die Boxen untereinander angeordnet werden, also von oben nach unten. Um die Box im üblichen Textfluss zu halten, sollten Sie sie wie folgt definieren:

a {
  display:  inline-block;
}

Nur wenn display auf block oder inline-block steht, gelten alle der nachfolgend aufgeführten Eigenschaften. Andernfalls wird zumindest die Definition eines Außenrandes ignoriert.

Da dem div-Tag die block-Eigenschaft standardmäßig zugewiesen ist, wird es gerne für Box-Definitionen verwendet. Selbstverständlich ist die Größe einer Box ebenfalls definierbar:

div {
  width:     200px;
  height:    200px;
  overflow:  auto;
}

Diese Box ist 200 Pixel breit und hoch. Falls sie mehr Text enthalten sollte, als sie groß ist, werden Scrollbalken dargestellt. Ohne die overflow-Definition würde die Box sonst je nach Browser entsprechend vergrößert oder deren Inhalt einfach abgeschnitten werden.

Layouts in CSS werden über die folgenden Eigenschaften gestaltet:

Anzeigeart der Box – display

Diese Eigenschaft legt fest, ob ein HTML-Element als Block- oder inzeiliges Element dargestellt werden soll. Die ursprünglichen Eigenschaften der HTML-Elemente lassen sich hiermit verändern.

Übersicht aller Schriftformatierungen

Element	Beschreibung	Mögliche Einstellungen	Verwendung/ Beispiel
font-family	Einstellung der Schriftart	alle Schriftarten	Als Attribut wird der Name der Schriftart verwendet. Dabei sollten immer mehrere Schriftarten (durch Kommata abgetrennt) angegeben werden, da ja nicht jeder alle möglichen Schriftarten auf dem Rechner hat (Besonders bei Linux/Unix ist das der Fall da dort die WebBrowser zum Teil eigene CSS implementieren und zudem noch der Xfont Server mitspielen muss). Als letzte sollte "Arial", "sans-serif", "serif" oder "verdana" angegeben werden, weil dies eine Standardschriftart bzw. generische Schriftfamilien sind, die unter fast allen Betriebssysteme vorhanden sind. Bsp.: font-family:'Times New Roman',Arial,sans-serif; => Anwendungsbeispiel Auf GROSS- und klein- Schreibung muss nicht zwingend geachtet werden da die CSS- bzw. HTML-Parser in der Regel nichts bemängeln (dies gilt auch für andere CSS).
font-size	Einstellung der Schriftgröße	numerische Angaben oder xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger	Diese Ausdrücke sind recht ungenau. Sie beziehen sich auf die auf dem Rechner angegebene Standardschriftgröße. Der Browser verändert sie entsprechend der Bezeichnung (bspw. "smaller"=kleiner als Standard) bzw. sucht die für den jeweiligen Begriff vorgesehenen Einstellungen heraus. Bsp.: font-size:larger; oder font-size:24pt; oder font-size:50% => Anwendungsbeispiel oder Anwendungsbeispiel oder Anwendungsbeispiel
font-weight	Einstellung des "Schriftgewichtes"	normal, bold (=fett), bolder (=fetter), lighter (=dünner); 100 - 900 (verschiedene Abstufungen; 700 = bold)	"Schriftgewicht" entspricht einfach nur der Fette des Textes, d.h., ob der Text fett geschrieben ist oder nicht. Dabei gilt es zu beachten, dass nicht alle Schriftarten alle Ausdrücke "verstehen", weshalb eigentlich nur auf bold oder normal zurückgegriffen werden sollte. Bsp.: font-weight:bold; => Anwendungsbeispiel
font-style	Einstellung des Schriftstils	normal, italic, oblique	italic und oblique stellen die Schrift kursiv dar. (Es sollte auf italic zurückgegriffen werden.) Bsp.: 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	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)	Bei den meisten wird das Beispiel nichts bringen, da diese Eigenschaften weithin noch nicht in den Browsern implementiert ist. Bsp.: font-stretch:extra-expanded; oder font-stretch:condensed; => Anwendungsbeispiel oder => Anwendungsbeispiel
font	Zusammenfassung einiger Font-Elemente	alle Einstellungen der Einzelelemente	Hier werden alle Eigenschaften aneinander gereiht. Die Reihenfolge der Anordnung ist egal. Dabei ist aber darauf zu achten, dass die verschiedenen Eigenschaften voneinander durch ein Leerzeichen getrennt sind. Bsp.: font:small-caps 16pt bold; => Anwendungsbeispiel

Mit Hilfe von font-family lassen sich verschiedene Schriftarten verwenden.

Schriftarten

In CSS werden sogenannte Schriftartfamilien verwendet. Diese Schriftartfamilien haben jeweils Schriftarten.

So hat die Schriftartfamilie Arial die Schriftarten: Arial Bold, Arial Italic oder Arial Bold Italic

Häufig verwendete Schriftartfamilien sind:

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

Kategorien der Schriftartfamilien

Schriftartfamilien werden in fünf Kategorien eingeteilt.

• 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 proportionale Schriftarten. D.h. 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.

Anwenden von Schriftarten

Mit CSS muss man einem Text keine bestimmte Schriftart zuweisen. Es ist möglich dem Browser bestimmte Regeln für die Verwendung einer Schriftart zu diktieren ohne eine Schriftart zu bestimmen. Dies ist dann vielversprechend, wenn man davon ausgeht, dass dem Browser nicht alle Schriftarten zur Verfügung stehen.

Beispiel:

font-family: Monospace;

Ein unkonfigurierter Browser würde Courier als Schriftart verwenden. Steht ihm Courier nicht zur Verfügung, nimmt er beispielsweise FreeMono. Dies verhindert eine unerwünschte Darstellung des Textes.

Die Verwendung einer bestimmten Schriftart würde so aussehen:

Beispiel:

font-family: "Times New Roman";

Besonderheit

Nicht jeder Browser unterstützt alle Schriftarten, daher ist es möglich, mehrere Schriftarten zu definieren. Dazu wird zunächst die bevorzugte Schriftart, dann durch ein Komma getrennt die zweite Schriftart angegeben. Diese wird dann verwendet, wenn der Browser die erste nicht kennt.

font-family: Arial, Verdana;

Es lassen sich auch mehr als 2 Schriftarten definieren. Die erste Schriftart, die der Browser kennt, kommt zum Einsatz.

Es ist auch möglich, zunächst eine vorgegebene Schriftart zu nutzen. Ist dem Browser diese Schriftart nicht bekannt, so soll er eine Schriftart der gleichen Kategorie nutzen.

font-family: Arial, sans-serif;

Mit Hilfe von font-size lässt sich die Schriftgröße eines Textes definieren.

absolute Größenangaben

Es wird empfohlen (und für amtliche Seiten in Deutschland per Gesetz vorgegeben) dass für Schriftgrößen relative Maßangaben verwendet werden sollen (siehe unten) um den Nutzern das Einstellen der Schriftgröße zu ermöglichen.

numerische Größenangaben

Bei der numerischen Größenangabe wird ein fester Wert als Größe angegeben. Wie nahezu alle Werte in CSS benötigt auch diese Angabe zwingend eine Maßeinheit.

p {
  font-size: 12px;
}
/* oder */
p {
  font-size: 10pt;
}

Angaben über Bezeichner

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

p {
  font-size: small;
}

relative Größenangaben

Relative Größenangaben stehen immer in Relation zum Elternelement.

numerische Größenangaben

h1 {
  font-size: 2em;
}
/* oder */
h1 {
  font-size: 200%;
}

Angaben über Bezeichner

• smaller für kleiner als im Elternelement.
• larger für größer als im Elternelement.

p {
  font-size: smaller;
}

Mit der Eigenschaft font-weight kann die Schriftstärke beeinflusst werden. Hierbei können neun Schriftstärkenklassen festgelegt werden. Die meisten verbreiteten Schriftarten gibt es jedoch nur in den zwei Schriftstärken normal und fett. Wenn die benutzte Schriftart in der angegebenen Stärke nicht verfügbar ist, wird durch CSS ein ähnlicher, passender Wert ausgewählt.

Mögliche Angaben sind die neun numerischen Werte 100-900, je höher die Nummer desto dunkler, bzw. fetter die Schrift. Des weiteren können folgende Schlüsselwörter verwendet werden:

• normal ist ein Synonym für 400, für normale Schriftstärke
• bold ist ein Synonym für 700, für fette Schrift
• bolder wählt eine Schriftstärke aus, die dunkler/fetter ist, als die geerbte Schriftstärke
• lighter wählt eine Schriftstärke aus, die heller/dünner ist, als die geerbte Schriftstärke

p {
  font-weight: bolder;
}

Ein fett gedruckter Text.

Mit Hilfe der Eigenschaft font-style lässt sich die Schriftlage eines Textes bestimmen. Die Schriftlage oder Neigung gibt an, ob eine Schrift aufrecht steht oder geneigt ist. Eine mit der Leserichtung schräg gestellte Schrift heißt Kursive.

Mögliche Werte sind:

• normal für eine aufrechte Schrift
• italic Kursiv, für echte kursive Schriften, dargestellt über einen eigenen Schriftschnitt – existiert kein solcher Schriftschnitt wird oblique verwendet
• oblique Schräg, für unechte kursive Schrift, welche nachträglich während der Darstellung verzerrt wird und dadurch unter Umständen schlechter lesbar ist

Mit Hilfe der Eigenschaft font-variant lässt sich eine Schrift in Kapitälchen (bestehend aus den Glyphen für Großbuchstaben in unterschiedlichen Höhen) anzeigen. Ist keine Kapitälchenvariante der verwendeten Schriftart vorhanden, kann CSS normale Großbuchstaben in kleinerer Darstellung nutzen.

Mögliche Werte sind:

• normal für eine normale Schrift
• small-caps für Kapitälchen

p {
  font-variant: small-caps;
}

Dies gibt den Text in Kapitälchen wieder.

Die Eigenschaft font-stretch definiert die Ausdehnung einer Schriftart in horizontaler Richtung. Hierbei werden die einzelnen Glyphen meist gedehnt dargestellt. Diese Eigenschaft gab es bereits in CSS2, wurde jedoch in CSS2.1 gestrichen und wird mit dem CSS3 Font-Modul wieder eingeführt. Die Browserunterstützung ist derzeit (2011) noch wenig verbreitet.

Mögliche Werte sind:

• normal für normale Textausdehnung
• 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

p {
  font-stretch: expanded;
}

Dieser Text wird gedehnt dargestellt.

Übersicht aller Textformatierungen

Element	Beschreibung	Mögliche Werte
letter-spacing	Einstellung des Abstandes zwischen den Buchstaben und Zeichen.	normal numerische Angabe
line-height	Einstellung der Zeilenhöhe	numerische Angabe
text-align	Horizontale Textausrichtung	center right left justify
text-decoration	Einstellung der Textdekoration	underline overline line-through blink none
text-indent	Einstellung der Texteinrückung	numerische Angabe
text-shadow	Einstellung des Textschattens	Farbangabe numerische Angabe
text-transform	Variationen in der Groß- und Kleinschreibung	capitalize uppercase lowercase none
vertical-align	Vertikale Ausrichtung	numerische Angabe sub super baseline top bottom middle text-top text-bottom
white-space	Einstellung des Textumbruchs innerhalb eines Elements	normal pre nowrap
word-spacing	Einstellung des Abstandes zwischen den Worten	normal numerische Angabe

Mit der Eigenschaft text-align kann die Ausrichtung eines Textes oder anderer Inhalte (inzeilige Elemente) bestimmt werden.

Die möglichen Werte lauten:

• left linksbündig
• right rechtsbündig
• center mittig
• justify Blocksatz

p {
  text-align: center;
}

Dies zentriert den damit formatierten Text.

p {
  text-align: justify;
}

Dies gibt den damit formatierten Text im Blocksatz aus. Der Blocksatz ist bei Webseiten nicht zu empfehlen, da die Browser noch keine Silbentrennung vornehmen. Dadurch können relativ große und uneinheitliche Lücken zwischen den einzelnen Wörtern entstehen, was massiv zur Ermüdung des Lesers beiträgt.

Die Eigenschaft word-spacing bestimmt den Abstand zwischen den einzelnen Worten des Textes.

p {
  word-spacing: 1.5em;
}

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

Die Eigenschaft letter-spacing bestimmt den Abstand zwischen den einzelnen Buchstaben eines Textes.

p {
  letter-spacing: .2em;
}

Die Buchstaben des Textes werden in einem Abstand von 0.2em angezeigt.

p {
  letter-spacing: .5cm;
}

Die Buchstaben des Textes werden in einem Abstand von 0.5cm angezeigt.

Mit Hilfe der Eigenschaft text-decoration lassen sich Textdekorationen bestimmen.

Mögliche Werte sind:

• none keine Dekoration
• underline unterstrichen
• overline Linie über dem Text
• line-through durchstreichen

p {
  text-decoration: underline;
}

Dies unterstreicht den formatierten Text.

p {
  text-decoration: line-through;
}

Dies streicht den Text durch.

Oft werden Links 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

Mit Hilfe der Eigenschaft text-transform kann die Groß- und Kleinschreibung variiert werden.

Mögliche Werte sind:

• capitalize Kapitälchen
• uppercase Großbuchtaben.
• lowercase Kleinbuchstaben.

HTML:

<p>ein absatz mit durchgehender kleinschreibung.</p>

CSS:

p {
  text-transform: capitalize;
}

ein absatz mit durchgehender kleinschreibung.

p {
  text-transform: uppercase;
}

ein absatz mit durchgehender kleinschreibung.

In CSS können Farben für verschiedene Bestandteile eines Elements festgelegt werden: Text (color: …;), Hintergrund (background-color: …;) und Rahmen (border-color: …;). Farbdefinitionen können in CSS über einen Farbnamen oder einen numerischen Farbwert erfolgen.

Farbnamen

	Hinweis Der W3C CSS Standard ist nur auf 16 Farbnamen definiert. Ab CSS 3 werden jedoch alle SVG-Farbnamen offiziell verwendet werden dürfen.

Farbnamen in CSS 2.1

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

numerische Farbwerte

Die Notierung von numerischen Farbwerten kann in CSS in den Farbräumen RGB (Rot, Grün, Blau) und HSL (Farbton [hue], Sättigung [saturation], Helligkeit [lightness]) erfolgen. Die Angabe erfolgt als dezimaler- oder prozentualer Wert, bei RGB auch als Hexadezimalwert. Zusätzlich ist die Angabe eines Wertes für den Alpha-Kanal zur Darstellung der Transparenz möglich.

Hexadezimalwert

Ein hexadezimaler Farbwert stellt eine Farbe aus dem RGB-Farbraum dar, eingeleitet von einer Raute (#RRGGBB).

color: #ffff00;
color: #000000;
color: #ffffff;
color: #c0c0c0;

Wenn sich die Werte des jeweiligen RGB-Werts wiederholen, kann man auch eine verkürzte 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 falsche Definition! */

RGB-Wert

Hierbei werden die jeweiligen RGB-Werte in Abstufungen von 0 bis 255 (256 Farbwerte pro Farbe) oder als prozentuale Angabe definiert.

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

Hierbei wird zuerst der Farbwert in Grad angegeben (0-360°) und anschließend die beiden Werte für Sättigung und Helligkeit als prozentuale Angabe.

/* 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%);

Farbangaben mit Alpha-Wert

Für die Transparenz kann ein zusätzlicher vierter Wert für den Alpha-Kanal im Bereich zwischen 0 (vollkommen transparent) und 1 (deckend) als Kommazahl notiert werden. Hierbei werden außerdem die Schlüsselwörter rgb und hsl jeweils um ein a ergänzt. Die Angabe des Alpha-Kanals ist bei der Nutzung von hexadezimalen Werten nicht möglich.

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

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/.