Inline CSS ist CSS, das im style-Attribut eines Elements steht, etwa . Die Deklarationen gelten nur für dieses eine Element, ganz ohne Selektor.

Ausführbare CSS-Docs: Inline CSS

Q: Welche 3 Möglichkeiten gibt es, CSS in HTML einzubinden?

Inline mit dem style-Attribut an einem Element, intern mit einem -Element in der Seite und extern mit einer eigenen .css-Datei, die du mit im einbindest. Für eine ganze Website nimmst du normalerweise externe Dateien.

Q: Überschreibt Inline CSS externes CSS?

Ja, in den meisten Fällen. Eine Deklaration im style-Attribut schlägt jeden Selektor in einem Stylesheet, egal wie spezifisch er ist. Ein Stylesheet gewinnt nur mit !important, und ein inline gesetztes !important schlägt auch das.

Q: Kann man hover in Inline CSS verwenden?

Nein. Das style-Attribut nimmt nur Deklarationen auf, also lassen sich Pseudoklassen wie :hover, Pseudoelemente wie ::before und @media-Regeln dort nicht schreiben. Setz sie in ein -Element oder ein Stylesheet.

Was Inline CSS ist

Inline CSS ist CSS, das du mit dem style-Attribut direkt an ein HTML-Element schreibst. Der Wert ist eine Liste von Deklarationen, property: value;, und sie gelten nur für dieses Element.

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

Es gibt keinen Selektor und keine geschweiften Klammern: Das Element, an dem das Attribut steht, ist das Ziel. Trenne Deklarationen mit Semikolons. Das letzte Semikolon ist optional, aber wenn du es stehen lässt, kannst du gefahrlos die nächste Deklaration anhängen.

Syntax

<element style="property: value; property: value;">

Teil	Beispiel	Hinweise
Attribut	`style="..."`	Ein globales Attribut: an jedem HTML-Element erlaubt
Deklaration	`color: #2563eb;`	Dieselbe Syntax wie in einer Stylesheet-Regel
Mehrere Deklarationen	`padding: 8px; border: 1px solid #e5e7eb;`	Getrennt durch `;`
Anführungszeichen darin	`style="font-family: 'Courier New', monospace;"`	Innerhalb des doppelt gequoteten Attributs einfache Anführungszeichen nehmen

Alles, was keine Deklaration ist, ist nicht erlaubt. :hover, ::before, @media und Selektoren haben in einem style-Attribut nichts zu suchen.

Die 3 Wege, CSS in HTML einzubinden

CSS gelangt auf drei Wegen in eine Seite. Diese Seite behandelt den ersten; externes und internes CSS haben eine eigene Seite.

Methode	Wo das CSS steht	Geltungsbereich	Typischer Einsatz
Inline	`style`-Attribut an einem Element	Dieses Element	Einzelne Werte, Werte aus JavaScript
Intern	`<style>`-Element in der Seite	Diese Seite	Demos auf einer Seite, E-Mail-Templates, Critical CSS
Extern	Eine `.css`-Datei, eingebunden mit `<link>`	Jede Seite, die sie einbindet	Styling einer ganzen Website

Derselbe Absatz auf alle drei Arten gestylt (die externe Datei steht als Kommentar da, weil die Vorschau keine zweite Datei laden kann):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

Der dritte Absatz behält Padding und Radius aus der .note-Regel und ersetzt nur den Hintergrund, weil der Inline-Style genau diese eine Eigenschaft setzt.

Warum Inline-Styles gewinnen

Wenn eine Stylesheet-Regel und ein Inline-Style dieselbe Eigenschaft setzen, gewinnt der Inline-Style. Wie spezifisch der Selektor ist, spielt keine Rolle: Auch ein ID-Selektor verliert.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

Die einzige Ausnahme ist !important. Eine Stylesheet-Deklaration mit !important schlägt eine normale Inline-Deklaration, und ein inline gesetztes !important schlägt beide. Genau deshalb machen Inline-Styles eine Website schwer wartbar: Um sie aus einem Stylesheet zu ändern, brauchst du !important, und damit beginnt eine Eskalation. Die Seite zu !important zeigt die vollständige Reihenfolge.

