CSS/Tutorials/Einstieg/Stylesheets einbinden

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Einstieg
Wechseln zu: Navigation, Suche

In diesem Kapitel lernen Sie, welche Vorteile der Einsatz von Stylesheets bringt und wie Sie Formatfestlegungen mit CSS in HTML-Dokumente einbinden.

Warum Layouts mit CSS?

Der „große Sinn von CSS“ besteht in der Trennung von Inhalt und Design. Das hört man oft, stellt sich nichts drunter vor und bastelt dann doch eine besondere Überschrift mit einem inline-style, einen neuen div-Container mit einer ganz speziellen ID oder Klasse, die später nirgends wieder auftaucht. Das funktioniert auch mehr oder weniger – man wird ohne viel Mühe eine statische Seite zusammenstellen, die ihren Zweck erfüllt – und vergisst das ganze.

Es ist aber beinahe unmöglich, einen so über die Zeit gewucherten Internetauftritt umzugestalten – man müsste dutzende oder mehr Einzeldateien umschreiben und im Gewusel der Klassen und Elemente wird man sich schnell verlieren. Letztlich dauert die Änderung beinahe länger als eine Neuerstellung.

Und genau darin liegt die Stärke von CSS: uneingeschränkte Flexibilität, wenn z. B. das Layout nicht mehr zeitgemäß ist oder neue Strukturen, vor allem bei dynamischen Seiten, Änderungen erfordern. Dabei wäre man ohne CSS buchstäblich „verloren im Quelltext“.

Nun zum …

… Layout – am Anfang ohne!

Das erste Gebot von CSS lautet: „am Anfang ohne.“

Soll heißen – man gestaltet die Seite erst komplett ohne CSS, nur die Seitenstrukturierung in Kapitel und Absätze, bei diesen dann die Textauszeichnung von Überschriften und Ähnlichem. Es stellt auch die „allgemeine Gültigkeit“ des Layouts sicher – ist die Grundlage an sich stimmig, kann man die Seite beliebig umgestalten, jeder Fehler schränkt dies wieder ein.

Eine solche Webseite sieht nicht gut aus, ist aber uneingeschränkt nutzbar. Die einzelnen Elemente werden vom Browser einfach untereinander auf dem Bildschirm angeordnet, und zwar in der Reihenfolge, in der sie in der HTML-Datei aufgeschrieben sind. Die Elemente selbst werden gemäß den Voreinstellungen des Browsers dargestellt; so ist z. B. festgelegt, dass der Hintergrund des Dokuments weiß oder grau darzustellen ist, dass Überschriften in fett und einer Größe von soundsovielen Punkten darzustellen sind.

Als Beispiel eine Webseite, die wir zu Demonstrationszwecken ihrer CSS-Datei beraubt haben:

HTML ohne CSS
HTML-Dokument ohne CSS

CSS – Formatsprache für HTML-Elemente

An diesem Punkt setzen die Cascading Stylesheets ein. Es handelt sich dabei um eine unmittelbare Ergänzungssprache, die vorwiegend für HTML (aber auch für SVG) entwickelt wurde. Sie klinkt sich als progressive enhancement (englisch für fortlaufende Verbesserung) nahtlos in HTML ein und erlaubt das beliebige Formatieren einzelner HTML-Elemente. Mit Hilfe von Stylesheets können Sie beispielsweise festlegen, dass alle Überschriften 24 Punkt groß sind und mit einem Nachabstand von 16 Punkt und mit einer grünen doppelten Rahmenlinie oberhalb dargestellt werden. Schematisch würde dies etwa so aussehen:

Überschrift {
Schriftgröße: 24 Punkt;
Abstand-unten: 16 Punkt;
Rahmenfarbe-oben: grün;
Rahmenart-oben: doppelt
}

Diese und andere Definitionen können Sie aber genauso gut auch für einen beliebigen Text festlegen.

Die nächste Abbildung zeigt, wie die eben gezeigte HTML-Seite mit CSS aussehen soll:

Screenshot: HTML-Dokument mit CSS-Stylesheet
'HTML-Dokument mit CSS-Stylesheet für Light und Dark Mode
Die gezeigte Beispielseite ist eine unserer Design-Vorlagen.
Beachten Sie: Es handelt sich tatsächlich um die gleiche HTML-Datei. Das Aussehen wird hier nur durch eine CSS-Datei verändert.
Vorschau-garten.gif

Neben dem oben gezeigten Design03, das im Kapitel vom Entwurf zum Layout noch näher besprochen wird, hat der CSS-Garten sogar 9 verschiedene CSS-Layouts, die Sie ausprobieren können.

Hauptartikel: CSS/fertige Layouts

Einbindung

direkt in einem style-Attribut

Mit dem Universalattribut style können Sie Eigenschaften einem Element direkt zuweisen. Dabei sind nur Deklarationen, also Eigenschaft-Wert-Zuweisungen möglich.

Formate direkt festlegen ansehen …
<p style="text-align: center; color: green;">
  Dieser Absatz wird über ein style-Attribut formatiert. 
</p>

Dieses Beispiel zeigt, wie einem p-Element per style-Attribut verschiedene Formate zugewiesen werden können. Diese Festlegung gilt aber nicht für weitere Textabsätze.

Beachten Sie: Durch das direkte Festlegen von Formaten, umgangsprachlich auch „Inline-Style“ genannt, gehen viele Vorteile verloren. Der Wartungsaufwand steigt während sich die Flexibilität verringert. Inline-Styles sind an ein Element gebunden und können nicht an zentraler Stelle bearbeitet werden.

