In diesem Kapitel geht es um die Grundlagen von Style Sheets. Die Syntax von Style Sheet Angaben wird erklärt, und es wird gezeigt, auf welche verschiedenen Arten CSS in HTML-Seiten verwendet werden können.

In diesem Kapitel wird noch keine umfangreiche Übersicht über alle möglichen CSS-Befehle gegeben. Vielmehr wird anhand von Beispielen gezeigt, wie man ein paar wenige CSS-Angaben in einer Webseite verwendet. Als Basis dient unsere Webseite über das Thema Geld Anlegen.

Syntax von CSS-Befehlen

Die Syntax eines Style Sheet Befehls ähnelt der Syntax eines Attributes eines HTML-Tags. Einem HTML-Tag, zum Beispiel ein Textabsatz <p>, wird folgendermaßen ein Attribut zugewiesen: <p align="left">. Anderes Beispiel: <table border=5 width="600">

Die Syntax eines CSS-Befehls sieht ähnlich aus, jedoch mit einem kleinen Unterschied: Anstatt des "="-Zeichens steht ein Doppelpunkt. Ein CSS-Befehl sieht also so aus:

  Stil : Wert;

Am Ende eines CSS-Befehls steht immer ein Strichpunkt. Beispiele für CSS-Befehle:

color : blue;
width : 600px;
font-size : 12pt;
margin-top : 20px;
border : 1pt solid #000000;
font-family : 'Comic Sans MS', Tekton, Blueprint;

Man sieht, dass hinter dem Doppelpunkt mehrere verschiedene Angaben stehen können: Mit dem Stil border : 1pt solid #000000; wird ein ein Punkt dicker, durchgezogener, schwarzer Rahmen spezifiziert. Hinter dem Doppelpunkt können jedoch auch verschiedene Werte zur Auswahl stehen. Als Schriftart wird mit font-family : 'Comic Sans MS', Tekton, Blueprint; der Font Comic Sans MS favorisiert; ist dieser auf der jeweiligen Maschine nicht vorhanden, wird die Schriftart Tekton oder Blueprint verwendet.

Damit ist klar, wie eine Style Sheet Angabe aussieht, jedoch noch nicht, wie sie im Zusammenhang mit HTML verwendet und eingebaut wird. Die folgenden Unterkapitel beschäftigen sich mit der unterschiedlichen Verwendung von Style Sheet Angaben.

Formatierung einzelner HTML-Absätze

Style Sheet Befehle können in HTML ähnlich wie Attribute verwendet werden. Dazu schreibt man einfach in ein HTML-Tag noch eine CSS-Angabe hinein. Wie die Syntax eines CSS-Befehles aussieht haben wir im vorigen Unterkapitel gesehen. Um eine CSS-Angabe in ein HTML-Tag zu bringen, wird ein sogenanntes Universalattribut namens style verwendet. Die Verwendung eines CSS-Befehls sieht dann zum Beispiel so aus:

<h1 style="color: blue;">

Das Universalattribut style kann mehrere CSS-Befehle enthalten. Verwenden wir in unserem Beispiel folgende Style Sheet Angaben für die erste Überschrift:

<h1 style="font-family: 'Comic Sans MS'; font-style: italic; color: blue;
           text-align: center; margin-bottom: 50px;">Geld gut anlegen</h1>

Mit dem CSS-Befehl font-family: 'Comic Sans MS'; wählen wir für die Überschrift die Schriftart Comic Sans MS aus. Da der Name des Fonts Leerzeichen enthält, muss der Gesamtname in Hochkomma eingeschlossen werden. Hat der Browser diese Schriftart nicht zur Verfügung, wird die defaultmäßige Standardschriftart verwendet. Mit dem CSS-Kommando font-style: italic; setzen wir den Schriftstil für die Überschrift auf kursiv. Die CSS-Angabe color: blue; setzt die Schriftfarbe auf blau. Mit text-align: center; zentrieren wir die Überschrift horizontal auf der Seite. Schließlich setzen wir den Abstand zum nachfolgenden Text mit margin-bottom: 50px; auf 50 Pixel.

