Eine Webseite mit Stildefinitionen versehen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen wissen, auf welche Arten eine Webseite mit Stildefinitionen versehen werden kann.

Lösung

Es gibt drei verschiedene Arten, Stildefinitionen in eine Webseite zu integrieren: intern, extern und inline. Ein internes Stylesheet wird in der head-Sektion des Dokuments definiert:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>CSS Kochbuch</title>
    ...
    <style>
    <!--
      #header {
        width: 100%;
        height: 100px;
        font-size: 150%
      }
      #content {
        font-family: verdana, arial, sans-serif;
        margin-left: 20px;
        margin-right: 20px
      }
      .title {
        font-size: 120%
      }
    -->
    </style>
  </head>
  <body>
    ...

Hinweis:
Beachten Sie die HTML-Kommentare direkt nach dem öffnenden und vor dem schließenden style-Tag. Die Kommentare sollen verhindern, dass der CSS-Code versehentlich im Layout der Seite auftaucht oder vom Browser auf ungewollte Weise dargestellt wird.

Externe Stylesheets werden prinzipiell in einer eigenen Datei gespeichert, die durch einen speziellen Link in das HTML-Dokument eingebunden wird. Der folgende Code steht in einer eigenen Datei (gespeichert als screen.css):

/* CSS-Dokument */
h1 {
  font-size: 150%;
}
h2 {
  font-size: 120%;
}
p {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

Warnung: Beachten Sie, dass das HTML-Element style in der externen CSS-Datei keine Gültigkeit hat. Auch HTML-Kommentare haben in einer solchen Datei nichts zu suchen.

Um die obige CSS-Datei einzubinden, schreiben Sie nun innerhalb der head-Tags:

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

Eine weitere Möglichkeit, externe Stylesheets einzubinden, besteht in der Verwendung der Anweisung @import innerhalb der style-Tags, wie hier gezeigt:

<style>
  <!-- @import url(screen.css) screen; -->
</style>

Hinweis: Ältere Browser können mit der Anweisung @import unter Umständen nicht besonders gut umgehen.

Inline-Stildefinitionen funktionieren auf ähnliche Weise wie das (mittlerweile veraltete) font-Tag: Die Definitionen werden mit Hilfe des Attributs style direkt in den Markup-Code eingebettet:

<h1 style="font-family: verdana, arial, sans-serif; font-size: 150%; color: blue;">Seitenüberschrift</h1>
<p style="font-family: sans-serif; font-size: 90%;">Hallo Welt!</p>

Diskussion

Die drei verschiedenen Arten von Stylesheets sind:

Extern

Mit Hilfe des link-Tags können Webseiten externe CSS-Dateien einbinden. Diese dürfen ausschließlich CSS-Anweisungen enthalten. Wenn Sie die Schriftfarbe für alle Seiten anpassen wollen, die dieses Stylesheet einbinden, brauchen Sie die Änderungen nur noch in der externen Datei vorzunehmen.

Intern

Für alleinstehende Webseiten ist es möglicherweise sinnvoller, das Stylesheet direkt in die Seite einzubetten, damit andere Seiten diese Stile nicht zu sehen bekommen. Interne Stile werden im head-Teil des Dokuments innerhalb der style-Tags definiert.

Inline

Inline-Stile funktionieren so ähnlich wie das font-Tag. Auch hier werden die Stildefinitionen auf ein bestimmtes Tag innerhalb der Seite angewandt. Inline-Stile werden von Designern nur selten benutzt.

 

Externe und interne Stylesheets können gegenüber Inline-Stildefinitionen eine Menge Zeit bei der Wartung von Webseiten sparen.

Stellen Sie sich vor, Sie müssten eine Website pflegen, in der Textfarbe (hier: Blau) und -größe mit Hilfe von font-Tags kontrolliert werden. Der Text soll in der neuen Version aber schwarz dargestellt werden, also suchen Sie nach allen Vorkommen von <p>, um den Wert manuell zu ändern, wie hier:

<p><font size="2" color="blue">Hier steht der Text</font></p>

Durch die Verwendung eines externen Stylesheets können Sie die gleichen Änderungen in nur zwei Schritten vornehmen. Hierfür brauchen Sie nur die entsprechende CSS-Datei zu öffnen und den Farbwert anzupassen.

p {
  color: blue;
}

Bei einem internen Stylesheet reicht sogar ein Schritt, weil sich die Stildefinitionen im gleichen Dokument wie der HTML-Code befinden. Suchen Sie am Anfang der Seite nach der entsprechenden Stildefinition, und ersetzen Sie blue durch black:

<style>
<!--
  p {
    color: blue
  }
-->
</style>

Sinnvolle Verwendung von Inline-Stilen

Bei der Verwendung von Inline-Stilen ist der Aufwand für das Ändern der Farbe genauso hoch wie beim Einsatz von font-Tags in der Datei selbst:

<p style="font-color: blue">Hier steht der Text.</p>

Also warum sollte jemand trotz des hohen Zeitaufwands Inline-Stildefinitionen verwenden? Gelegentlich gibt es Inhalte, die in der gesamten Website nur einmal vorkommen und spezielle Stile benötigen. Anstatt ein externes Stylesheet mit Anweisungen für einzelne Elemente vollzupacken, können Sie diese auch direkt als Inline-Stil definieren. Sobald Sie davon ausgehen, dass Sie die Stildefinitionen ändern oder wiederverwenden möchten, empfiehlt sich die Verwendung von id-Attributen zusammen mit internen oder externen Stylesheets.

Sinnvoller Einsatz von internen Stylesheets

Die meisten Sites bevorzugen externe Stylesheets gegenüber Inline-Stylesheets. Wenn Sie damit beginnen, den CSS-Code für das Layout einer Website zu erstellen, kann es jedoch sinnvoll sein, diese zuerst in der Seite selbst zu definieren. Ist das Design vollständig oder es wird ein wenig unhandlich, können Sie die Definitionen immer noch in eine externe Datei auslagern. Weitere Änderungen können Sie dann wie bisher auch in der separaten CSS-Datei vornehmen. Möglicherweise haben Sie auch eine spezielle Seite, die mit dem Rest der Website nichts zu tun hat oder die ein spezielles Layout verwendet. In diesem Fall kann die Verwendung eines internen Stylesheets einfacher sein, damit die externe Datei nicht unnötig vollgepackt wird.

Siehe auch

Der Abschnitt zum Thema Stylesheets in der HTML 4.01-Spezifikation.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln