88 Stimmen

CSS-Stylesheets in HTML einbinden

Tutorial von Stefan Trost | Letztes Update am 17.02.2023 | Erstellt am 01.01.2015

Mit CSS-Stylesheets lassen sich die Elemente einer HTML-Seite gestalten. In diesem Tutorial möchte ich allerdings nicht darauf eingehen, welche Möglichkeiten CSS bietet, sondern erklären, wie man CSS in seine HTML-Seite einbinden kann.

Wir schauen uns im folgenden an, wie man CSS als externe Datei, innerhalb der HTML-Datei oder nur für einzelne HTML-Elemente definieren kann. Der letzte Abschnitt widmet sich der Kombination daraus.

CSS als externe Datei einbinden

Der Königsweg geht über eine externe Datei. Alle CSS-Regeln werden einfach in einer Datei gespeichert und diese dann im Head der HTML-Seite eingebunden. Die Dateiendung für CSS-Dateien ist dabei CSS.

Schauen wir uns ein Beispiel an:

<!DOCTYPE html>
<html>
  <head>
    <title>Seitentitel</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Überschrift</h1>
    <p>Absatz</p>
  </body>
</html>

Die Einbindung geschieht durch den HTML-Tag "link" (Verweis) im Head unserer HTML-Seite, der die Angaben "rel", "type" und "href" enthalten muss. Dabei steht "rel" (relation oder Bezug) immer auf "stylesheet" und "type" auf "text/css", was der MIME-Type einer CSS-Datei ist. Unsere eigentliche externe CSS-Datei geben wir im Attribut "href" an. Hier möchten wir also die Datei "style.css" einbinden. Bitte beachten: Wenn die CSS-Datei in einem Unterverzeichnis auf dem Webspace liegt, muss hier natürlich die Verlinkung und der Pfad angepasst werden.

Die Datei "style.css" ist eine reine Textdatei, die unsere CSS-Regeln enthält. Sie könnte beispielsweise so aussehen und kann mit jedem Texteditor erstellt werden:

h1 { font-size: 14px; padding-bottom: 10px; }
p  { font-size: 10px; }

Der Vorteil, CSS-Regeln durch eine externen Datei einzubinden, liegt auf der Hand: Wir können für unsere gesamte Website eine zentrale CSS-Datei anlegen, die wir dann in alle Einzelseiten einbinden können.

Dadurch müssen die CSS-Regeln nicht auf jeder Seite wiederholt werden und die Wartung der Homepage wird sehr vereinfacht: Wenn wir zum Beispiel die Schriftgröße eines Elements ändern möchten, können wir unsere CSS-Datei anpassen und die Änderung ist sofort auf allen Seiten sichtbar, ohne alle HTML-Seiten einzeln ändern zu müssen.

CSS innerhalb der HTML-Datei definieren

Möchte man CSS-Regeln definieren, die nur für eine bestimmte HTML-Datei gelten, kann man die Regeln auch direkt in den Head ohne Einbindung einer externen Datei schreiben. Hier ist ein Beispiel:

<!DOCTYPE html>
<html>
<head>
<title>Seitentitel</title>
<style type="text/css">
<!--
h1 { font-size: 14px; padding-bottom: 10px; }
p  { font-size: 10px; }
-->
</style>
</head>
  <body>
    <h1>Überschrift</h1>
    <p>Absatz</p>
  </body>
</html>

Die Regeln werden mit dem HTML-Tag "style" eingeschlossen und der einleitende style-Tag kann wieder die Angabe zum MIME-Type (text/css) enthalten. Alternativ können wir auch nur "<style>" schreiben, auch das verstehen die Browser.

Optional ist es, die Regeln als einen HTML-Kommentar einzuschließen (<!-- und -->). Dies ist gängige Praxis, damit ältere Browser die CSS-Regeln nicht als Text interpretieren. Heutzutage spielt dies aber kaum noch eine Rolle, da alle gängigen Browser CSS verstehen.

Der Vorteil dieser Methode, CSS einzubinden, ist, dass man die globale CSS-Datei nicht unnötig durch Regeln aufbläht, die vielleicht nur auf einer Seite vorkommen, man aber gleichzeitig Regeln für die Elemente auf der gesamten Seite definieren kann.

CSS nur für einzelne HTML-Elemente

Zuletzt ist das auch möglich, CSS nur für bestimmte Elemente zu verwenden. Auch dafür möchten wir uns ein Beispiel ansehen:

<!DOCTYPE html>
<html>
  <head>
    <title>Seitentitel</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1 style="font-size: 14px; padding-bottom: 10px">Überschrift</h1>
    <p style="font-size: 10px">Absatz</p>
  </body>
</html>

Wir benutzen dazu das Attribut "style", dass wir direkt zu unserem gewünschten HTML-Elemente hinzufügen. Die CSS-Regeln für das jeweilige Element fügen wir einfach mit style="[CSS-Regeln]" wie im Beispiel ersichtlich ein.

Diese Methode könnte man zum Beispiel benutzen, wenn man wirklich nur ein Element etwas anderes gestalten möchte. Generell empfiehlt sich aber auf diese Methode weitestgehend zu verzichten, da es eine bessere Praxis ist, Inhalt und Styling getrennt voneinander zu halten.

CSS aus verschiedenen Quellen kombinieren

Wir sind nicht darauf angewiesen, uns auf eine der drei Methoden zu beschränken. Vielmehr können wir alle drei Methoden kombinieren. Dabei überschreibt immer die zuletzt genannte Regel die zuvor genannte.

Wenn wir zum Beispiel im Head eine separate CSS-Datei eingebunden haben und direkt darunter seitenspezifische CSS-Regeln definieren, überschreiben die zuletzt genannten Seiten spezifischen Regeln die Regeln der CSS-Datei. Wenn wir dann zusätzlich noch einzelne Elemente mit abweichenden Regeln versehen, würden sowohl die Regeln aus der externen Datei als auch der Seite überschrieben.

Haben wir beispielsweise in der externen CSS-Datei für alle "p-Elemente" die Schriftgröße "14" und den Schriftstyle "fett" angegeben und überschreiben wir diese Regel mit "p { font-size: 12; }", so bleibt die Schrift fett, ändert sich jedoch in der Größe, da nur die Größe überschrieben wurde.

AntwortenPositivNegativ

Über den Autor

AvatarSoftware von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen

 

Ähnliche Themen

jQuery: CSS Stylesheet Switcher

Tutorial | 1 Kommentar

Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache

Tipp | 2 Kommentare

HTML: Unterschied zwischen ID und CLASS

Info | 0 Kommentare

Website Performance: Javascript und CSS komprimiert ausliefern und Ladezeiten verkürzen

Tutorial | 0 Kommentare

Hintergrund einer Website verdunkeln (Gray Out Effekt)

Tutorial | 0 Kommentare

jQuery: Elemente, Bilder, Klassen etc zählen

Tipp | 0 Kommentare

Windows Batch Script: Computer herunterfahren

Tutorial | 2 Kommentare

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.