Die Struktur und der Inhalt einer Website wird durch HTML-Markup festgelegt. "Best practice" im Webdesign ist, dass die Optik möglichst ausschließlich durch CSS ("Cascading style sheets") festgelegt wird. Dadurch erreicht man, dass Inhalt und Präsentation getrennt sind, was z.B. den Vorteil hat, dass man die Gestaltung aller Unterseiten einer Website leichter einheitlich halten oder auch gleichzeitig verändern kann. Das bekannteste Beispiel, das die "Power of CSS" sehr gut veranschaulicht, ist der CSS Zen Garden. Seit vielen Jahren können hier Webdesigner zeigen, was mit CSS möglich ist: Der HTML-Markup ist immer der gleiche, Designer können jeweils ein eigenes CSS hochladen und so den Markup nach ihren Vorstellungen grafisch aufbereiten. Durch neu einführte Features von CSS entstehen dabei immer neue Ideen. Es lohnt sich durchaus, im "Garten" eine Zeit lang zu surfen, man findet dabei Design-Inspirationen oder technische Ideen, z.B. 215, 218, 219.
Wie funktioniert nun CSS? Worin besteht die Kaskade ("cascading ...") - was hat die Optik einer Website mit einem Wasserfall in Stufen zu tun? Was ist eigentlich ein "style sheet"?
Beginnen wir zunächst mit dem etwas einfacher zu beschreibenden "style sheet": Im Kern ist CSS, genauso wie HTML, eine eigene Auszeichnungssprache. CSS ist nicht für sich selbst sinnvoll zu verwenden, sondern ist nur im Tandem mit HTML sinnvoll einzusetzen, indem es die grafische/optische Ausgabe von HTML im Browser steuert. Obwohl CSS eng mit HTML verbunden ist (und beide vom Browser interpretiert werden), hat CSS eine eigene Syntax, mit z.B. eigenen Vorgaben für Kommentare. Ein "style sheet" ist eine Folge von CSS-Regeln, die auf bestimmte Elemente oder Bestandteile der Website angewendet werden und deren grafische Ausgabe im Browser steuern.
Das Stylesheet kann entweder direkt in den HTML-Markup integriert werden oder es kann in einer separaten Textdatei mit der Endung ".css" gespeichert und von der HTML-Seite aus verlinkt werden. Im ersten Fall spricht man auch von einem "Inline-Stylesheet", dazu schreibt man die CSS-Regeln innerhalb eines Style-Tags: <style>
Ein Beispiel hierfür sieht so aus:
<style>
h1 {
color:red;
}
</style>
Hier sieht man eine Regel, die auf den h1-Tag angewendet wird, daher beginnt sie mit dem Namen des Tags ("h1"). Diesen Teil der Regel nennt man auch "Selektor", denn durch ihn werden Elemente der Seite ausgewählt. Danach folgen in geschweiften Klammern die Eigenschaft ("color") und der Wert ("red"), der durch die Regel zugewiesen werden soll. Durch die Eigenschaft "color" können wir die Textfarbe innerhalb eines Elements beeinflussen, hier wird sie also auf den Wert rot eingestellt.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt, jedes Eigenschaft-Wert-Paar wird durch einen Strichpunkt beendet. Diese Kombination aus Eigenschaft und Wert nennt man auch "Deklaration".
Fügen wir nun eine zweite Deklaration hinzu, d.h. wir definieren eine zweite Eigenschaft, die auf die selektieren Elemente angewendet wird: mit "font-size" stellen wir nun zusätzlich die Größe der Überschrift h1 ein. Nun besteht unsere Regel aus zwei Deklarationen, alle Deklarationen zusammen nennt man den "Deklarationsblock".
<style>
h1 {
color:red;
font-size:35px;
}
</style>
Dieses Inline-Stylesheet können wir nun innerhalb des Head-Bereichs des HTML-Dokuments platzieren. Um die Stelle hervorzuheben, kommt ein Kommentar zum Einsatz. Kommentare gibt es in jeder Programmiersprache, sie helfen einem dabei, zusätzliche Informationen im Kontext des Codes zu platzieren oder auch eine Anweisung vorübergehend außer Kraft zu setzen, um einen alternativen Weg zu testen. Der Kommentar in HTML funktioniert so:
<!-- Ich bin ein Kommentar und werde vom Browser nicht beachtet -->
In Komodo Edit markiert man einfach den Text, der zum Kommentar werden soll und drückt die Tasten "STRG/CTRL" und "3". Um den Kommentar aufzuheben drückt man "STRG/CTRL" und "2". Auf diese Weise fügen wir noch einen zusätzlichen Kommentar innerhalb des CSS ein. Dabei zeigt sich, dass in CSS Kommentare anders markiert werden als in HTML:
/* Unsere ersten CSS-Regeln */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine erste Website</title>
<!-- Das Style Sheet, inline integriert -->
<style>
/* Unsere ersten CSS-Regeln */
h1 {
color:red;
font-size:35px;
}
</style>
</head>
<body>
<header>HTML5 rocks!</header>
<h1>Willkommen im Web!</h1>
<p>HTML hilft uns dabei, unsere Ideen <strong>weltweit</strong>
zu verbreiten.<br>
Mit einer handvoll Tags lässt sich Text <em>klar strukturieren</em>
und <em>übersichtlich präsentieren</em>.</p>
<h2>Der Schlüssel</h2>
<p>Der <a href="http://de.wikipedia.org/wiki/Webbrowser" target="_blank"
title="Definition in Wikipedia aufrufen">Browser</a> ist das Fenster
in die Welt des WWW. Er ist heute in fast jeder Tasche und jederzeit
mit dem Internet verbunden.</p>
<p>Sogar am See kann man damit Surfen:</p>
<img src="https://webdev.raphael-rossmann.de/wp-content/uploads/see.jpg"
alt="Ein schöner See mit W" title="Ein schöner See mit W" width="600">
<h2>Alles in Ordnung?</h2>
<p>HTML hilft uns dabei, Texte zu ordnen:</p>
<ul>
<li>Durch Überschriften</li>
<li>Durch Absätze</li>
<li>Durch Listen</li>
<li>Durch optische Betonungen</li>
</ul>
<footer>KuD rocks even more!</footer>
</body>
</html>
Nun können wir kontrollieren, ob unser Style Sheet tatsächlich den Look der Ausgabe im Browser beeinflusst.
Tatsächlich haben wir das Aussehen der Hauptüberschrift mit unserer ersten Regel verändert. Damit ist nun grundlegend klar, wie wir das Aussehen einer Website kontrollieren können . Im nächsten Abschnitt werden wir nun weitere wichtige Eigenschaften kennen lernen, die wir über CSS verändern können.
> weiter