<p style="font-family: 'Comic Sans MS'; font-size: 12pt; color: red;
          text-align: justify;">

Für den ersten Textabsatz wählen wir als Schriftart ebenfalls Comic Sans MS, jedoch mit font-size: 12pt; eine Schriftgröße von 12 Punkten. Vergleicht man diesen Abschnitt mit den folgenden, erkennt man, dass für die übrigen Textabsätze eine Standardschriftgröße von 10 Punkten verwendet wird. Die Textfarbe wird für den ersten Absatz auf rot und die Textausrichtung auf Blocksatz gesetzt. Mit diesen Style Sheet Angaben für die Hauptüberschrift und den ersten Absatz sieht unser Dokument so aus.

Formatierung von kurzen Textabschnitten

Im vorigen Kapitel haben wir gesehen, wie man CSS-Befehle mit Hilfe des Universalattributes style auf einzelne HTML-Tags anwendet. Damit kann man komplette Überschriften, ganze Textabsätze, Tabellen, Tabellenzellen oder Bilder formatieren. Aber wie schafft man es, zum Beispiel nur ein Wort innerhalb einer Überschrift oder nur eine Zeile innerhalb eines Textabsatzes zu formatieren?

In HTML gibt es einige Tags wie <b>, die man wie hier mitten in einem Text einsetzen kann, um einzelne Wörter oder Textbereiche zu formatieren. Um entsprechende Textpassagen mit Style Sheet Angaben formatieren zu können, wurde das HTML-Tag span eingeführt. Mit dem Tag <span> leitet man eine zusammenhängende Textspanne sein, die erst beim konträren Tag </span> wieder endet. Da span nun ein HTML-Tag ist, kann man in das Tag Style Sheet Angaben einbauen wie im vorigen Unterkapitel beschrieben, also zum Beispiel:

<span style="color: blue;">

In unserem Beispiel möchte ich im ersten Absatz die 5 Wörter 2% Zinsen auf dem Sparbuch mittels CSS in blauer, fetter, 14 Punkte großer Schrift besonders hervorheben. Dazu setze ich den Textabschnitt in die <span> und </span> Tags und bringe die 3 CSS-Befehle mittels dem Universalattribut style ein:

<span style="color: blue; font-size: 14pt; font-weight: bold;">2% Zinsen
      auf dem Sparbuch</span>

Das Resultat sieht so aus. Anhand dieses Beispieles erkennt man sofort eine wichtige Eigenschaft von Styles: Der erste Textabschnitt wurde eigentlich schon als Ganzes im vorigen Kapitel mittels CSS formatiert. Mit den CSS-Befehlen im <span> Tag wird die ursprüngliche Formatierung (rot, 12 Punkte) nun überschrieben. CSS-Befehle können sich also quasi überlagern, wobei immer derjenige zählt, der am nächsten zum zu formatierenden Element dran ist.

Formatierung von mehreren Textabsätzen gleichzeitig

Im vorigen Unterkapitel haben wir mit dem <span> Tag innerhalb eines Absatzes eine Spanne definiert, auf die wir Style Sheet Befehle anwenden konnten. In diesem Kapitel definieren wir wieder einen Bereich innerhalb eines Dokumentes, auf den wir CSS anwenden können. Dieses Mal soll sich die Spanne jedoch über mehrere Textabschnitte hinweg strecken. Das <span> Tag darf nur innerhalb eines Absatzes, also zwischen <p> und </p>, zwischen <h1> und </h1> oder zwischen <td> und </td> eingesetzt werden.

Um mehrere Absätze zu einem Bereich zusammenzufassen gibt es in HTML das <div> Tag (engl. division), in das wiederum mit dem Universalattribut <style> CSS-Befehle eingefügt werden können. In unserem Beispiel möchte ich nun das komplette zweite Unterkapitel, bestehend aus der Überschrift, zwei Textabsätzen und einer Liste mit 6 Punkten, zu einem Bereich zusammenfassen und diesen speziell formatieren.

<div style="color: yellow; border-style: solid; border-width: 2px;
                                  padding: 10px; background-color: blue;">
    <h2>Kostenloses Girokonto</h2>
    <p>Das waren Zeiten, als ich für mein...</p>
    <p>Gott sei Dank sind diese Zeiten vorbei, zumindest für mich...</p>
    <ul>
      <li>absolut kostenfreies Girokonto</li>
      <li>einmal monatlich kostenfreier Kontoauszug per Post</li>
    </ul>
</div>

Wie man sieht, umgrenze ich sowohl die Überschrift als auch die beiden Absätze als auch die Liste mit den <div> und </div> Tags. Im einleitenden <div> Tag bringe ich sämtliche für den ganzen Bereich gültigen CSS-Befehle ein, als da wären: Schriftfarbe gelb, durchgezogener Rahmen (border-style: solid;), Rahmendicke 2 Pixel (border-width: 2px;), Abstand Inhalt zum Rahmen 10 Pixel (padding: 10px;) und Hintergrundfarbe blau (background-color: blue;). Mit diesen CSS-Angaben sieht unser Beispiel so aus.

Ist es nicht verblüffend, wie man so bequem auf einen Schlag ein komplettes Unterkapitel in eine Box mit blauem Hintergrund packen kann? Aber es geht noch viel besser!

Zentrale Formatierung einer ganzen Seite

Mit dem <div> Tag haben wir es geschafft, einen größeren Teil einer Seite mit einer einzigen CSS-Angabe zu formatieren. Kann man auch eine ganze Webseite zwischen <div> Tags setzen und so seitenglobale Formate definieren? Theoretisch ist dies möglich, jedoch bietet CSS eine viel elegantere Lösung für die zentrale Formatierung einer kompletten Webseite: die zentrale Definition von Styles im Kopfbereich der Seite.

Im Kopfbereich einer Seite, d.h. zwischen den Tags <head> und </head> kann an beliebiger Stelle eine Stil-Definition eingefügt werden. Dazu verwendet man das HTML-Tag <style>, dem man als Attribut type="text/css" hinzufügt. Damit sagt man dem Browser, dass ein zentrales CSS in Textform folgt. Das folgende Beispiel weist nun der Formatklasse Absatz (Tag <p>) die Schriftfarbe blau und die Schriftgröße 12 Punkt zu. Als Syntax ist erkennbar, dass die CSS-Definitionen in geschweiften Klammern durch Strichpunkte getrennt aufgelistet werden.

<head>
  <style type="text/css">
    p { color: blue;
        font-size: 12pt; }
  </style>
</head>

