Schrift und Farben

Eine wichtige Voraussetzung, um das Design einer Website per CSS erfolgreich zu gestalten, ist die Kenntnis der Eigenschaften, auf die man per CSS zugriff hat. Im Rahmen dieser Einführung werden wir uns bewusst auf einige wenige und wichtige konzentrieren. Wer tiefer tauchen will, findet z.B. bei w3schools.com eine exzellente Aufführung der Möglichkeiten von CSS mit vielen Beispielen.

Unser erster Gehversuch in CSS hat zwar geklappt, ästhetisch gesehen war er aber nicht sehr überzeugend. Daher bauen wir die erste Regel etwas um und machen die Veränderung dezenter: zunächst definieren wir eine andere Farbe für die Schrift der h1. Statt eine der benannten Farben von CSS zur verwenden, die quasi vorgefertigt sind, definieren wir nun die Farbe über drei aufeinander folgende Hexadezimalwerte: #404040.

Jedes Ziffernpaar steht hier für die Ausprägung (in Hexadezimal-Schreibweise) von einer der drei Farbkomponenten im RGB-Farbraum (Rot Grün Blau). Jede Farbkomponente hat hierbei einen Wert zwischen 00 und FF, dies entspricht umgewandelt in das uns vertraute Dezimalsystem einem Intervall zwischen 0 (keine Farbe) und 255 (maximaler Farbanteil). Kein Farbanteil auf den drei Komponenten Rot, Grün und Blau ergibt Schwarz (#000000), volle Ausprägung der drei ergibt Weiß (#FFFFFF), volle Ausprägung von Grün ohne Beimischung der anderen Farben ergibt volles Grün (#00FF00) usw.

Für #404040 ergibt sich demnach folgendes: Die Zahl 40 umgewandelt in das Dezimalsystem ist 64, alle drei Farbkomponenten haben die gleiche (relativ niedrige Ausprägung), daraus ergibt sich ein mitteldunkles Grau.
(Im Folgenden wird hier jeweils nur der CSS-Teil des Markups gezeigt.)

Die Hexadezimal-Schreibweise ist recht kompakt und lässt sich gut aus Grafikprogrammen kopieren, intuitiver ist allerdings die Festlegung der Farbe über die RGB-Schreibweise: Hierbei wird jede Komponente als Dezimalwert zwischen 0 und 255 angegeben.
color: #404040 entspricht demnach color: rgb(64,64,64)

Weitere Möglichkeiten der Farbmischung durch Transparenz ergeben sich durch die CSS3-Eigenschaften rgba und hsla.

Außerdem weisen wir nun der Überschrift h1 über die Eigenschaft font-family eine andere Schriftart zu und stellen die "Dicke" der Font von "bold" (fettauf "normal".

Bei der Definition der Schriftart über die Eigenschaft font-family ist zu beachten, dass der Browser auf die lokal installierten Schriften zugreift. Will man ohne den Einsatz einer Webfont eine einheitliche Ausgabe auf unterschiedlichen Geräten sicher stellen, so sollte man auf Standardfonts zurückgreifen, die auf allen Betriebssystemen verfügbar sind. Die gewünschte Schrift steht vorne, danach kann man "Fallbacks" definieren, falls die gewünschte Schrift auf dem Gerät doch nicht zur Verfügung steht. "sans-serif" führ in unserem Fall dazu, dass auf jeden Fall eine Schrift ohne Serifen angezeigt wird, falls Arial nicht verfügbar ist.

Die "Dicke" der Schrift (font-weight) kann außer über "bold" und "normal" auch über genauere Abstufungen zwischen 100 und 900 angeben werden.

Abschließend wollen wir nun noch die Schrift kursiv ausgeben und in Großbuchstaben. Dafür kommen die Eigenschaften "font-style" und "text-transform" zum Einsatz.

Nun haben wir unseren ersten Deklarationsblock hinter uns gebracht und die wichtigsten Einstellmöglichkeiten durch CSS für Schriften kennen gelernt. Dies führt im Browser zu dieser Ausgabe. Vertiefende Informationen zu CSS und Fonts finden sich auch hier.

Im folgenden Abschnitt sollten wir uns nun endlich der "Kaskade" innhalb von CSS annehmen, die wir bisher umschifft haben.

> weiter