CSS-Stylesheet

CSS-Regeln für alle Seiten eines ganzen Webs

• Hier wird demonstriert, wie man CSS-Regeln für beliebig viele Dokumente (Webseiten) zentral verwalten kann.

Diese Methode ist besonders effizient. Sie ist in jedem professionellen Web selbstverständlich.

Die beiden anderen Stufen der Anwendung werden nur für solche Elemente verwendet, deren indivielle Formatierung von den zentralen Stylesheet-Regeln abweicht.

Stylesheet und Webseite


Stylesheet-Datei

◀   Links sehen sie ein einfaches Beispiel einer Stylesheet-Datei style1$.css
Die Text-Datei enthält CSS-Regeln, z.B.
*{} ist auf alle HTML-Elemente anzuwenden
body{} ist auf das HTML <body>-Element anzuwenden
h1{} ist auf HTML <h1>-Überschriften anzuwenden


HTML Webseiten-Datei

◀   Links sehen sie den Quelltext einer Mini-Webseite web1$.html

• Im <head>-Element ist ein <link>-Element enthalten, mit dem die zentrale Stylesheet-Datei eingebunden wird.

• Das type-Attribut muss den Wert text/css enthalten, das href-Attribut muss den Pfad zu einer Stylesheet-Datei enthalten.


Browser-Ansicht

◀   Links sehen sie die Browser-Ansicht einer Mini-Webseite, die mit dem gezeigten CSS-Stylesheet formatiert wurde.
Mit diesem ↗ Link können sie das Beispiel in einem eigenen Browser-Tab laden.



Auswahl unter 3 verschiedenen CSS Stylesheets:
1 2 3

Hierarchie der CSS-Regeln

Alle mehrfach anwendbaren Regeln werden in einer einzigen zentralen Stylesheet-Datei festgelegt. Sie gelten für alle angeführten HTML-Elemente auf allen Seiten des Webs.

Wenn darüber hinaus auf einzelnen Webseiten abweichende oder zusätzliche Regeln notwendig sind, dann werden diese in einem HTML <style>-Element festgelegt. Sie gelten für alle HTML-Elemente der jeweiligen Webseite. (→ Demo)

Wenn darüber hinaus für einzelne Elemente individuelle Regeln notwendig sind, dann werden diese in einem style-Attribut festgelegt. Sie gelten nur für das jeweilige einzelne HTML-Element. (→ Demo)


Es ist sehr empfehlenswert, CSS-Stylesheet-Dateien schon bei der Planung eines Webs vorzusehen und zum frühest möglichen Zeitpunkt einzusetzen.
Es ist jedoch nicht notwendig, schon anfangs alle CSS-Regeln perfekt anzugeben.

Wenn CSS in einem Web konsequent angewendet wurde, dann ist die spätere Änderung oder Ergänzung von CSS-Regeln einfach, rasch und billig.

Wenn CSS nicht oder nur teilweise angewendet wird, dann ist die nachträgliche Umstellung auf CSS aufwändig, mühsam und teuer. Die Modernisierung von größeren Webs ist meist nicht wirtschaftlich, d.h. man muss alle Webseiten (mit CSS) neu erstellen.

Stylesheet dieses Webs

Die links gezeigte Stylesheet-Datei enthält die CSS-Regeln für alle Standard-Seiten dieses Webs. Nur die vereinfachten Beispiel-Dateien (z.B. die oben vorgestellte Mini-Webseite) verwenden kein Stylesheet oder andere, stark vereinfachte Stylesheets.

• Der Abschnitt 'Globale Regeln' enthält CSS-Anweisungen, die auf alle HTML-Elemente aller Demo-Webseiten anzuwenden sind.

• Der Abschnitt 'Regeln für HTML-Elemente' enthält CSS-Anweisungen für die meisten hier verwendeten HTML-Elemente. Für alle nicht angeführten HTML-Elemente gelten die vom jeweiligen Browser-Programm festgelegten Standard-CSS-Regeln.

• Der Abschnitt 'Mehrfach verwendbare CSS-Klassen' enthält Regeln, die man mit Angabe von class-Attributen auf jedes beliebige HTML-Element anwenden kann. Beispiel:
<span class="b">fett</span>

• Der Abschnitt 'Mehrfach verwendete Standard-Elemente' enthält Regeln für HTML-Elemente, die mit einem bestimmten id-Attribut identifiziert werden.
Beispiel: Die mit #crumbs{} angegebenen CSS-Regeln werden auf dieses in jeder Demo-Webseite enthaltene Element angewendet:
<div id="crumbs"></div>

• Das Verständnis aller Details der hier gezeigten CSS-Regeln erfordert fortgeschrittene Kenntnisse. Auch für wenig erfahrene EntwicklerInnen sollte die verwendete Technologie jedoch in Grundzügen erkennbar sein.