CSS - Grundlagen - Einbindung

1. Die Möglichkeiten

Insgesamt gibt es deren drei, um Stylesheet-Anweisungen in ein HTML-Dokument einzubinden. Warum man sich weswegen wofür entscheidet, zeige ich euch weiter unten.

2. Innerhalb eines HTML-Elements

Dies geschieht mit dem HTML-Attribut style, das man bei praktisch jedem HTML-Tag einsetzen kann, also zum Beispiel:


<p style="...">Hier kommt jetzt Text</p>

Dies wird auch als Inline-Style bezeichnet und sollte nur in Ausnahmefällen(!) benutzt werden.

3. Innerhalb eines HTML-Dokuments

Hier wird normalerweise im Head-Bereich mit dem <style>-Tag ein Bereich definiert, in dem wir alle(!) unsere CSS-Anweisungen unterbringen.


<html>
  <head>
    <style type="text/css">
      /* ... Hier kommen die CSS-Definitionen ... */
    </style>
  </head>
  ...

Dies ist nicht zwingend erforderlich, man kann das <style>-Tag an jeder beliebigen Stelle im Quellcode setzen und trotzdem gelten die dortigen Definitionen für das ganze Dokument. Nichtsdestotrotz sollte man schon aus Gründen der Übersichtlichkeit tunlichst darauf achten, es in den Header-Bereich zu setzen. Darum wird es ja auch Header-Style genannt! Außerdem ist es offizieller Standard (glaub ich). Und bitte auch nicht die korrekte Definition type="text/css" vergessen.

4. In einer separaten Stylesheet-Datei

Hierbei verweist man über das <link>-Tag auf eine externe CSS-Datei. Der Vorteil liegt dabei auf der Hand. Man kann all seine Anweisungen an zentraler Stelle sammeln und Änderungen innerhalb dieser CSS-Datei gelten automatisch für das ganze Projekt. Die Syntax dafür sieht zum Beispiel so aus:


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

Dabei gelten ein paar Regeln. Die Stylesheet-Datei muss aus reinem Text bestehen und darf nur CSS-Anweisungen und Kommentare enthalten. Das nennt man dann External- oder Seperate-Style (Dank an Deniz für den Hinweis).

5. Guter Stil

Natürlich stellt sich jetzt die Frage, wann man welchen Stil einsetzt. Grundsätzlich sollte man natürlich alles in externe Dateien auslagern. Aber es gibt durchaus Situationen, wo man CSS-Anweisungen nur auf einer Seite innerhalb eines Projekts braucht, oder sogar nur an einer einzigen Stelle innerhalb eines Dokuments. An dieser Stelle werden sich wohl mal wieder die Geister scheiden und die üblichen erbitterten Diskussionen ausbrechen. Ich persönlich gehe folgendermaßen vor.

Stylesheet-Anweisungen, die auf allen Seiten Gültigkeit haben, lagere ich in externe Dateien aus.
Anweisungen, die nur in einer(!) Seite benötigt werden, definiere ich im Kopf der jeweiligen Datei. Aber nur ganz selten.
Sobald ich mit ganz speziellen und einzigartigen(!) Anweisungen arbeiten muss, lege ich die mit dem style-Attribut fest.

Wichtig

Besonders die letzte Variante übt immer wieder einen großen Zwang auf Entwickler aus, da sie die scheinbar einfachste Lösung für viele Probleme ist. Mein eindringlicher Rat an alle, haltet euch damit sehr zurück. Man kommt da leicht in Teufels Küche, vor allem wenn man es zu oft macht.

6. Weitere Möglichkeiten der Strukturierung

Auch wenn jetzt der ein oder andere laut aufschreit und Zeter und Mordio brüllt, so möchte ich doch auf eine, wie ich finde, sehr komfortable Möglichkeit hinweisen. Da bei größeren Internet-Projekten die CSS-Anweisungen ziemlich schnell anschwellen, verliert man irgendwann den Überblick. Eine Alternative bietet das CSS-Element @import.

Damit kann man in einer zentralen CSS-Datei, die über das <link>-Tag eingebunden wird, noch mal unterschiedliche CSS-Dateien einbinden. Die zentrale Datei sieht dann zum Beispiel so aus:


/* allg. HTML-Elemente */
@import url(css/html.css);

/* Rahmen-Definitionen */
@import url(css/rahmen.css);

/* alle Link-Defintionen */
@import url(css/links.css);

/* spez. Klassen */
@import url(css/klassen.css);

Alle Pfadangaben erfolgen relativ zur zentralen CSS-Datei. Man kann so zum Beispiel die Anweisungen nach Ihrer "Art" unterteilen. Alle Link-Definitionen in eine Datei, alle HTML-Definitionen in eine weitere und so weiter. Eine, wie ich finde, elegante Art den Überblick zu behalten.

Ein Hinweis

Mittlerweile ist es Usus, so wenig Anfragen wie möglich an einen Server zu senden. Alle Stylesheet-Anweisungen in einer Datei und Hintergrundbilder werden zu so genannten Slices zusammengefasst.

Interessant dabei ist, dass das vor allem von Suchmaschinenbetreibern wie bekloppt gepredigt wird und angeblich für ein besseres Ranking sorgen soll. Mein persönlicher Verdacht: die wollen Geld sparen und somit die Gesamtdatenmenge reduzieren. Ist aber nur ein Verdacht.

Aber!

Wenn man einen extrem stark besuchten Auftritt hat, so sollte tatsächlich alles so weit wie möglich bündeln. Denn zu viele Request können einen Server ziemlich belasten oder ihn sogar abschießen.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt