Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

5.3 Das erste eigene Stylesheet

In diesem Abschnitt erstellen Sie ein leeres Stylesheet, schreiben einen CSS-Kommentar hinein und verbinden es dann mit den Beispielseiten index.html und kontakt.html.

Stylesheet erstellen und einen CSS-Kommentar schreiben

Zunächst erstellen Sie eine leere Datei, in der später die CSS-Regeln (= Styles) gespeichert werden.

ToDo: Ein Stylesheet und einen CSS-Kommentar erstellen
  1. Erstellen Sie mit Ihrem Lieblingseditor eine leere Datei.
  2. Speichern Sie die Datei unter dem Namen bildschirm.css, und zwar im selben Ordner wie die HTML-Seiten.
  3. Fügen Sie in der ersten Zeile der Datei folgenden CSS-Kommentar ein:

    /* Stylesheet für die Übungsseiten aus dem Buch "Little Boxes, Teil 1" */

  4. Speichern Sie die Datei.

Der Dateiname sollte den üblichen Regeln für Dateinamen auf Webseiten entsprechen (keine Leerstellen, keine Sonderzeichen und Kleinschreibung), und als Endung ist *.css empfohlen.

Die Datei darf kein HTML-Grundgerüst enthalten. CSS ist eine eigene Sprache, und es gibt darin weder ein HTML-Grundgerüst noch HTML-Tags.

Kommentare stehen in CSS anders als in HTML zwischen /* und */ (Schrägstrich – Sternchen und Sternchen – Schrägstrich) und dürfen nicht verschachtelt werden. Innerhalb eines Kommentars darf also kein weiterer Kommentar stehen.

CSS Kommentare ganz einfach

Wenn Sie auf der Tastatur einen Ziffernblock haben, geht das Erstellen von CSS-Kommentaren wirklich einfach:

  • Der Schrägstrich (/) ist das Symbol für »geteilt durch« (Division).
  • Das Sternchen (*) ist das Malzeichen (Multiplikation) direkt daneben.

Die Verbindung zwischen HTML und CSS: link

Im letzten Kapitel haben Sie die beiden Beispielseiten mit einem vom W3C geliehenen Stylesheet verbunden. Wenn Sie jetzt Ihr eigenes Stylesheet erstellen, müssen Sie nur noch die Wegbeschreibung im link-Element ändern, um die Seiten mit Ihrem eigenen Stylesheet zu gestalten.

ToDo: Die Webseite mit Ihrem (noch leeren) Stylesheet verbinden
  1. Öffnen Sie die beiden HTML-Dateien index.html und kontakt.html.
  2. Ändern Sie auf beiden HTML-Seiten die Wegbeschreibung zum Stylesheet wie folgt:

    <link href="bildschirm.css" rel="stylesheet" type="text/css" media="screen" />

  3. Speichern Sie die beiden Webseiten und betrachten Sie sie in einem Browser.

Die Formatierungen des am Ende des vorigen Kapitels eingebauten W3C-Stylesheets sollten nicht mehr zu sehen sein und die beiden Webseiten sind somit wieder völlig ohne Styling.

Die vier Attribute im link-Element haben übrigens folgende Bedeutung:

  • href gibt (wie immer) den Pfad zu einer Datei an. Nur ein Dateiname bedeutet wie immer »ist im selben Ordner gespeichert«.
  • rel ist kurz für »relation« (Beziehung). rel="stylesheet" heißt »Diese Datei ist ein Stylesheet für mich.«
  • type teilt dem Browser mit, dass bildschirm.css eine in CSS geschriebene Textdatei ist: »Die Datei ist vom Typ her eine Textdatei, genauer gesagt ein Cascading Style Sheet.«
  • media besagt, dass der Browser das Stylesheet nur für ein bestimmtes Ausgabemedium benutzen soll, in diesem Fall für die Ausgabe auf einem Bildschirm (screen).
  • Beendet wird das Element link mit einem integrierten Ende-Tag: Leerstelle – Schrägstrich – größer als.

Die in bildschirm.css gespeicherten Styles gelten für alle HTML-Dateien, die mit dem Stylesheet verbunden sind, egal ob das zwei oder zweihundert oder zweitausend sind.