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

4.6 CSS zum Ausprobieren: die W3C Core Styles

Das W3C hat vor vielen Jahren acht Stylesheets erstellt, mit denen man zu Übungs- und Demonstrationszwecken Webseiten per CSS formatieren kann, ohne selbst eine Zeile CSS schreiben oder kennen zu müssen. Eines dieser Stylesheets verbinden Sie im folgenden ToDo mit Ihrer Übungsseite.

ToDo: Formatieren Sie die Webseiten mit dem Core Style Traditional
  1. Öffnen Sie ggf. index.html in einem Editor.
  2. Fügen Sie den hervorgehobenen Quelltext in den head der Webseite ein:

    <head>
    <!-- META und TITLE unverändert lassen -->
    <link href="http://www.w3.org/StyleSheets/Core/Traditional"
    rel="stylesheet" type="text/css" media="screen" />

    </head>

  3. Speichern Sie die Seite und betrachten Sie sie in einem Browser.

Wenn alles funktioniert, hat sich die Seite optisch etwas verändert:

Abbildung 4.10: Die Startseite mit dem W3C-Stylesheet Traditional
Abbildung 4.10: Die Startseite mit dem W3C-Stylesheet Traditional

Das HTML-Element link lernen Sie zu Beginn des nächsten Kapitels (im Buch auf Seite 100) noch genauer kennen. Es verbindet eine Webseite mit einem Stylesheet, und in diesem Fall liegt es auf den Computern des World Wide Web und heißt Traditional.

Statt Traditional können Sie übrigens noch ein paar andere Varianten probieren:

  • Midnight, Ultramarine, Chocolate, Oldstyle, Modernist, Steely und Swiss

Zum Ausprobieren ersetzen Sie im link-Element einfach das Wort Traditional durch den gewünschten Namen. Speichern. Anschauen. Staunen.

Eine Augenweide: CSS Zen Garden

Surfen Sie mal beim CSS Zen Garden vorbei. Dort können Sie sehen, was professionelle Webdesigner mit CSS so zaubern können:

Kaum zu glauben, aber wahr: Alle Varianten beruhen auf derselben HTML-Datei, nur das Stylesheet ist jeweils neu.