CSS einbinden

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

<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

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

<!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ß

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

<!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>

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

/* 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

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.

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

<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):

1. Externes Stylesheet: niedrigste Priorität
2. Internes Stylesheet: überschreibt externes (bei gleicher Spezifität)
3. 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.

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.

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.