Ausführbare CSS-Docs: Externes CSS

Q: Was ist externes CSS?

Externes CSS ist ein Stylesheet in einer eigenen .css-Datei, das mit im der Seite geladen wird. Jede Seite, die die Datei einbindet, bekommt dieselben Styles, und der Browser cacht die Datei zwischen den Seiten.

Q: Wie verknüpfe ich eine CSS-Datei mit HTML?

Füge in den ein. Das href ist ein Pfad relativ zur HTML-Datei: css/styles.css zeigt in einen css-Ordner daneben, und /styles.css beginnt beim Wurzelverzeichnis der Website.

Q: Warum funktioniert mein externes CSS nicht?

Die üblichen Ursachen sind ein falscher href-Pfad (prüf im Netzwerk-Tab, ob es einen 404 gibt), ein fehlendes rel="stylesheet", -Tags in der .css-Datei oder eine spätere Regel, die deine überschreibt. Ein Hard Refresh schließt eine alte Kopie aus dem Cache aus.

Externes CSS in einer Zeile

Externes CSS ist eine eigene .css-Datei. Du bindest sie im <head> jeder Seite ein, die sie braucht:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Die Datei selbst enthält reine CSS-Regeln, ohne HTML-Tags drumherum:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

Die Vorschau unten kann keine zweite Datei laden, deshalb steht dasselbe CSS in einem <style>-Element. Das ist internes CSS, und es wird genau so dargestellt wie die eingebundene Datei:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

Internes CSS: das style-Element

Internes CSS (auch eingebettetes CSS) ist ein <style>-Element innerhalb der Seite. Setz es in den <head>, damit die Styles bekannt sind, bevor der Body gerendert wird. Es gilt für die ganze Seite, und seine Regeln verwenden Selektoren, was Inline-style-Attribute nicht können.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

Fahr mit der Maus über einen Tag: :hover funktioniert hier, weil es eine echte Regel ist. Der dritte Weg, das style-Attribut, steht auf der Seite zu Inline CSS.

Internes vs. externes CSS

	Extern (`<link>`)	Intern (`<style>`)
Wo	Eine `.css`-Datei	In der HTML-Seite
Geltungsbereich	Jede Seite, die sie einbindet	Eine Seite
Caching	Einmal geladen, auf allen Seiten wiederverwendet	Wird mit jeder Seite neu gesendet
Aussehen der Website ändern	Eine Datei ändern	Jede Seite ändern
Zusätzlicher Request	Ja, einer pro Datei	Nein
Geeignet für	Echte Websites	Demos, einzelne Seiten, HTML-E-Mails, Critical CSS

Die Spezifität ist bei beiden gleich: Eine Regel in einem <style>-Element und dieselbe Regel in einer eingebundenen Datei wiegen genau gleich viel. Bei Gleichstand gewinnt die, die später im Dokument steht.

Reihenfolge: das spätere Stylesheet gewinnt

Stylesheets werden in Dokumentreihenfolge gelesen, <link> und <style> gleichermaßen. Von zwei Regeln mit derselben Spezifität gewinnt die spätere. Die beiden <style>-Blöcke unten stehen für eine eingebundene Datei, gefolgt von einer Überschreibung auf Seitenebene:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

Der Button behält Padding und weiße Schrift aus der ersten Regel und übernimmt nur den Hintergrund aus der zweiten. Deshalb kommt das eigene Stylesheet einer Website nach dem eines Frameworks: erst die Bibliothek mit <link> einbinden, dann deins.

Dateipfade in href

Das href eines <link> ist eine URL, die relativ zum Speicherort der HTML-Datei aufgelöst wird.

href	Lädt
`styles.css`	Eine Datei im selben Ordner wie die Seite
`css/styles.css`	Einen `css`-Ordner neben der Seite
`../styles.css`	Einen Ordner höher
`/styles.css`	Ab dem Wurzelverzeichnis der Website
`https://example.com/a.css`	Eine vollständige URL auf einem anderen Server

Liegen die Seiten einer Website in unterschiedlicher Tiefe, funktioniert die wurzelrelative Form (/css/styles.css) mit einem einzigen Pfad auf jeder Seite.

Stylesheets für Druck und andere Medien

Ein media-Attribut beschränkt ein Stylesheet auf passende Bedingungen. Sowohl <link> als auch <style> akzeptieren es:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

Die Vorschau ist ein Bildschirm, also ist das Banner zu sehen. Auf einer echten Seite verschwindet das Banner aus dem Ausdruck, und in den DevTools siehst du dasselbe, wenn du den Medientyp print emulierst (Rendering-Panel).

Häufige Fehler

Falscher Pfad. Ein Tippfehler in href lädt nichts, und die Seite wird ohne Styles dargestellt. Öffne die DevTools, Netzwerk-Tab, und such nach einem 404 für die .css-Datei.
rel="stylesheet" vergessen. Ohne das lädt <link href="styles.css"> kein Stylesheet.
HTML in der .css-Datei. Eine .css-Datei enthält nur Regeln. <style>-Tags darin sind kein gültiges CSS und machen die benachbarte Regel kaputt.
Das eigene Stylesheet vor das des Frameworks setzen. Bei gleicher Spezifität gewinnt die spätere Datei, also bindest du dein eigenes CSS zuletzt ein.
Eine alte Version sehen. Browser cachen Stylesheets. Mach einen Hard Refresh oder hänge beim Deployment eine Version an die URL (styles.css?v=2).

Häufig gestellte Fragen

Was ist externes CSS?

Externes CSS ist ein Stylesheet in einer eigenen .css-Datei, das mit <link rel="stylesheet" href="styles.css"> im <head> der Seite geladen wird. Jede Seite, die die Datei einbindet, bekommt dieselben Styles, und der Browser cacht die Datei zwischen den Seiten.

Was ist internes CSS?

Internes CSS, auch eingebettetes CSS genannt, steht in einem <style>-Element im HTML-Dokument selbst, meist im <head>. Es gilt nur für diese Seite.

Wie verknüpfe ich eine CSS-Datei mit HTML?

Füge <link rel="stylesheet" href="styles.css"> in den <head> ein. Das href ist ein Pfad relativ zur HTML-Datei: css/styles.css zeigt in einen css-Ordner daneben, und /styles.css beginnt beim Wurzelverzeichnis der Website.

Was ist besser, internes oder externes CSS?

Externes CSS für alles mit mehr als einer Seite: eine Datei zum Bearbeiten, und Browser laden sie einmal herunter und verwenden sie wieder. Internes CSS passt zu einer einzelnen Seite, einer Demo oder einem kleinen Block kritischer Styles, die in der ersten Antwort mitkommen sollen.

Warum funktioniert mein externes CSS nicht?

Die üblichen Ursachen sind ein falscher href-Pfad (prüf im Netzwerk-Tab, ob es einen 404 gibt), ein fehlendes rel="stylesheet", <style>-Tags in der .css-Datei oder eine spätere Regel, die deine überschreibt. Ein Hard Refresh schließt eine alte Kopie aus dem Cache aus.

Verwandte Konzepte