CSS in ein HTML-Dokument einbinden
Grundsätzlich stehen drei Methoden zur Verfügung, um CSS-Anweisungen in den Quelltext einer Website einzubinden – extern, intern und inline:
Externes Stylesheet
Alle CSS-Anweisungen werden in einer (oder mehreren) Textdateien gebündelt gespeichert. Im Kopfbereich jeder Webseite erfolgt dann der entsprechende Aufruf.
Beispiel einer einfachen Stylesheet-Datei (meine-styles.css):
body { font-family:Arial,Helvetica,sans-serif; margin:0px; background-color:#fff; background-image:url(../Resources/pagebackground.png); background-size:contain; background-attachment:fixed; height:100% }
html { height:100% }
a:link { color:#163eff }
a:visited { color:#163eff }
a:hover { color:#7898ff }
a:active { color:#c8d0ff }
h1 { color:#282828; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:150%; text-align:left }
.mainText { color:#282828; font-family:Arial,Helvetica,sans-serif; font-size:medium; text-align:justify }
.mainTextRight { color:#282828; font-family:Arial,Helvetica,sans-serif; font-size:medium; text-align:right }
.mainTextSmall { font-size:90% }
.mainTextLarge { font-weight:bold; text-decoration:none; font-size:120% }
.specialText { color:#606060; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:150%; text-align:center }
@media print
{
.specialText { font-size:120% }
h1 { font-size:120% }
.mainTextLarge { font-size:medium }
}
Einbindung dieser Datei in den Header des HTML-Dokuments:
<head>
<title>Das ist meine Website</title>
<author>I bims</author>
<link rel="stylesheet" href="css/meine-styles.css">
</head>
Die Einbindung der Stylesheet-Datei erfolgt über das „link“-Element, welches Verbindungen der HTML-Datei zu anderen Dateien definiert.
Das Attribut „rel“ definiert den Beziehungstyp (muss für CSS auf „stylesheet“ lauten), während das Attribut „href“ die Position der Datei auf dem Server enthält (hier lokal im Unterverzeichnis ./css).
Anmerkung: Externe Stylesheets dürfen ausschließlich im Header einer Webseite eingebunden werden. Die meisten Browser akzeptieren Aufrufe zwar auch innerhalb des <html>…</html>-Bereichs, ordnen diese dann aber in einer Art Fehlerkorrektur dem Header zu.
Internes Stylesheet
Hierbei erfolgt die Einbindung der einzelnen CSS-Anweisungen direkt in den Kopfbereich der Webseite.
Ausschnitt eines HTML-Dokuments mit internem Stylesheet:
<head>
<title>Das ist meine Website</title>
<author>I bims</author>
<style>
h1 { color:#282828; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:150%; text-align:left }
.mainText { color:#282828; font-family:Arial,Helvetica,sans-serif; font-size:medium; text-align:justify }
.mainTextRight { color:#282828; font-family:Arial,Helvetica,sans-serif; font-size:medium; text-align:right }
.mainTextSmall { font-size:90% }
.mainTextLarge { font-weight:bold; text-decoration:none; font-size:120% }
.specialText { color:#606060; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:150%; text-align:center }
</style>
</head>
Anmerkung: Die Einbindung von Style-Anweisungen ist auch innerhalb des <html>…</html>-Bereichs erlaubt, kann allerdings während des Seitenaufbaus zu kurzfristigen Anomalien in der Darstellung führen.
Innerhalb eines HTML-Tags (inline)
<div id="beispiel1" style="background-color:#ffffff; border:5px; margin-top:10px;">Hier steht ein Text.</div>
<div id="beispiel2" class="meinText" style="background-color:#e8e8e8;">Hier steht ein Text.</div>
Das „style“-Attribut enthält eine Semikolon-getrennte Liste der CSS-Anweisungen für das jeweilige Element (hier eine „div“-Box).
Wird zusätzlich das „class“-Attribut angegeben, also dem Element eine vordefinierte CSS-Klasse zugeordnet, überschreiben die Anweisungen im „style“-Attribut eventuell vorhandene Einstellungen der Klasse.
Welche Methode zur Einbindung von CSS ist am geeignetsten?
Idealerweise sollten ausschließlich externe Stylesheets zum Einsatz kommen, da sie spätere Änderungen am Layout enorm vereinfachen – alle Layout-Eigenschaften der gesamten Website befinden sich so zentral in einer oder mehreren Dateien.
Es spricht jedoch nichts dagegen, interne Stylesheets zu verwenden und/oder diese mit inline-Stylesheets zu kombinieren. In den meisten Fällen führt dies allerdings zu einem höheren Wartungsaufwand.
Aus technischer Sicht spielt die Art und Weise der Einbindung keine Rolle. Wollte man den Erbsenzähler mimen, so bieten externe Stylesheets die schlechtere Performance, da zum Laden der Stylesheet-Datei ein weiterer Aufruf an den Webserver gestartet werden muss. Allerdings ist dieser Nachteil ausschließlich theoretischer Natur und gilt seit Einführung von HTTP/2 als überholt.
CSS für Fortgeschrittene (Lesetipp)
Am besten lernt man CSS nach der Methode „learning by doing“!
Unsere ausführlichen CSS-Tutorials helfen Ihnen dabei, sich mit CSS und damit verbundenen Web-Technologien wie HTML und JavaScript vertraut zu machen.
Autor: Tobias Eichner | Datum der Veröffentlichung: November 2018
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!
