<style>

Zuletzt aktualisiert am 3. Februar 2026

Das <style>-Element bettet CSS-Regeln direkt in ein HTML-Dokument ein. Es ermöglicht dir, Styles zu definieren, ohne eine externe CSS-Datei zu benötigen. Im Gegensatz zum style-Attribut, das nur einzelne Elemente stylt, kannst du im <style>-Element vollwertige CSS-Regeln mit Selektoren schreiben. Im Unterschied zum <link>-Element wird kein zusätzlicher HTTP-Request benötigt.

Grundlagen

Das <style>-Element steht normalerweise im <head> des Dokuments und enthält CSS-Regeln zwischen den öffnenden und schließenden Tags. Seit HTML5 ist es auch im <body> erlaubt, sollte dort aber nur in Ausnahmefällen verwendet werden.

Es gibt drei Möglichkeiten, CSS in HTML einzubinden:

Externe Stylesheets über <link> sind ideal für wiederverwendbare Styles über mehrere Seiten hinweg. Eingebettete Stylesheets über <style> eignen sich besonders für Critical CSS (Styles, die für den sichtbaren Bereich beim ersten Laden benötigt werden) oder seitenspezifische Styles. Inline-Styles über das style-Attribut sollten nur für Ausnahmen verwendet werden.

Der große Vorteil des <style>-Elements: Es benötigt keinen zusätzlichen HTTP-Request, was die Ladezeit verbessern kann. Allerdings wird das Stylesheet nicht gecacht, sodass es bei jedem Seitenaufruf neu geladen wird.

Syntax

Grundsyntax
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background: #f0f0f0;
      color: #333;
    }
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Gestylte Überschrift</h1>
  <p>Text mit eingebettetem CSS.</p>
</body>
</html>
Vorschau

Attribute

Attribut Typ Beschreibung Beispiel
media String Gibt an, für welche Medientypen die Styles gelten. Unterstützt Media Queries für responsive Design oder spezifische Ausgabeformate. media="print"
nonce String Kryptographischer Nonce-Wert für Content Security Policy (CSP). Ermöglicht die Ausführung des Stylesheets trotz strikter CSP-Regeln. nonce="abc123random"

Beispiele

Eingebettete Styles

Klassische Verwendung mit verschiedenen CSS-Regeln im Head-Bereich:

Basis-Styles
<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

    .button {
      background: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .button:hover {
      background: #0056b3;
    }
  </style>
</head>
<body>
  <div class="container">
    <button class="button">Klick mich</button>
  </div>
</body>
</html>
Vorschau

Media-spezifische Styles

Mit dem media-Attribut kannst du Styles für bestimmte Ausgabeformate definieren. Hier ein Beispiel für Druckstyles:

Print-Stylesheet
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>

  <style media="print">
    body {
      font-size: 12pt;
      color: black;
    }

    .no-print {
      display: none;
    }
  </style>
</head>
<body>
  <h1>Artikel-Überschrift</h1>
  <p>Dieser Text wird gedruckt.</p>
  <button class="no-print">Drucken</button>
</body>
</html>
Vorschau

Critical CSS

Eine häufige Performance-Optimierung ist es, die wichtigsten Styles inline im <style>-Element zu laden und die restlichen Styles asynchron nachzuladen:

Critical CSS (Above-the-fold)
<!DOCTYPE html>
<html>
<head>
  <!-- Critical CSS für sofortiges Rendering -->
  <style>
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
    }

    .hero {
      height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero h1 {
      font-size: 3rem;
      margin: 0;
    }
  </style>

  <!-- Restliches CSS asynchron laden -->
  <link rel="stylesheet" href="main.css" media="print" onload="this.media='all'">
</head>
<body>
  <div class="hero">
    <h1>Willkommen</h1>
  </div>
  <p>Weiterer Inhalt...</p>
</body>
</html>
Vorschau

Barrierefreiheit

CSS hat direkten Einfluss auf die Barrierefreiheit, und das <style>-Element ist eine der Möglichkeiten, diese Styles zu definieren:

  • Focus-Styles nicht entfernen: Eine der häufigsten Accessibility-Sünden ist outline: none ohne Alternative. Tastaturnutzer sind auf sichtbare Focus-Indikatoren angewiesen, um zu erkennen, welches Element gerade aktiv ist. Wenn du den Standard-Focus-Ring anpassen willst, ersetze ihn durch einen eigenen, gut sichtbaren Stil.
  • Kontraste prüfen: Text muss laut WCAG ein Kontrastverhältnis von mindestens 4.5:1 (normaler Text) bzw. 3:1 (großer Text) zum Hintergrund haben. Überprüfe deine Farbkombinationen mit Tools wie dem WebAIM Contrast Checker.
  • prefers-reduced-motion respektieren: Nutzer können in ihren Systemeinstellungen angeben, dass sie weniger Bewegung wünschen. Respektiere das mit einer Media Query: @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }. Das hilft Nutzern mit vestibulären Störungen oder Epilepsie.
  • prefers-color-scheme unterstützen: Ein Dark Mode ist nicht nur bequem, sondern für manche Nutzer mit Lichtempfindlichkeit notwendig. Verwende @media (prefers-color-scheme: dark) für angepasste Farbwerte.
  • Inhalte nicht per CSS verstecken: Verwende display: none oder visibility: hidden nicht, um Inhalte vor Screenreadern zu verbergen, die sichtbar sein sollten. Für Screenreader-only-Texte nutze eine .sr-only-Klasse, die den Text visuell versteckt, aber für Screenreader zugänglich lässt.