zentral in einem style-Element

Das HTML-Element style erlaubt es, Formate zentral im head des HTML-Dokuments festzulegen.

Beispiel ansehen …
<!doctype html>
<html lang="de">
  <head>
    <style>
    h1 { 
       background-color: green;
       color: white;
    }
    p {
    	text-align: center; 
    	color: green;
    }
    </style>
  </head>

In diesem Beispiel wird das Format für das Überschriftenelement h1 und alle Textabsätze des Dokuments innerhalb eines style-Elements festgelegt. Das style-Element ist ein Kindelement des head-Elements.


Einbinden eines externen Stylesheets

Im Normalfall besteht eine Webpräsenz aus mehreren (oft hunderten) von Seiten, die alle gleich formatiert werden sollen. Hier hat es sich durchgesetzt, das CSS in einem eigenen externen Stylesheet mit der Endung .css abzuspeichern und mit dem HTML-Element link direkt im head einzubinden.

Einbinden eines externen Stylesheets
<!doctype html>
<html lang="de">
  <head>
    <link rel="stylesheet" href="stylesheet.css">
    ...

Das link-Element ist ein Kindelement des head-Elements.


Folgende Attribute gibt es:

Diese beiden Attribute sind erforderlich und ausreichend, um ein Stylesheet einzubinden. Das link-Element kann aber noch weitere Attribute besitzen, die auf Stylesheets eine Wirkung haben.

  • type: enthält den Medientyp der einzubindenden Datei, für CSS also „text/css“. Da dies in HTML der Standard Typ ist, kann es weggelassen werden.
  • media: kann festlegen, dass ein Stylesheet nur dann verarbeitet werden soll, wenn das Dokument von einem bestimmten Ausgabemedium ausgegeben wird. Als Attributwert ist eine Medienabfrage erlaubt, beispielsweise screen für Bildschirme oder print für Drucker (siehe: medienspezifische Stylesheets). Ist das Attribut nicht definiert, gilt der Standardwert all. Das Stylesheet wird dann unabhängig vom verwendeten Ausgabemedium verarbeitet.
  • title: Werden mehrere Stylesheets eingebunden, die einen Titel besitzen, werden alternative Stylesheets definiert.

Sie können für jede Internetseite beliebig viele Stylesheets einbinden. Beachten Sie dabei jedoch sowohl die Regeln zur Reihenfolge der Abarbeitung von CSS-Deklarationen als auch die Hinweise zur Performanceoptimierung.

Ein Layout - oder doch mehrere?

Früher wurden Webseiten oft für eine bestimmte Browserversion und eine festgelegte Bildschirmauflösung entwickelt. Da es zwischen den Browsern gravierende Darstellungsunterschiede gab, wurden mittels einer Browserweiche verschiedene Stylesheets geladen.

Heutzutage geht es eher darum, Webseiten auf allen verfügbaren Ausgabegeräten vom Smartphone bis zum Riesen-Monitor gleichermaßen lesbar zu machen. Wenn die Seitenbreite zur Darstellung der Inhalte nicht mehr ausreicht, werden sie mittels media queries automatisch in ein neues, passendes Design verschoben.

Empfehlung: Das Arbeiten mit CSS erlaubt es, mit Medienabfragen (Media Queries) für Ausgabemedien mit bestimmten Eigenschaften, etwa Tablets, Smartphones aber auch Drucker abweichende Darstellungen innerhalb eines Stylesheets festzulegen. Passen Sie Ihr Layout flexibel an.

zentrale Formate für mehrere HTML-Dateien

CSS erlaubt es, Stile, Farben und Formen zu definieren, beispielsweise für alle Überschriften, oder für alle Textabsätze mit einem bestimmten Klassennamen, oder für kursiv ausgezeichneten Text, der innerhalb einer Tabellenzelle vorkommt.


Die zentralen Formate können sich auf eine HTML-Datei beziehen, aber auch in eine externe Style-Datei ausgelagert werden, die man in beliebig viele Seiten einbinden kann. So werden einheitliche Formatvorgaben möglich, und der HTML-Code wird von unnötigem Ballast befreit. Spätere Änderungen am Design können so leicht durchgeführt werden.

In der folgenden Abbildung dient eine einzige CSS-Datei beispielsweise vier HTML-Dateien als Formatvorlage:

Übersicht

Die folgende Abbildung zeigt den Zusammenhang zwischen HTML und CSS:

Zusammenhang HTML CSS

Während in HTML der Inhalt semantisch ausgezeichnet wird, wird das Aussehen im Stylesheet festgelegt.

Fazit

In der Frage, wie man CSS-Styles am besten organisiert, herrscht darin Einigkeit, dass …

  • das Einbinden von externen CSS-Dateien den Notationen in style-Elementen oder gar style-Attributen vorzuziehen ist. CSS-Dateien erzeugen zwar einmalig einen zusätzlichen Request pro Datei. Da sie aber in der Regel gecachet oder von Bots gar nicht erst angefordert werden, erzeugen sie deutlich weniger Datentransfer.
  • während der Entwicklung mehrere Stylesheets in Arbeit sind ( so evtl. ein eigenes Print-Stylesheet), ist es empfehlenswert später nur ein Stylesheet auszuliefern.

Siehe auch