CSS einbinden

Zuletzt aktualisiert am 10. Februar 2026

Du weißt jetzt, was CSS ist und wie eine Regel aufgebaut ist. Aber wo schreibst du CSS-Code hin, damit der Browser ihn findet? Es gibt drei Wege, und jeder hat seinen Einsatzzweck.

1. Inline-Styles

Der direkteste Weg: Du schreibst CSS direkt in das style-Attribut eines HTML-Elements.

Inline-Style

<p style="color: #dc2626; font-size: 20px;">
  Dieser Text ist rot und groß.
</p>
<p>Dieser Text ist normal.</p>

Der Style gilt nur für dieses eine Element. Kein Selektor nötig, keine geschweiften Klammern, nur Eigenschaft: Wert Paare, getrennt durch Semikolons.

Wann sinnvoll?

Schnelle Tests während der Entwicklung
Einmalige Ausnahmen, die nirgendwo anders vorkommen
Dynamische Styles, die per JavaScript gesetzt werden

Warum meistens nicht ideal?

Du vermischst HTML und CSS, was die Wartbarkeit verschlechtert
Du kannst denselben Style nicht wiederverwenden
Inline-Styles haben eine sehr hohe Priorität und sind schwer zu überschreiben

2. Internes Stylesheet

Du schreibst deine CSS-Regeln in einen <style>-Block im <head> deines HTML-Dokuments.

Internes Stylesheet

<!DOCTYPE html>
<html lang="de">
  <head>
    <style>
      h2 {
        color: #1a56db;
      }
      p {
        color: #374151;
        line-height: 1.6;
      }
      .highlight {
        background: #fef3c7;
        padding: 4px 8px;
      }
    </style>
  </head>
  <body>
    <h2>Internes Stylesheet</h2>
    <p>Alle Regeln stehen im
      <span class="highlight">Head-Bereich</span>
      der HTML-Datei.</p>
  </body>
</html>

Hier gelten die Regeln für die gesamte Seite. Du kannst Selektoren verwenden, Klassen definieren und beliebig viele Regeln schreiben.

Wann sinnvoll?

Einzelne Seiten mit eigenem Design (z.B. eine Landingpage)
Prototypen, bei denen alles in einer Datei bleiben soll
Critical CSS (wichtige Styles, die sofort geladen werden müssen)

Warum meistens nicht ideal?

Die Styles gelten nur für diese eine HTML-Datei
Bei mehreren Seiten musst du denselben Code kopieren
Die HTML-Datei wird unnötig groß

3. Externes Stylesheet

Der Standard in der Praxis: Du lagerst dein CSS in eine eigene Datei aus und bindest sie per <link>-Tag ein.

Externes Stylesheet einbinden

<!DOCTYPE html>
<html lang="de">
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h2>Externes Stylesheet</h2>
    <p>Das CSS liegt in einer eigenen Datei.</p>
  </body>
</html>

Vorschau

Die Datei style.css enthält dann nur CSS-Code, kein HTML:

Inhalt von style.css

/* style.css */
h2 {
  color: #059669;
  border-left: 4px solid #059669;
  padding-left: 12px;
}

p {
  color: #374151;
  font-size: 16px;
  line-height: 1.6;
}

<h2>Externes Stylesheet</h2>
<p>Das CSS liegt in einer eigenen Datei.
Sauber getrennt, wiederverwendbar und übersichtlich.</p>

Warum das der Standard ist:

Eine CSS-Datei, viele HTML-Seiten: Du schreibst deine Styles einmal und bindest sie überall ein
Der Browser cached die Datei, was nachfolgende Seitenaufrufe schneller macht
HTML und CSS sind sauber getrennt
Große Projekte bleiben übersichtlich

`@import` in CSS

Es gibt noch eine vierte Möglichkeit: Mit @import kannst du innerhalb eines Stylesheets ein anderes Stylesheet laden.

/* style.css */
@import url("reset.css");
@import url("layout.css");

