CSS in HTML einbinden: Eine Anleitung mit Beispielen

Bei einer Website ist nicht nur der Inhalt entscheidend, sondern auch dessen Präsentation. Um HTML ansprechend zu formatieren, kommt die Stylesheet-Sprache CSS zum Einsatz. So werden Attribute wie Layout, Farbe und Form der einzelnen HTML-Elemente festgelegt. Dabei existieren die CSS-Gestaltungsanweisungen unabhängig von HTML und müssen erst in das elektronische Dokument eingebunden werden.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

CSS einbinden: Welche Methoden gibt es?

Wenn Sie CSS in HTML einbinden, ist dies durch interne oder externe Stylesheets möglich. Bei internen Stylesheets befinden sich die CSS-Anweisungen direkt im HTML-Dokument. Hier besteht die Möglichkeit, CSS am Anfang der HTML-Datei zu integrieren oder direkt und fortlaufend im Quellcode unterzubringen. Bei dieser Methode ist ein gutes Grundverständnis von HTML und dessen Syntax von Vorteil. Die gängigste und sauberste Methode bei der Entwicklung von Websites ist die Verwendung von externen CSS-Stylesheets. Dabei erfolgt die CSS-Einbindung durch eine Verlinkung des HTML-Dokuments mit einer externen CSS-Datei. Im Folgenden die drei Methoden im Überblick:

  • Inline-Style, d.h. direkt im Quellcode
  • am Anfang des HTML-Dokuments
  • ausgelagert in externer CSS-Datei
Tipp

Mit dem Homepage-Baukasten MyWebsite wählen Sie aus vielen vorgefertigten Design-Vorlagen und erzielen so einen professionellen Look für Ihre Website.

CSS einbinden: Inline-Style

Bei dieser Methode wird die Gestaltungsanweisung mithilfe eines style-Tags direkt im Quellcode eingebunden. Die gewünschten Eigenschaften sind so nur einem Element zugewiesen, sodass im Verlauf des HTML-Dokuments abweichende Designs möglich sind. Im Beispiel unten soll die Überschrift h1 in der Farbe Blau und in Schriftgröße 14 dargestellt werden:

<h1 style="color:blue; font-size:14px;">Dies ist eine Überschrift</h1>

Bei dieser Art von Einbindung gilt es zu beachten, dass viele Vorteile, die CSS mit sich bringt, verloren gehen. Dazu gehört die Möglichkeit, einen übergreifenden Befehl festzulegen, der dann beispielsweise für alle h1-Elemente im HTML-Dokument gilt. Unter Umständen entsteht auch ein größerer Wartungsaufwand, da direkt in den HTML-Code eingegriffen wird.

Am Anfang von HTML CSS einbinden

Bei dieser Variante binden Sie CSS in den Kopfbereich Ihres HTML-Dokuments ein. Das style-Tag wird so zum Teil des head-Elements und gilt für die gesamte Datei. Hier sind die Gestaltungsanweisungen zwar immer noch im Dokument selbst untergebracht, vom HTML-Code jedoch deutlich besser getrennt. Im Beispiel unten gilt derselbe Befehl wie im vorherigen Beispiel. Diesmal sollen jedoch alle h1-Überschriften in der Datei nach den Angaben formatiert werden.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:14px;}
</style>
</head>
<body>
<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>

CSS mit ausgelagerter Datei integrieren

Dies ist wahrscheinlich die beste Methode, mit der Sie CSS in HTML einbinden können. Eine Website besteht nämlich oft aus vielen Seiten, sodass es sinnvoll ist, Gestaltungsanweisungen in einer separaten Datei zu speichern. Das ermöglicht eine saubere Trennung zwischen Inhalt und Design und erleichtert die Wartung. Die ausgelagerte Datei wird einfach mit dem HTML-Dokument verknüpft. Dabei speichern Sie das externe Stylesheet mit der Endung .css und verwenden dann ein link-Tag, um es in Ihre HTML-Datei einzubinden. Im Beispiel trägt die CSS-Datei den Namen stylesheet.css.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Absatz</p>
</body>
</html>

Das Attribut rel definiert hier den logischen Beziehungstyp und href bezieht sich auf die einzubettende CSS-Datei. Beachten Sie, dass das link-Element auch andere Attribute haben kann. Mit der Eigenschaft media="print" legen Sie beispielsweise fest, dass das Stylesheet nur in der Druckansicht zum Einsatz kommt. Das externe Stylesheet enthält keine HTML-Tags, sondern lediglich den jeweiligen Selektor und geschweifte Klammern mit den Deklarationen wie im folgenden Beispiel:

h1 {
    color: blue;
    font-size:14px;
}
Tipp

Lernen Sie die besten CSS-Tricks, um das Design Ihres Webprojekts zu optimieren oder vertrauen Sie gleich dem Website Design Service für eine professionelle Umsetzung.

War dieser Artikel hilfreich?