CSS – Farben und Formen im WWW

Begriffe

Erst in den letzten Jahren begann man darüber nachzudenken, wie man die Entwicklung von Webseiten weiter professionalisieren könnte. In den Anfangstagen des Internets wurden Webangebote mittels der Auszeichnungssprache HTML erzeugt. Der Grundgedanke dieser Technik ist, dass die einzelnen Elemente eines Textes markiert werden sollten, damit die Browser das HTML in formatierten Text übersetzen konnten.

<b>Ich bin ein fetter Text.</b>

Diese Anweisung wurde über das Datennetz an den Browser übermittelt, der daraufhin "Ich bin ein fetter Text" mit fetter Formatierung (bold) auf dem Bildschirm ausgab. In den HTML-Tags waren nun auch die Formatierungseigenschaften eingebettet, welches dem Prinzip einer Auszeichnungssprache nicht gerecht wurde. Man begann nun eine Lösung zu suchen und fand diese in CSS. Nun wurden Webseiten weiterhin in HTML programmiert, jedoch ohne dabei Designkomponenten einzufügen. Der Inhalt einer Webseite wird mittels HTML nur ausgezeichnet und alle weiteren Schritte werden CSS überlassen. Für unsere Beispiele wählen wir eine HTML Datei, die einfach aufgebaut, sowie unserem Leitgedanken entspricht:

<head></head>
<body>
<div>
<h1>Ich bin eine große Überschrift</h1>
<p>Hier steht ein sehr informativer <span>Text</span>, 
der für uns als Beispiel dienen soll.</p>
</div>
<div>
<ul>
<li>Punkt1</li>
<li>Punkt2</li
</ul>
</div>
</body>

Dieser Code enthält keine Informationen, wie der Text später dargestellt werden soll, diese Informationen fügen wir nun mittels CSS ein.

CSS einfügen

Um CSS Code in eine Webseite einzufügen gibt es zwei Methoden. Auf der einen Seite können die Styleelemente direkt in den HTML Code integriert werden oder sie werden in externen Dateien definiert und über class / id Attribute mit dem Dokument verknüpft. Zuerst betrachten wir die erste Möglichkeit, indem wir für das gesamte Dokument die Schriftart Verdana festlegen:

<body style="font-family:verdana">[…]</body>

Damit wird alles, was zwischen den beiden <body>-Tags steht in der Schriftart Verdana ausgegeben. Natürlich lassen sich auch mehrere solcher Designelemente verknüpfen und auch auf andere Bereiche des Dokumentes anwenden, aber falls man ein etwas aufwändigeres Design plant, sollte man diese Elemente in einer externen Datei unterbringen. Natürlich müssen wir dem Browser mitteilen, welche Datei er dafür benutzen soll. Dies geschieht über eine besondere Zeile, die wir im Header einfügen:

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

An dieser Stelle wird nun die Datei design.css eingebunden. Sie enthält die nötigen Informationen in einer Form, mit der der Browser weiterarbeiten kann.

CSS Elemente in einer externen Datei

Wenn wir nun die Schriftart Verdana (siehe oben) einfügen möchten, dann beginnen wir unsere Datei mit folgenden Zeilen:

body {
font-family: verdana;
}

Nun wird vom Browser alles was zwischen den <body>-Tags steht mit Verdnana ausgegeben. Genauso kann man nun auch die anderen Textelemente formatieren. Die Syntax besteht aus dem HTML Schlüsselwort, sowie den Elementen und ihren Werten (jede Zeile endet mit ;) innerhalb geschweifter Klammern.

h1 {
font-family: arial;
font-size: 2em;
color: red;
}

Mit diesem Code, der in die Datei design.css direkt unter den <body> Anweisungen eingefügt werden kann, werden alle Überschriften in der Schriftart Arial, Größe 2em und in der Farbe rot augegeben. Mit diesem Mittel kann man schnelle, bequeme und umfangreiche Änderungen am Design vornehmen. Jedoch ergibt sich dadurch ein gravierender Nachteil. Hat man nun mehrere Überschriften, die alle mit anderen Formatierungen angezeigt werden sollen, muss man auf eine weitere Eigenschaft von CSS zurückgreifen.

class/id

Wir können unsere Überschriften auch mit sogenannten id-Attributen ausstatten:

<h1 id="rot">Ich bin eine Überschrift</h1>
<h1 id="blau">Ich bin auch eine Überschrift</h1>

Für diese beiden Elemente führen wir neue Definitionen in unsere Datei design.css ein:

#rot {
color: red;
}
#blau {
color: blue;
}

Mit dem Rautezeichen geben wir dem Browser Bescheid, dass alle Elemente, die die Kennzeichnung id="rot" haben mit den CSS-Elementen, die unter #rot stehen, dargestellt werden sollen. Natürlich kann man diese HTML-Elemente auch mit dem Attribut class="rot" auszeichnen, jedoch muss man dann die Definition mit einem . statt mit # einleiten:

.rot {
color: red;
}

Der Unterschied zwischen class und id ist die Häufigkeit mit der die ausgezeichneten Elemente vorkommen. Bei Listenpunkten wählt man in der Regel das Attribut class, da es hiervon meist mehrere gibt. Bei einer großen Hauptüberschrift kann man auf id zurückgreifen, da diese oft nur ein einziges Mal vorkommt.

CSS ist eine moderne Designsprache mit der man ohne großen Aufwand das Layout einer Webseite gestalten kann. In Zukunft werden solche Sprachen viel an Bedeutung gewinnen.