CSS-Regeln für ganze Dokumente

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

Diese Methode ist wesentlich effizienter als die → individuelle Formatierung jedes einzelnen Elements.

Sie ist jedoch weniger effizient als die Festlegung von CSS-Regeln für beliebig viele Dokumente mit → Stylesheet-Dateien.

Live-Demonstration

CSS-Anweisung:
div.txt{background-color:rgb(255,255,255);}


CSS-Anweisung:
hr{background-color:transparent; height:0px;}


CSS-Anweisung:
h1{color:rgb(0,0,0);}
h2{color:rgb(0,0,0);}
h3{color:rgb(0,0,0);}


Man benötigt keine Javascript-Kenntnisse, um die nachfolgend vorgestellten Beispiele anzuwenden.

CSS-Regeln für HTML-Elemente

HTML-Quelltext (vereinfachter Ausschnitt):
<head>
...
<style type="text/css">
/* CSS-Anweisungen */
</style>
...
</head>


CSS-Quelltext:
body {background-color:#CCF;}
h1 {color:#F00;}
Das Beispiel legt eine Hintergrund-Farbe für das <body>-Element und eine Schrift-Farbe für alle <h1>-Elemente (Überschriften) fest.


HTML-Quelltext (Ausschnitt):
<body>
<h1>Ein H1-Element</h1>
Einfacher Text
<h1>Ein weiteres H1-Element</h1>
usw.
</body>

CSS-Klassen

CSS-Quelltext:
.test {background-color:#FF9; font-weight:bold;}
Das Beispiel legt eine Hintergrund-Farbe und den Schrift-Schnitt 'fett' fest.


HTML-Quelltext (Ausschnitt):
<body>
...
<h1 class="test">Test</h1>
<div class="test">DIV-Element</div>
Ein <span class="test"> Test </span> Element
...
</body>

Anwendung

Tipps

Verwenden sie nach Möglichkeit eine zentrale → Stylesheet-Datei.
Verwenden sie <style>-Elemente in einzelnen Webseiten (nur) für jene Regeln, die sich von jenen im Stylesheet unterscheiden.
Verwenden sie die → individuellen Formatierung mit style-Attributen nur für solche Fälle, die weder durch das Stylesheet noch durch das <style>-Element geregelt werden.

Dieses Web

Mit Klick auf diesen → Link wird die zentrale StyleSheet-Datei angezeigt, die von den meisten Seiten verwendet wird.