In unser Beispiel habe ich nun für die 5 HTML-Tags <body>, <p>, <h2>, <th> und <td> Styles definiert. Für den Dokumentkörper als Ganzes habe ich als Hintergrundfarbe ein helles grau (background-color: #eeeeee> gewählt und die Seitenränder mit 50/150/20/20 Pixeln festgelgt. Der normale Text (Tag <p>) soll die 10 Punkte Schrift Arial haben und zentriert sein; als Hintergrund für normale Textabsätze habe ich mich für ein mittleres grau (background-color: #cccccc;> entschieden.

Überschriften zweiten Grades (Tag <h2>) sollen allesamt unterstrichen sein (text-decoration: underline;). Tabellenköpfe (HTML-Tag <th>) sollen weiße Schrift auf blauem Hintergrund haben; normale Tabellenzellen (Tag <td>) sollen blaue Schrift auf hellblauem Hintergrund haben; der Text soll rechts ausgerichtet sein (text-align: right;).

<style type="text/css">
    body { margin-top: 50px;
           margin-bottom: 150px;
           margin-left: 20px;
           margin-right: 20px;
           background-color: #eeeeee;}
    p { font-family: 'Arial';
        font-size: 10pt;
        text-align: center;
        background-color: #cccccc;}
    h2 { text-decoration: underline; }
    th { background-color: blue;
         color: white; }
    td { background-color: lightblue;
         color: blue;
         text-align: right; }
</style>

Schauen wir uns unser Beispiel mit obigen zentralen Formaten an. Ob diese Auswahl von Formatierungen optisch gelungen ist, darüber kann man sich streiten, aber mit den krassen Farben kann man einige CSS-Eigenschaften erkennen. Deutlich erkennen kann man die Seitenränder und die Hintergrundfarbe für das Gesamt-Dokument. Unmittelbar feststellen kann man auch, dass das zweite Unterkapitel so bleibt, wie wir es mit Hilfe des <div> Tags formatiert haben. Woran liegt das? Erinnern wir uns: Die CSS-Befehle im <div> Tag liegen näher am zu formatierenden Bereich, also haben diese Vorrang vor den globalen Formaten.

Faszinierend ist doch, wie wir mit Hilfe von 5 Zeilen unsere Tabelle komplett neu formatiert haben. Hätte unser Dokument 10 weitere Tabellen, würden alle im selben Stil dargestellt werden. Man stellt auch fest, dass die Hauptüberschrift und der erste Textabsatz so geblieben sind, wir wir sie mit individuellen Styles in den jeweiligen HTML-Tags formatiert haben. Auch hier gilt die Regel: Was näher dran ist hat den Vorrang.

Formatierung von ganzen Web-Projekten

Im vorigen Unterkapitel haben wir gelernt, wie man mit zentralen Formaten eine komplette HTML-Seite stilisiert. Jetzt stellt sich abschließend die Frage, wie man vorgeht, wenn man eine komplette Internet-Seite mit Hunderten von Einzelseiten wie mein Projekt verwalten muss? Jetzt kommt der Höhepunkt der CSS-Lektüre: CSS sieht externe Formatvorlagen vor, die in jede beliebige Webseite eingebunden werden können.

Was heißt das? Ich erstelle eine Textdatei, die mit dem Suffix .css endet, also zum Beispiel Styles.css und schreibe sämtliche zentralen Formate entsprechend dem vorigen Unterkapitel in diese Datei. Diese Datei wird im Header einer HTML-Datei mit dem link Tag eingebunden und auf die Seite angewendet:

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

Da das link Tag nicht CSS-spezifisch ist sondern auch für andere Verbindungen (z.B. JavaScript) verwendet wird, muss dem Browser mit rel="stylesheet" mitgeteilt werden, dass es sich um ein Style Sheet handelt. Mit dem Attribut type="text/css" wird klar gemacht, dass es sich um ein CSS in Textform handelt; href="Styles.css" schließlich enthält den Pfad + Dateinamen des Style Sheets. Für unser Beispiel sieht die Style Sheet Datei gemäß dem vorigen Unterkapitel so aus. Man sieht, dass in der Datei nichts als die Format-Definitionen enthalten sind.

Erinnerst Du Dich, wie ich ganz am Anfang gesagt habe, dass ich mit einer kleinen Änderung die Hintergrundfarbe all meiner Hunderter von Seiten ändern kann? Wie das geht dürfte jetzt klar sein: Alle meine Seiten referenzieren eine einzige Style Sheet Datei, in der die Hintergrundfarbe festgelegt ist.

Erinnern wir uns nochmals an die Aufgabe von HTML und CSS, nämlich die Trennung von Inhalt und Layout. Bei Verwendung von Style Sheet Dateien erfolgt diese Trennung auch dateimäßig: Die HTML-Dateien enthalten die pure Seitenbeschreibung, während die CSS-Datei die Formatvorlagen definiert. Kann ein Browser nun die CSS-Datei nicht lesen, so stellt er die Seite in gewöhnlichem HTML dar, also trotzdem den kompletten Inhalt, wenn auch in seinem eigenen Layout und nicht im vom Webmaster gewünschten.

Kombination der verschiedenen Verfahren

Wer ein Webprojekt mit Hunderten von HTML-Seiten betreut, weiß es zu schätzen, wenn sämtliche Stile in einer einzigen zentralen Vorlagendatei festgelegt werden. Sollte man deshalb also individuelle Formatierungen einzelner Seiten, Bereiche, Absätze oder Spannen überhaupt nicht verwenden?

Die zentrale Formatvorlagen-Datei ist dazu da, sämtliche globalen CSS festzulegen. Auch macht es Sinn, in ihr das Format von Tabellen festzulegen, die nur auf jeder 20. Seite vorkommen. Jedoch macht es keinen Sinn, jede individuelle Formatierung in die zentrale Vorlagendatei aufzunehmen, da diese sonst schnell unübersichtlich wird. Wenn wie in unserem Beispiel um ein Kapitel einmalig ein Rahmen gelegt werden soll, macht man dies nach wie vor mit Hilfe des <div> Tags. Auch wenn eine Überschrift ausnahmsweise etwas kleiner dargestellt werden soll, z.B. wegen Platzmangels, macht man dies mit einer direkten Style-Zuweisung des entsprechenden <h1> Tags.

Natürlich spricht auch nichts dagegen, mehrere Vorlagendateien zu erstellen, um zum Beispiel für lustige Dinge wie Gags und Cartoons ganz andere Formatvorlagen zu verwenden als für ernste Dinge wie Tipps zum Geld Anlegen. Für solche unterschiedlichen Seiteninhalte innerhalb eines Webprojektes gibt es aber auch noch die sogenannten Unterklassen der Formatklassen, aber dazu später.

Erwähnen möchte ich auch nochmals das Prinzip der Priorität: Je näher ein CSS-Befehl am zu formatierenden Element dran ist, desto höher seine Priorität. So kann es durchaus vorkommen, dass man in einer globalen Style Sheet Datei als Schriftgröße 10 Punkte wählt, innerhalb eines <div> Bereiches jedoch eine 12 Punkte Schrift auswählt und dann speziell innerhalb einer kleinen Spanne (<span>) eine Hervorhebung mit einer 16 Punkte Schrift machen will. Ausschlaggebend ist der CSS-Befehl im <span> Tag, da dieser dem zu formatierenden Teil am nächsten ist.

Formatunterklassen

Mit den bisherigen Formatierungen haben wir immer Formatklassen gestylt. Eine Formatklasse ist ein HTML-Tag wie <p>, <h1> oder <td>. Jede dieser Formatklassen kann eine beliebige Zahl von Formatunterklassen besitzen. Was sind Unterklassen? Wer objektorientiert programmieren kann, ahnt schon, worauf ich hinaus will. Ich möchte Formatunterklassen wieder an unserem Beispiel zum Thema Geld Anlegen erklären.

In unserem Beispiel möchte ich nun am Ende jedes Unterkapitels eine kurze Zusammenfassung einfügen. Damit sich diese Zusammenfassung vom Text abhebt, möchte ich sie mit Schrift- und Textstyles besonders hervorheben. Natürlich könnte ich nun für jeden Abschnitt, der eine Zusammenfassung enthält, auf direktem Wege CSS-Befehle einbringen. Will ich im Nachhinein jedoch die Formatierung ändern, so müsste ich dies bei jedem Abschnitt, der eine Zusammenfassung enthält, einzeln tun. Aber wofür gibt es denn zentrale Formate mit Unterklassen? In unserem Beispiel definiere ich im Header (also zentral) eine Unterklasse des HTML-Tags <p> wie folgt:

    p.zusammenfassung { font-style: italic;
                        color: white;
                        background-color: black;
                        padding: 10px;
                      }

Die Schreibweise p.zusammenfassung bedeutet, dass ich eine Unterklasse mit dem Namen zusammenfassung der Formatklasse <p> bilde. Unterklasse bedeutet nun, dass alle Formatierungen der übergeordneten Klasse (also <p>) geerbt werden, dass jedoch noch weitere Formatierungen (nämlich 4) hinzukommen, als da wären: Kursivschrift, weißer Text auf blauem Hintergrund, Innenabstand 10 Pixel. Schriftfamilie, -größe, Absatzformat etc. werden alles vom <p> Tag geerbt. Wie verwende ich eine Unterklasse in unserem Beispiel? Mittels class="zusammenfassung" sage ich dem Browser, dass er die Unterklasse zusammenfassung des Tags <p> verwenden soll, und das sieht so aus:

   <p class="zusammenfassung">Fazit:...</p>

Unser Beispiel sieht damit so aus. Wenn ich jetzt sämtliche Zusammenfassungen lieber auf blauem Hintergrund hätte, muss ich nur das zentrale Format p.zusammenfassung entsprechend ändern. Habe ich diese Unterklasse gar in einer Styles.css Datei gespeichert, so kann ich damit sämtliche Zusammenfassungen in Hunderten von Webseiten auf einen Schlag neu formatieren.

Ich gehe noch einen Schritt weiter: In unserem Beispiel möchte ich jetzt wichtige Stellen besonders hervorheben. Dazu definiere ich eine allgemeine Formatunterklasse namens wichtig wie folgt:

    .wichtig { border-style: solid;
               border-width: 2px;
               border-color: blue;
               background-color: yellow;
               padding-left: 5px;
               padding-right: 5px;
             }

Wichtige Stellen sollen einen Rahmen der Dicke 2px in blauer Farbe bekommen. Der Hintergrund soll gelb sein; links und rechts soll ein Innenabstand von 5 Pixeln zum Rahmen sein. Was bedeutet nun der Begriff allgemeine Formatunterklasse? Im ersten Beispiel habe ich eine Unterklasse namens zusammenfassung der Hauptklasse <p> gebildet. Jetzt bilde ich eine Unterklasse namens wichtig, die ich jeder Hauptklasse zuordnen kann, also z.B. p.wichtig, h1.wichtig, li.wichtig oder td.wichtig. Mit dieser allgemeinen Unterklasse kann ich also sowohl wichtige Überschriften als auch wichtige Tabellen etc. definieren. Unser Beispiel hat jetzt einige wichtige Stellen bekommen.

Jetzt möchte ich noch Abschnitte mit dem Wort kostenlos besonders hervorheben. Auch dazu definiere ich eine allgemeine Formatunterklasse namens kostenlos:

    .kostenlos { border-style: solid;
                 border-width: 4px;
                 border-color: green;
                 background-color: lightgreen;
                 padding-left: 5px;
                 padding-right: 5px;
             }

Auch diese Formatunterklasse habe ich in unserem Beispiel mehrfach eingesetzt, sowohl für einzelne Wörter als auch für eine komplette Überschrift oder einen kompletten Listeneintrag. Damit wird unser Beispiel ganz schön bunt. Ich erwähne nochmals, dass eine Änderung der Unterklasse kostenlos sich auf sämtliche Bereiche auswirkt, die die Unterklasse kostenlos verwenden.

Frage: Wann definiere ich allgemeine Formatunterklassen und für welche Anwendung verwende ich Unterklassen zu speziellen Tags? Allgemeine Formatunterklassen verwende ich dann, wenn ich unterschiedliche Elemente einer Seite, z.B. Überschriften, Absätze, Tabellenelemente oder Listeneinträge, gleich formatieren möchte. Da eine Zusammenfassung immer in Form eines Textabsatzes geschrieben wird, macht es keinen Sinn, dafür ein allgemeines Format zu definieren, das ich auch einer Überschrift zuordnen könnte.

Selbstverständlich kann man auch noch Unterklassen von Unterklassen erstellen, also zum Beispiel p.wichtig.besonders oder p.wichtig.weniger.

Meine Webseiten sind komplett mit zentralen Formatvorlagen durchgestylt. So haben zum Beispiel sämtliche Tabellen der Befehlsübersicht eine gemeinsame Formatunterklasse. Da diese zentral definiert ist, kann ich die Darstellung sämtlicher Tabellen zentral steuern und ändern. Die Tabellen auf meiner Seite Geld Anlegen haben eine eigene Unterklasse, jedoch allesamt dieselbe, so dass ich auch das Aussehen all dieser Tabellen zentral beeinflussen kann.

Maßangaben und Farbangaben in Style Sheets

Maße und Größen können in Style Sheet Befehlen auf unterschiedliche Art angegeben werden. Bei Schriften, Absätzen und Abständen wird oftmals die Angabe in Punkt pt gemacht. Ein Punkt hat eine feste Größe von 1/72 Inch, d.h. 72 Punkte nebeneinander ergeben ein Inch. Die Maßeinheit Inch (zu deutsch auch Zoll) wird hauptsächlich noch in den USA für Längenangaben verwendet. Da 1 Inch der Länge von ca. 2,5 cm entspricht, bedeutet dies, dass ca. 28 Punkte nebeneinander 1 cm ergeben.

Schriften werden in der Regel in pt angegeben. Die Zeilenhöhe einer Schrift beträgt im Normalfall das 1.2-Fache der Schrifthöhe. Bei einer 10 pt Schrift ist eine Zeile 12 pt hoch, bei einer 15 pt Schrift beträgt die Zeilenhöhe 18 pt. Für die Bildschirmdarstellung verwendet man besser die Einheit Pixel px. Die Größe eines Pixels wird demnach durch die Bildschirmgröße und die gewählte Auflösung bestimmt.

Bei Tabellen oder Bereichen können Größenangaben auch in % angegeben werden. Legt man bei einer Tabelle zum Beispiel fest, dass die erste Spalte 30% und die zweite Spalte 70% der Gesamtbreite einnehmen, so bleibt dieses Verhältnis auch dann so, wenn man die Tabellenbreite ändert.

Maßangaben können auch in aus dem täglichen Leben bekannten Maßen wie mm oder cm gemacht werden, und wer will sogar in in.

Die Angabe einer Farbe in Style Sheets erfolgt am Bequemsten, wenn man den Farbnamen direkt nennt, also z.B. color: blue. Es gibt zahlreiche vordefinierte Farbnamen, die auch Abstufungen kennen wie z.B. lightblue oder darkgrey. Oftmals kennt man jedoch die Farbnamen nicht, vor allem wenn es sich um Exoten wie aqua oder navy handelt.

Farben kann man auch direkt als RGB-Werte (Rot, Grün, Blau) angeben. Auf diese Weise kann man sich seinen Wunschton selber zusammenmischen. Wenn man dann noch weiß, dass z.B. Rot + Grün die Farbe Gelb ergibt, hat man sämtliche Möglichkeiten der Farbgestaltung vor sich. Der Vorteil einer Farbangabe als RGB-Wert ist auch, dass man seine Farbe leicht eine Nuance dunkler, roter oder blauer machen kann, indem man die Werte leicht manipuliert.

Während man die vordefinierten Farben einfach in der Form color: lightgreen zuweist, definiert man eine RGB-Farbe auf eine der folgenden Arten:

color: #ff8000;
color: rgb(255,128,0);
color: rgb(100%, 50%, 0%);

Im ersten Fall gibt man die Farbanteile rot, grün und blau als Hexadezimalzahlen an. Im zweiten Fall gibt man die 3 Farbanteile in absoluten Zahlen zwischen 0 und 255 an. Die Angabe im dritten Fall bedeutet 100% Rot-Anteil, 50% Grün-Anteil und kein Blau-Anteil.

Zurück zum Inhaltsverzeichnis CSS-Style-Sheets