Wann Inline CSS das richtige Werkzeug ist

Inline-Styles passen, wenn der Wert Daten sind und kein Design: Er ändert sich von Element zu Element und wird von einem Template oder von JavaScript geschrieben.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

Das Aussehen (Farben, Höhe, Radius) steht im Stylesheet. Nur die Breite, die sich pro Balken unterscheidet, ist inline. JavaScript schreibt dasselbe Attribut über element.style:

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

Nach dem Klick lautet das HTML des Absatzes style="color: rgb(245, 158, 11); font-weight: bold;". Eigenschaftsnamen mit Bindestrich werden in JavaScript zu camelCase (font-weight wird fontWeight).

Eine CSS-Variable ist oft der sauberste Mittelweg: Setz nur die Variable inline, style="--progress: 35%", und lass das Stylesheet sie verwenden. Siehe CSS Variablen.

Wo Inline CSS an Grenzen stößt

Keine Zustände oder Pseudoelemente. :hover, :focus oder ::before kannst du nicht in ein style-Attribut schreiben.
Keine Media Queries. Eine Inline-Breite kann sich auf dem Handy nicht ändern.
Wiederholung. Zehn Buttons mit demselben Inline-Style bedeuten zehn Stellen zum Ändern.
Schwer zu überschreiben. Nur !important in einem Stylesheet schlägt ihn.
Content Security Policy. Eine strenge CSP ohne 'unsafe-inline' in style-src blockiert style-Attribute, die im HTML stehen.

Häufige Fehler

Einen Selektor oder Klammern in style schreiben. style="p { color: red }" wird ignoriert. Dort stehen nur Deklarationen.
= statt : verwenden. Es heißt color: red, nicht color=red.
Doppelte Anführungszeichen verschachteln. style="font-family: "Arial"" beendet das Attribut zu früh. Nimm innen einfache Anführungszeichen.
Einheiten vergessen. style="width: 200" wird ignoriert; schreib 200px. Nur eine Länge von 0 darf ihre Einheit weglassen.
Eine ganze Website inline stylen. Verschiebe wiederholte Styles in eine Klasse in einem Stylesheet und behalte Inline-Styles für Werte, die pro Element unterschiedlich sind.

Häufig gestellte Fragen

Was ist Inline CSS?

Inline CSS ist CSS, das im style-Attribut eines Elements steht, etwa <p style="color: red;">. Die Deklarationen gelten nur für dieses eine Element, ganz ohne Selektor.

Welche 3 Möglichkeiten gibt es, CSS in HTML einzubinden?

Inline mit dem style-Attribut an einem Element, intern mit einem <style>-Element in der Seite und extern mit einer eigenen .css-Datei, die du mit <link rel="stylesheet" href="styles.css"> im <head> einbindest. Für eine ganze Website nimmst du normalerweise externe Dateien.

Überschreibt Inline CSS externes CSS?

Ja, in den meisten Fällen. Eine Deklaration im style-Attribut schlägt jeden Selektor in einem Stylesheet, egal wie spezifisch er ist. Ein Stylesheet gewinnt nur mit !important, und ein inline gesetztes !important schlägt auch das.

Ist Inline CSS schlechter Stil?

Für das Styling einer ganzen Website ja: Es wiederholt sich, kann weder :hover noch Media Queries nutzen und ist schwer zu überschreiben. Für einzelne Werte, die JavaScript oder ein Template setzt, ist es in Ordnung, zum Beispiel die Breite eines Fortschrittsbalkens oder eine vom Nutzer gewählte Farbe.

Kann man hover in Inline CSS verwenden?

Nein. Das style-Attribut nimmt nur Deklarationen auf, also lassen sich Pseudoklassen wie :hover, Pseudoelemente wie ::before und @media-Regeln dort nicht schreiben. Setz sie in ein <style>-Element oder ein Stylesheet.

Verwandte Konzepte