Externe CSS-Dateien

Wozu?

  • Wenn Sie nur eine einzige HTML-Seite erstellen und formatieren, dann ist das Auslagern der CSS-Formatierungen eher nicht anzustreben, damit alle zur Seite gehörigen Informationen mit einem einzigen Abruf vom Server geladen werden können. Solche einzelnen Seiten werden etwas schneller geladen. Aber wer hat im Internet nur eine einzige Seite?
  • HTML-Seiten im Internet lassen sich meistens schnell einem bestimmten Anbieter zuordnen. Der Grund dafür ist, dass z.B. alle Seiten von Ebay, Amazon usw. ein einheitliches Layout haben. Die Schriftarten sind identisch und in der gleichen Größe, die verwendeten Farben sind identisch usw.
  • Wenn solche Formatierungen auf vielen Seiten vorgenommen werden müssen, dann ist es sinnvoll, diese Formatierungen in eine eigene Datei auszulagern/zu schreiben. Die externe Datei muss auch nur ein einziges Mal in den Zwischenspeicher des Computers geladen werden und wird dann in der Regel auch für alle weiteren Seiten des gleichen Anbieters genutzt. Wenn es also klar ist, dass mehrere Seiten eines Anbieters hintereinander genutzt werden, dann ist die Auslagerung der CSS-Formatierungen anzustreben.

Wie geht das?

  • In der folgenden HTML-Vorlage sehen Sie im Header eine Zeile, welche mit dem link-Tag anfängt und auf eine Datei style.css im gleichen Verzeichnis verweist:
<!DOCTYPE html>
<html>
 
<head>
  <title>Titel</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body>
  <h1>Überschrift</h1>
  Text text text
</body>
 
</html>
  • In der externen Datei stehen CSS-Formatierungen wie z.B.
@charset"utf-8";
 
body
{
   text-align       : center;
   background-color : red;
}
Auch die Verwendung von charset ist zu empfehlen! Der angegebene Charset dient dazu, dass ohne Probleme in Texten der CSS-Datei alle Zeichen des UTF-8 Zeichensatzes verwendet werden können. :-)
Dieses funktioniert allerdings nur, wenn Ihr Editor auch so eingestellt ist (im Notepad++ unter Kodierung z.B. UTF-8 ohne BOM).