In diesem Tutorial zeige ich dir, wie du CSS in HTML einbinden kannst.
CSS kann auf 3 verschiedene Wege in HTML eingebunden werden. Einmal kannst du deine Anweisungen mit der Hilfe einer externen Stylesheet-Datei integrieren, dann kannst du das Style-Tag nutzen oder aber du verwendest Inline-Styles. Wie das alles genau funktioniert und welche Vor- und Nachteile die einzelnen Methoden haben, schauen wir uns jetzt im Detail einmal an.
Für dieses Tutorial solltest du über grundlegende Kenntnisse in HTML verfügen.
Inline-Styles hinzufügen
CSS kann direkt als HTML-Attribute zu jedem HTML-Element hinzugefügt werden. Füge dazu einfach das Style-Attribut zum entsprechenden Element hinzu und lege die CSS-Regel als Wert für das Attribut fest.
Hier ist ein Beispiel für einen Absatz mit Inline-CSS:
<p style="color:white; background-color:orange;">
Dieser Absatz ist mit weißer Schrift auf einem orangen Hintergrund formatiert.
</p>
Dieser Absatz ist mit weißer Schrift auf einem orangen Hintergrund formatiert.
Vorteile von Inline-Styles:
- Inline-Styles haben Vorrang vor externen Anweisungen aus einer Stylesheet-Datei.
- Inline-CSS wird schneller vom Browser verarbeitet, da keine zusätzlichen HTTP-Anfragen erforderlich sind und somit steigt die Website-Performance.
- Eignet sich hervorragend für den Einsatz dynamischer Anweisungen.
- Gut für HTML-E-Mails geeignet.
Nachteile von Inline-Styles:
- Die übermäßige Verwendung von Inline-Styling bläht den Quellcode auf und macht ihn unübersichtlich.
- CSS-Anweisungen müssen für jedes Element der Seite neu definiert werden. Das führt zu einem hohen Schreibaufwand, ist sehr fehleranfällig und nicht gut zu pflegen.
Eingebettetes CSS mit dem Style-Tag
CSS-Anweisungen können auch mit der Hilfe des Style-Tags direkt in den Kopfbereich des HTML-Dokuments eingefügt werden. Hier kannst du deine CSS-Regeln einfach zwischen dem öffnenden und dem schließenden Style-Tag platzieren und die Anweisungen werden vom Browser beim Aufruf interpretiert. Ein Beispiel:
<style type=“text/css“ media=“print“>
p {
color:white;
background-color:orange;
}
</style>
Wenn du diese Anweisung im Kopfbereich deines HTML-Dokuments definierst, werden alle Absätze dieser Seite mit einer weißen Schrift auf orangem Hintergrund dargestellt.
Das Type-Attribut kann bei der Verwendung des Style-Tags weggelassen werden. Der Wert von media bestimmt, wann der Stil angewendet wird. In unserem Beispiel werden die Absätze nur mit weißer Schrift auf einem orangen Hintergrund dargestellt, wenn die Webseite ausgedruckt wird.
Weitere gebräuchliche Werte für das Media-Attribut sind z.B.:
screen– Verwendung auf einem Computerbildschirm.handheld– Anweisungen für tragbare Geräte mit kleinem Bildschirm.speech– Stile für Screenreader.all– Dies ist der Standardwert des Attributes und wird auf alle Medientypen angewendet.
CSS-Regeln blockieren das Rendering deiner Website. Das bedeutet, dass sie die Anzeige anderer Seiteninhalte verhindern, solange sie geladen werden und deine Besucher im schlimmsten Fall einige Sekunden eine weiße Seite im Browser sehen. Aus diesem Grund wird weitläufig empfohlen, CSS in den <head> des HTML-Dokuments einzufügen. Weitere Informationen hierzu findest du im Abschnitt Denkanstoß.
Vorteile:
- Da dein CSS ein Bestandteil des HTML-Dokuments ist, kann auf eine HTTP-Anfrage verzichtet werden und deine Webseite wird schneller im Browser geladen.
- Funktioniert gut mit dynamischen Anweisungen.
- Die Anweisungen aus dem Style-Tag haben Vorrang vor Anweisungen aus externen Stylesheet-Dateien.
Nachteile:
- Seitenweite Änderungen an einzelnen Elementen müssen in jedem HTML-Dokument vorgenommen werden.
- Eingebettete Stile müssen jedes Mal geladen werden, wenn eine Seite angefordert wird. Sie können nicht im Browser-Cache gespeichert werden.
- Inline-Styles haben Vorrang und überschreiben die Anweisungen innerhalb des Style-Tags.
Externe Stylesheets einbinden
Dies ist die gängigste Methode, CSS in HTML einzubinden.
Bei dieser Methode sind alle Anweisung in einer Textdatei enthalten und werden mit der Erweiterung .css gespeichert. Diese Datei wird z.B. auf deinem lokalen Webserver abgelegt und direkt in jedes HTML-Dokument eingebunden. Die Einbindung geschieht standardmäßig über eine Verlinkung der CSS-Datei über das Link-Tag von HTML.
Die Datei kann aber auch zusätzlich per @import-Regel in eine bestehende CSS-Datei importiert werden.
CSS-Datei verlinken
Um eine CSS-Datei in ein HTML-Dokument einzubinden, brauchst du den Link-Tag. Dieser wird im Kopfbereich der Seite platziert und sieht wie folgt aus:
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
Der Wert des rel-Attributs ist stylesheet, was dem Browser mitteilt, dass die verlinkte Datei ein Cascading Style Sheet (CSS) ist.
Wenn du HTML5 verwendest, ist das Attribut type optional. Durch das Entfernen können aber ein paar Bytes beim Laden der Seite eingespart werden.
Im href-Attribut gibst du den Pfad zur CSS-Datei an.
Befindet sich die CSS-Datei im selben Ordner wie die HTML-Datei, ist die Angabe des Pfades nicht erforderlich. In diesem Fall musst du nur den Dateinamen angeben. Ist die Datei in einem anderen Ordner gespeichert, musst du den Pfad relativ zur HTML-Datei hinterlegen.
<link href="odnername/stylesheet.css" ... >
Alternativ kannst du den Pfad auch relativ zum Wurzelverzeichnis deiner Domain angeben. Dazu beginnst du deine Pfadangabe einfach mit einem Schrägstrich und notierst dann den gesamten Pfad bis zur CSS-Datei.
<link href="/ordner1/ordner2/stylessheet.css" ... >
Absolute Pfadangaben sind ebenfalls möglich.
<link href="https://www.yourdomain.com/foldername/mystyles.css" ... >
Eine gute Einführung in das Thema der absoluten und relativen Pfade findest du u.a. bei der Universität zu Köln.
Vorteile der externen CSS-Datei:
- Änderungen werden für alle angesprochenen Elemente auf allen Seiten übernommen.
- Durch die komplette Trennung von Inhalt und Design wird der Quellcode übersichtlicher, leichter lesbar und die Wartbarkeit wird stark verbessert.
- Externe CSS-Dateien können im Browser-Cache gespeichert werden, weshalb die Stylesheets nur einmal vom Webserver geladen werden müssen.
Nachteile der externen CSS-Datei:
- Jede verknüpfte CSS-Datei ist eine zusätzliche HTTP-Anfrage an den Webserver. Zumindest beim ersten Abruf. Zu viele HTTP-Anfragen können das Rendern deiner Website verzögern.
- Die Anweisungen aus der externen CSS-Datei werden nach den Inline-Styles und den Anweisungen aus dem Style-Tag interpretiert.
CSS-Datei importieren
Eine weitere interessante Möglichkeit ist die @import-Regel. Wenn du mit dieser Regel dein CSS in HTML einbindest, können alle Anweisungen einer CSS-Datei in eine andere CSS-Datei geladen werden. Die Einbindung sieht wie folgt aus:
@import "main.css"
Die @import-Regel muss immer zu Beginn des CSS-Dokuments definiert werden und die Regel unterstützt auch die Angabe von Media Queries.
@import "speech.css" speech
Mit dieser Zeile kannst du z.B. eine Stylesheet-Datei importieren, die speziell für Screenreader genutzt wird.
Bei der Angabe des Pfades zur CSS-Datei gelten die gleichen Regeln wie bei der Verwendung des Link-Tags. Du kannst also relative und absolute Pfadangaben nutzen oder wenn beide Dateien im gleichen Verzeichnis liegen, reicht die Angabe des Dateinamens aus.
Vorteile der @import-Regel:
- Du musst neue CSS-Dateien nicht in allen HTML-Dokumenten deiner Website referenzieren. Damit ersparst du dir einiges an Tipparbeit.
Nachteile der @import-Regel:
- Es sind zusätzliche HTTP-Anfragen erforderlich. Jede importierte CSS-Datei erfordert eine zusätzliche HTTP-Anfrage, was die Darstellung der Seite verlangsamen kann.
- CSS-Anweisungen aus der bestehenden CSS-Datei überschreiben die importierten Regeln.
- Bei der @import-Regel werden alle importierten Dateien einzeln und nicht parallel geladen. Der Browser muss also auf die vollständige Verarbeitung jeder Datei warten, bevor er weitere Elemente laden kann.
Die Verwendung der @import-Regel wird auf Grund der negativen Auswirkungen auf die Website-Performance nicht empfohlen.
Denkanstoß
Jetzt weißt du, wie du CSS in HTML einbinden kannst.
In einem deiner nächsten Schritte solltest du dich auf jeden Fall mit den Auswirkungen von CSS auf die Geschwindigkeit deiner Website beschäftigen. Bei den Vor- und Nachteilen hatte ich es ja schon häufiger angeschnitten. Leider haben einige Methoden großen Einfluss auf das Laden deiner Website. Du solltest also genau wissen, warum CSS die Ladezeiten deiner Website beeinflusst und wie du dein CSS für schnelle Ladezeiten optimieren kannst.
Welchen Weg nutzt du, um dein CSS in HTML einzubinden und hast du dich schon einmal mit der Optimierung von CSS beschäftigt? Schreibe mir dazu doch gerne einen Kommentar.
Hinterlasse einen Kommentar