<style>

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.

Steckbrief <style>

Kategorie: Meta & Scripting
Art: Metadaten
Attribute: 2
Beispiele: 3
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 03.02.2026

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

index.html

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>

Attribute

2 Attribute

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

Beispiele

3 Beispiele

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

index.html

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>

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

index.html

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>

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

index.html

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>

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

4 Fehler

01 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.

02 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.

03 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.

04 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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.

Apple Mail

Komplett

Gute Unterstützung für style-Elemente und die meisten CSS-Eigenschaften.
Gmail

Keine

Gmail entfernt style-Elemente aus dem head komplett. Nur Inline-Styles über das style-Attribut werden unterstützt.
Outlook

Teilweise

Desktop-Versionen unterstützen style, aber mit eingeschränkter CSS-Funktionalität (Word-Rendering-Engine).
Thunderbird

Komplett

Gute Unterstützung für eingebettete Stylesheets.
Yahoo Mail

Teilweise

Teilweise Unterstützung mit verschiedenen Einschränkungen bei CSS-Eigenschaften.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<style>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter