CSS Grundlagen

CSS Grundlagen sind wichtig, denn mit HTML wird lediglich der grundsätzliche Aufbau einer WWW-Seite definiert. HTML ist eigentlich nicht dazu gedacht, exakt anzugeben, wie ein Element genau aussehen soll. So kann in HTML eine Überschrift definiert und dabei angegeben werden, dass es sich um eine Überschrift 1. Ordnung handelt. Es kann in HTML aber nicht definiert werden, wie groß, in welcher Schriftart usw. die Überschrift dargestellt werden sollen. Das übernimmt der Browser bei der Anzeige. Er benutzt dabei eine Mischung aus Grundeinstellungen, die der Anwender vornehmen kann, und fest programmierter Darstellung einzelner HTMLElemente.
Erst später tauchten Befehle zum Bestimmen der Schriftgröße, Schriftfarbe und Schriftart auf.
An diesem Punkt setzen die Cascading Style-Sheets (CSS) ein. Es handelt sich dabei um eine Ergänzungssprache, die extra für HTML entwickelt wurde.
CSS erlaubt das beliebige formatieren einzelner HTML-Elemente. Somit lässt sich z.B. festlegen, dass alle Überschriften 1. Ordnung in roter Arial-Schrift, 24 Punkte groß und kursiv dargestellt werden soll. Genauso gut kann aber auch für einen beliebigen Text
festgelegt werden, dass er 3 cm groß und eine gelbe Hintergrundfarbe erhalten soll.
Außerdem lässt CSS auch Befehle zum punktgenauen Plazieren von Elementen am Bildschirm und andere Ausgabemedien wie Druck und Audio-Systemen zu. Außerdem können sämtliche Definitionen in einer oder mehrerer Dateien zentral gespeichert werden. In den einzelnen HTML Dateien muss dann nur noch ein Verweis auf die jeweilige Definitions-Datei eingefügt werden.
CSS Angaben einbinden CSS Angaben sollten immer im Head-Bereich einer HTML-Datei definiert werden.
<head>
<style type=”text/css”>
<!–
… Style-Sheet Angaben …
//–>
</style>
</head>
Alle CSS Angaben müssen in dem Bereich zwischen <style …> … </style> liegen.
Sinnvoll ist es außerdem die Angaben in einen mehrzeiligen Kommentar (<!– …. //–>) einzubinden. Damit erreicht man, dass Browser, die keine Style-Sheets kennen, den Bereich nicht falsch interpretieren.

Um für verschiedene Ausgabemedien unterschiedliche Dinge zu definieren, geht man wie folgt vor.
<style type=text/css”>
<!–
@media print /* Ausgabe auf Drucker */
{
… Style-Sheet Angaben …
}
@media screen, pojection
{
… Style-Sheet Angaben …
}
//–>
</style>
Im obigen Beispiel wurden z.B. verschiedene Angaben für die Ausgabe auf Drucker und Bildschirm/Overhead-Projektor definiert.
So ist es z.B. sinnvoll bei der Druck-Ausgabe auf aufwendige Hintergrundbilder zu verzichten.
Folgende Ausgabemedien können festgelegt werden:
· screen für Monitor-Ausgabe
· print für Druck-Ausgabe
· aural für Sparchausgabe
· projection für Ausgaben über Dia- oder Overhead-Projektoren
· braile für Ausgaben über Braille-Medien für Blinde
· tv für Ausgaben auf Fernsehtechnik
· handheld für Handys, Palmtops usw.
Kommentare werden bei CSS eingefügt, indem der Kommentar mit den Zeichen /* … */ eingeschlossen wird. Die Zeichen /* und */ müssen in der selben Zeile stehen.
separate CSS-Datei
In vielen Fällen wird ein einheitliches Design für ein Web und dessen Unterseiten gewünscht. Um nicht in jeder Datei unzählige Dinge für Hintergrund, Überschriftart usw. festlegen zu müssen, ist es sinnvoll solche Angaben in einer zentralen Text-Datei
vorzunehmen.
Bei den gewünschten HTML-Dokumenten muss dann lediglich ein Verweis zu der Datei erstellt werden. Wenn Angaben in der separaten Datei geändert werden, wirken sich diese einheitlich auf alle Dateien aus, in die ein Verweis auf die separate Datei eingebunden ist.
Ein solcher Verweis wird folgendermaßen eingebunden:
<head>
<link rel=stylesheet type=”text/css” href=”../format.css”>
</head>

Im obigen Beispiel liegt die Datei mit den Definitionen ein Verzeichnis höher. Daher die Angabe (../). Um eine Datei Aufzurufen, die zwei Verzeichnisse höher und dann in einem separaten Verzeichnis liegt, würde der Aufruf href=”../../Ordner/format.css” lauten.
Bei der Datei mit den Definitionen muss es sich um eine reine Text-Datei mit der Endung CSS handeln. Ein Beispiel könnte so aussehen:
/* CCS Cascading Style-Sheets */
/* Globale Einstellungen */
/* Hintergrundbild definieren */
body { background-image:url(../images/test.jpg) }
/* Überschriften definieren */
h2 { font-family:Comic Sans MS; font-size:36pt; color:#000000; fontstyle:
normal }
h3 { font-family:Comic Sans MS; font-size:24pt; color:#006699; fontstyle:
normal }
/* Ränder des BODY´s definieren */
body { margin:10px } /* 10 Pixel auf allen 4 Seiten */
Bei den Zeilen die mit /* … */ eingeschlossen sind, handelt es sich um Kommentare, die für die Ausführung keine Bedeutung haben.
In den HTML Dateien, in denen solche separaten Dateien aufgerufen werden, können natürlich auch weiterhin Syle-Sheet Angaben eingebunden werden:
<head>
<link rel=stylesheet type=”text/css” href=”../format.css”>
<style type=”text/css”>
… Definitionen …
</style>
</head>
Die Definitionen im Bereich <style …> … </style> haben dabei Vorrang vor den Definitionen in der separaten Datei.
Es können auch verschiedene Dateien für unterschiedliche Ausgabemedien definiert werden. Diese lassen sich dann für verschiedene Ausgabemedien einbinden (Wird aber weder vom IE 4 noch von Netscape 4 bisher korrekt interpretiert):
<head>
<link rel=stylesheet media=”screen” href=”monitor.css”> /* Ausgabe auf
Bildschirm */
<link rel=stylesheet media=”print” href=”drucker.css”>
<link rel=stylesheet media=”aural” href=”audio.css”>
</head>
Im obigen Beispiel kann so das Design für das jeweilige Ausgabemedium angepasst werden. So kann es z.B. von Vorteil sein, beim Ausdruck auf aufwendige Hintergrundbilder zu verzichten.
Folgende Ausgabemedien können festgelegt werden:
· screen für Monitor-Ausgabe
· print für Druck-Ausgabe
· aural für Sparchausgabe
· projection für Ausgaben über Dia- oder Overhead-Projektoren
· braile für Ausgaben über Braille-Medien für Blinde
· tv für Ausgaben auf Fernsehtechnik
· handheld für Handys, Palmtops usw.
Kommentare werden bei CSS eingefügt, indem der Kommentar mit den Zeichen /* … */ eingeschlossen wird. Die Zeichen /* und */ müssen in der selben Zeile stehen.
Schriftformatierung
Zur Schriftformatierung gehören Angaben zu Schriftarten, Schriftgröße, Schriftfarben, Zeichen- und Wortabständen usw. Sinnvoll sind solche Angaben für alle HTML-Tags, die Text enthalten können. Dazu gehören z.B. Überschriften (<h1…>), Abschnitte (<p…> aber
auch der <body>-Tag.

Schriftart
Über die Angabe font-family lässt sich die Schriftart definieren:

<style type=”text/css”> h1,h2 { font-family:”Comic Sans MS”,Arial }</style>

Gibt man wie im obigen Beispiel mehrere Schriftarten an, werden diese durch ein Komma voneinander abgetrennt. Enthält der Schrift-Name Leerzeichen empfiehlt es sich, den Namen in Anführungszeichen zu setzen. Entscheidend ist die Reihenfolge der Schriftarten.
Ist die erste Schriftart in der Reihenfolge vorhanden, wird diese angezeigt, andernfalls die nächste. Angaben zu Schriftarten die nicht angezeigt werden können, z.B. weil sie nicht installiert sind, werden vom Browser ignoriert oder der Browser erkennt eine
Typenzugehörigkeit und verwendet eine ähnliche Schriftart.
Schriftstil
Mit font-style lässt sich der Schriftstil definieren.
Folgende Angaben sind möglich:
· italic = kursiv
· normal = normal
<p style=”font-style:italic”>Text des Absatzes</p>
Mit diesem Beispiel wird der Abschnitt (alles zwischen <p>…</p>) kursiv dargestellt

Schriftvariante
Mit font-variant stehen im Moment nur Kapitälchen (kleine Großbuchstaben) zur
Verfügung
· smal-caps = Kapitälchen
· normal = normal
<h1 style=”fontvariant:smal-caps>Text der Überschrift</h1>
Schriftgröße
Mit font-size lässt sich die Schriftgröße festlegen. Die Angabe kann in numerischer
Angabe im Format Punkte oder als prozentuale Angabe zur normalen Schriftgröße
erfolgen:
<p style=font-size:130%>Text</p>
<p style=font-size:10pt/14pt>Text</p>
In der ersten Zeile wurde die Schriftgröße in Prozent angegeben. Es ist auch möglich, wie
in der zweiten Zeile, zusätzlich noch Angaben zur Zeilenhöhe zu machen. Im Beispiel ist
die Schriftgröße 10 Punkte, die Zeilenhöhe jedoch 14 Punkte.
Schriftgewicht
Mit font-weight kann man den “Fettigkeitsgrad” der Schrift festlegen:
<style type=”text/css”>
p, h1 { font-weight:bold }
</style>
Im Beispiel wurde für alle Abschnitte (<p>…</p>) und für alle Überschriften 1. Ordnung
(h1) das Schriftgewicht fett festgelegt.
Folgende Angaben sind möglich:
· bold = fett
· bolder = extrafett
· lighter = dünner
· normal
· 100, 200, …, 900 (500 entspricht dem im DTP-Bereich üblichen Begriff medium,
700 entspricht bold)
Wortabstand
Mit word-spacing kann man den Abstand zwischen den einzelnen Wörtern bestimmt
werden. Erlaubt ist eine numerische Angabe, sowie eine Angabe in Prozent im Bezug auf
die Standard-Darstellung.
<p style=word-spacing:8mm>Text</p>