Häufige Fehler

style im body platzieren: Seit HTML5 ist das <style>-Element technisch auch im <body> erlaubt, aber nicht empfohlen. Es kann zu Flash of Unstyled Content (FOUC) führen, da das Styling erst greift, wenn der Browser das Element erreicht. Besser: Styles immer im <head> platzieren.

Zu viel Inline-CSS statt externer Dateien: Viele Entwickler übertreiben es mit eingebetteten Styles. Für große Projekte sollten die meisten Styles in externen CSS-Dateien liegen, die gecacht werden können. Das <style>-Element ist ideal für Critical CSS oder seitenspezifische Anpassungen, aber nicht als Hauptquelle für alle Styles.

style-Element mit style-Attribut verwechseln: Das <style>-Element enthält CSS-Regeln mit Selektoren, während das style-Attribut direkt an einem HTML-Element nur dessen Inline-Styles definiert. Ein häufiger Anfängerfehler ist es, CSS-Regeln in ein style-Attribut zu schreiben: <div style=".class { color: red; }"> funktioniert nicht. Das gehört in ein <style>-Element.

Media Queries vergessen: Wenn du responsive Styles einbettest, vergiss nicht die Media Queries. Ohne sie gelten deine Styles für alle Bildschirmgrößen, was auf mobilen Geräten zu Problemen führen kann.

Browser-Kompatibilität

Das style-Element wird von allen Browsern vollständig unterstützt. Es gehört zu den Grundelementen von HTML seit den frühesten Versionen. Das nonce-Attribut für CSP wird seit Chrome 45+, Firefox 31+ und Safari 10+ unterstützt.

ClientUnterstützungHinweise
ChromeKomplett—
FirefoxKomplett—
SafariKomplett—
EdgeKomplett—
OperaKomplett—

Email-Kompatibilität

Die Unterstützung von style-Elementen variiert stark zwischen E-Mail-Clients. Best Practice: Verwende eine Kombination aus style im head und Inline-Styles als Fallback.

ClientUnterstützungHinweise
Apple MailKomplettGute Unterstützung für style-Elemente und die meisten CSS-Eigenschaften.
GmailKeineGmail entfernt style-Elemente aus dem head komplett. Nur Inline-Styles über das style-Attribut werden unterstützt.
OutlookTeilweiseDesktop-Versionen unterstützen style, aber mit eingeschränkter CSS-Funktionalität (Word-Rendering-Engine).
ThunderbirdKomplettGute Unterstützung für eingebettete Stylesheets.
Yahoo MailTeilweiseTeilweise Unterstützung mit verschiedenen Einschränkungen bei CSS-Eigenschaften.

Verwandte Elemente

<head> <link>

Bleib auf dem Laufenden

Erhalte neue Inhalte direkt in dein Postfach

Mit der Anmeldung akzeptierst du unsere Datenschutzerklärung. Du kannst dich jederzeit über den Link in den E-Mails wieder abmelden.

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.