HTML <style> Tag
Das <style>-Tag bettet CSS-Regeln direkt in ein HTML-Dokument ein. Syntax, Attribute und Beispiele.
Das <style>-Tag bettet CSS-Regeln direkt in ein HTML-Dokument ein. Es legt fest, wie Elemente auf der Seite dargestellt werden sollen, ohne dass eine separate Stylesheet-Datei benötigt wird. Dies wird häufig als internes (oder eingebettetes) CSS bezeichnet.
Um CSS stattdessen aus einer separaten Datei zu laden, verwende das Element <link rel="stylesheet">.
Eine Seite kann mehr als ein <style>-Element enthalten; die Regeln aus allen werden zusammengeführt.
Warum <style> in den <head> gehört
Das CSS innerhalb eines <style>-Tags ist für den Browser gedacht, nicht für den Leser, weshalb es innerhalb des <head>-Elements platziert wird. Es gibt gute Gründe, es dort zu belassen:
- Es blockiert das Rendering. Der Browser muss dein CSS lesen und anwenden, bevor er die Seite darstellen kann. Wenn die Stile im
<head>platziert werden, kann der Browser erfahren, wie alles aussehen soll, bevor er den Body zeichnet. - Es vermeidet FOUC (Flash Of Unstyled Content). Werden Stile erst spät im Dokument definiert, zeigt der Browser möglicherweise kurzzeitig ungestaltete Inhalte und gestaltet sie dann neu, was zu einem sichtbaren Flackern und Layoutverschiebungen führt.
HTML5 erlaubt technisch gesehen ein <style>-Element innerhalb des <body> (ein Browser wendet die Regeln trotzdem an), aber es wird davon abgeraten: Es kann einen Re-Flow und den oben beschriebenen FOUC auslösen. Halte deine Stile im <head>.
In früheren HTML-Versionen und in XHTML war das Attribut type="text/css" beim <style>-Tag erforderlich. In HTML5 ist es der Standardwert und kann weggelassen werden.
Drei Wege, CSS einzubinden
Das <style>-Tag ist nur eine von drei Möglichkeiten, CSS anzuwenden. Die richtige Wahl zu treffen ist wichtig:
| Methode | Wie | Am besten geeignet für |
|---|---|---|
Inline-Attribut style | <p style="color: red;"> | Eine einzelne einmalige Überschreibung an einem Element. Schwer zu warten und hat die höchste Spezifität – daher sparsam verwenden. |
Internes <style> | Ein <style>-Block im <head> | Stile, die nur eine Seite benötigt, oder kritisches CSS, das inline eingebunden werden soll, um eine zusätzliche Anfrage zu vermeiden. |
Externes <link rel="stylesheet"> | Eine separate .css-Datei | Stile, die viele Seiten gemeinsam nutzen. Vom Browser gecacht und hält Inhalt von Darstellung getrennt – die übliche Wahl für echte Websites. |
Einen ausführlicheren Vergleich findest du unter HTML Styles.
Syntax
Das <style>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<style>) und schließenden (</style>) Tag geschrieben.
Beispiel des HTML-<style>-Tags:
HTML <style>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #1c87c9;
}
p {
color: #8ebf42;
}
</style>
</head>
<body>
<h1>Text heading.</h1>
<p>First paragraph.</p>
</body>
</html>Die Selektoren (h1, p) im Block zielen auf Elemente im Body ab, und die Deklarationen zwischen den geschweiften Klammern legen deren Stile fest.
Ergebnis
Stile bedingt anwenden mit media
Das Attribut media ermöglicht es einem <style>-Block, nur dann angewendet zu werden, wenn die zugehörige Media Query zutrifft – beispielsweise nur auf kleinen Bildschirmen, nur auf Bildschirmen (nicht beim Drucken) oder nur beim Drucken. Regeln in einem Block, dessen Query nicht zutrifft, werden ignoriert.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- Always applies -->
<style>
p {
color: #1c87c9;
}
</style>
<!-- Applies only on screens up to 600px wide -->
<style media="screen and (max-width: 600px)">
p {
color: #8ebf42;
font-size: 20px;
}
</style>
</head>
<body>
<p>Resize the window: this text turns green and grows on narrow screens.</p>
</body>
</html>Dasselbe lässt sich auch am <link>-Element erreichen (<link rel="stylesheet" media="..." href="...">).
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| media | media_query | Gibt das Medium an, für das die Stile gelten, z. B. screen and (max-width: 600px). Wird es weggelassen, gelten die Stile für alle Medien. |
| type | text/css | Gibt den MIME-Typ des Stylesheets an. In HTML5 optional, da text/css der Standard ist. |
Das veraltete Attribut scoped
Möglicherweise begegnest du noch Verweisen auf ein scoped-Attribut, das dazu gedacht war, die Regeln eines <style>-Blocks auf das übergeordnete Element und seine Nachkommen zu beschränken. Es wurde nie weit verbreitet implementiert und wurde aus dem HTML-Standard entfernt – verwende es nicht. Um CSS heute einzugrenzen, nutze stattdessen einen dieser modernen Ansätze:
- Shadow DOM (über Custom Elements / Web Components), bei dem Stile vollständig gekapselt sind und weder nach innen noch nach außen durchdringen.
- Scoped-Klassennamen – ein eindeutiges Klassenpräfix pro Komponente, manuell angewendet oder durch Werkzeuge wie CSS Modules generiert.