body {
  font-family: system-ui, sans-serif;
}

Wichtig: @import muss immer ganz oben in der CSS-Datei stehen, vor allen anderen Regeln. In der Praxis solltest du @import sparsam einsetzen, weil jeder Import eine zusätzliche HTTP-Anfrage erzeugt. Für Anfänger ist <link> im HTML fast immer die bessere Wahl.

Welche Methode wann?

Methode	Ort	Wiederverwendbar	Caching	Empfehlung
Inline-Style	`style`-Attribut	Nein	Nein	Nur für Ausnahmen
Internes Stylesheet	`<style>` im Head	Nein	Nein	Einzelne Seiten
Externes Stylesheet	`.css`-Datei	Ja	Ja	Standard für Projekte
`@import`	In CSS-Datei	Ja	Teils	Sparsam einsetzen

Priorität der Methoden

Was passiert, wenn verschiedene Methoden denselben Style definieren? Der Browser folgt einer klaren Rangfolge:

Inline-Style überschreibt alles

<style>
  p { color: #1a56db; }  /* Blau aus dem Stylesheet */
</style>

<p style="color: #dc2626;">Welche Farbe gewinnt?</p>
<!-- Antwort: Rot. Inline-Styles gewinnen. -->

Die Rangfolge (von niedrig zu hoch):

Externes Stylesheet: niedrigste Priorität
Internes Stylesheet: überschreibt externes (bei gleicher Spezifität)
Inline-Style: überschreibt alles andere

Das ist ein vereinfachtes Bild. In der Realität spielen auch die Spezifität der Selektoren und die Reihenfolge im Code eine Rolle. Aber für den Anfang reicht diese Faustregel.

Mehrere Stylesheets einbinden

In echten Projekten bindest du oft mehrere CSS-Dateien ein:

<head>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="layout.css">
  <link rel="stylesheet" href="style.css">
</head>

Die Reihenfolge ist wichtig: Spätere Dateien können Regeln aus früheren überschreiben (bei gleicher Spezifität). Deshalb kommen Reset-Styles immer zuerst und eigene Styles zuletzt.

Häufige Fehler

<link> außerhalb des <head>: Das <link>-Tag gehört in den <head>, nicht in den <body>. Der Browser akzeptiert es manchmal trotzdem, aber es ist kein gültiges HTML.
rel="stylesheet" vergessen: Ohne dieses Attribut weiß der Browser nicht, dass es sich um CSS handelt. Die Datei wird geladen, aber nicht als Stylesheet interpretiert.
Falscher Dateipfad: Wenn die CSS-Datei nicht geladen wird, prüfe den Pfad. Relative Pfade (style.css) beziehen sich auf den Ort der HTML-Datei, nicht auf das Projekt-Root.
@import nach anderen Regeln: @import funktioniert nur am Anfang einer CSS-Datei. Steht es nach einer Regel, wird es ignoriert.
Inline-Styles für alles verwenden: Inline-Styles sind verlockend, weil sie sofort wirken. Aber sie machen dein HTML unlesbar und sind nicht wiederverwendbar.

Zusammenfassung

Konzept	Beschreibung
Inline-Style	`style`-Attribut direkt am Element
Internes Stylesheet	`<style>` im `<head>` des HTML-Dokuments
Externes Stylesheet	Eigene `.css`-Datei, eingebunden per `<link>`
`@import`	CSS-Datei in einer anderen CSS-Datei laden
Priorität	Inline > Intern > Extern (vereinfacht)
Best Practice	Externes Stylesheet als Standard verwenden

Jetzt weißt du, wie du CSS einbindest. Als Nächstes lernst du die Selektoren kennen, mit denen du bestimmst, welche Elemente deine CSS-Regeln treffen sollen.

Erhalte neue Inhalte direkt in dein Postfach

Was erwartet dich?

Neue Artikel & Videos

Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.

Plattform & Kurs-Updates

Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.

Einmal die Woche in deinem Postfach

Kurz, auf den Punkt, kein Spam.