In diesem Abschnitt werden wir die Kochbar-Startseite mit rund 250 Zeilen CSS und einigen Grafiken so gestalten, dass ihre Darstellung in modernen Browsern dem Entwurf entspricht. Dabei gehen wir Schritt für Schritt vor.

Wenn Sie die erste Auflage meines Buchs oder die dritte Version meiner Onlineeinführung gelesen haben, erinnern Sie sich vielleicht daran, dass das Kochbar-Beispiel kein eigenes Kapitel war, sondern im Verlauf des Buchs in vielen Einzelschritten aufgebaut wurde. Diese Schritte waren »eigenschaftenorientiert«. Am Ende jedes Abschnitts der CSS-Kapitel habe ich die soeben vorgestellten Eigenschaften angewendet, das heißt, ich habe zunächst Farben und Hintergründe der Kochbar definiert, anschließend Schrift und Texte, danach Abstände und Rahmen und so weiter. Die Leser konnten so direkt in der Praxis ausprobieren, was sie gerade gelernt haben. Ich glaubte damals, das sei eine gute Idee, allerdings habe ich etwas Wichtiges übersehen: Kein Webautor geht so vor!

Die meisten Webautoren schreiben ihre Stylesheets vom Allgemeinen zum Speziellen. Das Stylesheet beginnt mit globalen Einstellungen wie Browser-Reset, Bugfixes oder Schriftskalierung. Dann folgen Regeln, die allgemeine Vorgaben enthalten; Bezeichner oder Klassennamen sollten dabei ebenso wenig auftauchen wie Kontextselektoren. Formatiert werden Links, Überschriften, Absätze, Tabellen und andere Elementtypen. Dann folgen die spezifischeren Regeln für die einzelnen Layoutelemente: Kopfbereich, Navigation, Logo, Kontakt, Inhalt, Fußzeile. Abschließend werden Regeln für Elemente aufgeführt, die nicht auf allen Seiten der Website vorkommen. So kann es beispielsweise Produkttabellen geben, die sich von gewöhnlichen Datentabellen unterscheiden, oder Sitemaps, die mit verschachtelten Listen realisiert werden und anders aussehen sollen als einfache Aufzählungslisten.

In diesem Buch lernen Sie, Stylesheets so zu schreiben, wie echte Profis es tun – schließlich möchte ich, dass Sie irgendwann selbst ein Profi werden!

<link rel="stylesheet" href="default.css"
  type="text/css" media="screen, projection" />

Zum Seitenanfang

Vorgehensweise und Coderichtlinien beim Schreiben eines Stylesheets

Es ist sinnvoll, beim Schreiben von CSS nach bestimmten Regeln vorzugehen und sich konsequent an diese Regeln zu halten. So werden Ihre Stylesheets einheitlich und übersichtlich und Ihre Arbeit dadurch effizienter. Andere Autoren, die dieselben Richtlinien anwenden, finden sich in Ihrem Stylesheet sofort zurecht – und umgekehrt.

Gedanken dazu, wie Webautoren ihre Stylesheets sinnvoll aufbauen können, haben sich schon viele Autoren gemacht. Klaus Langenberg beschreibt, wie Sie ein Stylesheet immer nach denselben Prinzipien aufbauen und sich stets strikt an eine einmal etablierte Ordnung halten [Langenberg]. Dieser Artikel ist ebenso lesenswert wie [Meiert 2006-2].

Wir halten uns an folgende Richtlinien:

Deklarationen sind aus Gründen der Übersichtlichkeit einzurücken.

Ich bevorzuge eine Einrückung mit zwei Leerzeichen. Selektoren und schließende Klammern werden nicht eingerückt. Besteht die Regel aus nur einer Deklaration, kann sie in einer Zeile notiert werden.

/* Nicht gut */
p.warnung {
color: red;
}

/* Besser */
p.warnung {
  color: red;
}
p.warnung { color: red; }

Die öffnende Klammer steht immer am Ende des Selektors oder der At-Regel; die schließende Klammer befindet sich stets in einer eigenen Zeile.

/* Nicht gut */
p.warnung
{
  color: red; }

Innerhalb einer Deklaration steht nach dem Doppelpunkt ein Leerzeichen.

p.warnung {
  color:red; /* Nicht gut */
  background-color: white; /* Besser */
}

Jede Deklaration wird mit einem Semikolon abgeschlossen.

Das gilt auch und ganz besonders für die letzte Deklaration innerhalb eines Deklarationsblocks.

/*Nicht gut */
p.warnung {
  color: red;
  background-color: white
}

/* Besser */
p.warnung {
  color: red;
  background-color: white;
}

