HTML `<style>`-Tag

Das <style>-Tag wird verwendet, um ein HTML-Dokument mit CSS zu stylen. Es definiert, wie Elemente in Browsern dargestellt werden sollen.

Erfolg
Um eine externe Stylesheet-Datei zu verknüpfen, verwenden Sie das <link>-Tag.

Der Inhalt des <style>-Tags ist für Browser gedacht, weshalb er im <head>-Element platziert wird. Skripte auf der Seite werden typischerweise nach dem CSS-Code eingefügt.

Es ist möglich, mehr als ein <style>-Element auf einer Seite zu verwenden.

Gefahr
In früheren HTML-Versionen und in XHTML war das Attribut type="text/css" zusammen mit dem <style>-Tag erforderlich.

Syntax

Das <style>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<style>) und dem schließenden (</style>) Tag geschrieben.

Beispiel für das HTML `<style>`-Tag:

HTML <style>-Tag

html

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

Try it Yourself »

Ergebnis

style-Beispiel

Attribute

Attribut	Wert	Beschreibung
media	media_query	Gibt den Medientyp an, für den die Styles gelten. Standardmäßig gelten die Styles für alle Geräte.
scoped	scoped	Gibt an, dass der Style nur für das Element gilt, das das `<style>`-Tag enthält, sowie für dessen Kindelemente. Bei Verwendung muss das `<style>`-Tag innerhalb des zu styelnden Elements platziert werden, anstatt im `<head>`. Hinweis: Dieses Attribut ist in HTML5.2 veraltet und sollte in der modernen Entwicklung vermieden werden.
type	text/css	Gibt den MIME-Typ des Stylesheets an. In HTML5 ist es optional, da `text/css` der Standardwert ist.

Praxis

Welche Merkmale hat das HTML style-Tag, wie es auf der w3docs-Seite dargestellt wird?

Das HTML style-Tag ist ein Inline-CSS-Element.Es wird im 'head'-Bereich verwendet.Das HTML style-Tag kann nicht innerhalb des 'body'-Tags verwendet werden.Die Style-Regeln innerhalb des style-Tags wirken sich auf die Elemente der gesamten Webseite aus.Das HTML style-Tag unterstützt nicht alle globalen Attribute.

HTML <style>-Tag ​

Syntax ​

Beispiel für das HTML <style>-Tag: ​

Ergebnis ​