Regeln, die zusammengehören, werden zusammen notiert.

Während andere Autoren eine alphabetische Sortierung bevorzugen und sich damit unnötige Arbeit aufhalsen, bevorzuge ich es, die Regeln so zu notieren, wie es sich im Laufe der Arbeit an dem Stylesheet ergibt. Ich achte einzig darauf, logisch zusammengehörige Regeln zu gruppieren, beispielsweise position, top und left oder width und height.

Stylesheets sind nach den Regeln von CSSDOC (siehe Kapitel 6.4.3) zu kommentieren.

Vor allem Workarounds und Browserhacks sind zu kommentieren, ebenso besonders kritische Stellen des Stylesheets, an denen jede Änderung zu absehbaren Problemen führen kann.

Zum Seitenanfang

Globale Einstellungen

Nun können wir damit anfangen, das Stylesheet aufzubauen. Als Erstes deklarieren wir die Zeichenkodierung. Anschließend folgt der CSSDOC-Dateikommentar, der einige Informationen über die Website, den Autor sowie Versionsinformationen enthält.

@charset "utf-8";
/**
* Einführung in XHTML, CSS und Webdesign. Kochbar.
*
* @link http://kochbar.jendryschik.de
* @package kochbar
* @version 2.0
*/

Kümmern wir uns nun um die globalen Einstellungen und die Behandlung von Browserbugs. Wir beginnen mit einem kleinen Trick:

/**
* Globale Einstellungen und Bugfixes
*
* @section Browser-Reset
*/

/* Zurücksetzen der Innen- und Außenabstände */
* {
  margin: 0;
  padding: 0;
}

Dadurch wird der standardmäßig vorgegebene Außen- und Innenabstand aller Elemente auf 0 gesetzt. Das ist sinnvoll, denn verschiedene Browser verwenden unterschiedliche Standardvorgaben für Margin und Padding, vor allem bei Formularelementen und Listen. Durch das Zurücksetzen der Abstände erhalten wir eine konsistente, browserübergreifende Darstellung.

Wenn Sie sich die Stylesheets handwerklich guter Websites anschauen, werden Sie häufig auf Eric Meyers Browser-Reset oder Tripoli stoßen. Dabei handelt es sich um eine Handvoll CSS-Regeln, die alle herstellerspezifischen Einstellungen zurücksetzen, nicht nur Außen- und Innenabstände. Die Darstellung aller Elemente wird so vereinheitlicht; Sie beginnen browserübergreifend mit denselben Voraussetzungen. Viele Webautoren finden es bequem und zeitsparend, diese oder andere Browser-Resets einzusetzen. Wir verzichten im Rahmen dieses Beispiels darauf; die Kochbar ist einfach genug, um ohne CSS Dritter zurechtzukommen.

Abb. 8.13: Ohne Außen- und Innenabstände wirkt die Seite wie zusammengestaucht

Schriftart und Schriftgröße

Nun kümmern wir uns um Schriftart und -größe. Die durch den Entwurf vorgegebene Schrift ist Georgia; als Alternative vorgesehen sind Palatino und Times New Roman – alles Serifenschriftarten. In der Photoshop-Datei können wir nachmessen, dass die Schrift 12 px groß ist. Die meisten Browser haben eine voreingestellte Schriftgröße von 16 px. Wir möchten aber, dass die Schrift nur drei Viertel dieser Größe einnimmt, also reduzieren wir die Schriftgröße auf 75 Prozent. Die Zeilenhöhe beträgt 20 px, was etwa 167 Prozent entspricht – genauer brauchen wir nicht zu sein. Wir machen Gebrauch von dem in Kapitel 7.3.5 vorgestellten Trick und deklarieren die Schriftgröße in zwei Schritten:

/** 
* Schriftgröße kontrollieren
*/
body, td, th { font: normal 75%/167% Georgia, Palatino, "Times New Roman", serif; }

td, th { f\ont-size: 100%; }

In den meisten Browsern ist Schwarz die Standardeinstellung für die Schriftfarbe und Weiß die Hintergrundfarbe. Hier ist die Schrift nicht ganz schwarz, sondern hat den Farbwert #333. Denken Sie daran: Wenn Sie die Schriftfarbe deklarieren, müssen Sie auch die Hintergrundfarbe explizit angeben, also:

/* Farben und Hintergründe setzen */
html, body {
  color: #3b2b20;
  background-color: white;
}

Abb. 8.14: Schritt 6

Mit den globalen Einstellungen sind wir – zumindest für den Moment – fertig. Kommen wir zum nächsten Schritt.