HTML-Tag style: So gestalten Sie das Aussehen von Elementen

Mit dem HTML-Tag „style“ definieren Sie das Aussehen einzelner Elemente auf einer Website. Das style-Tag wird in HTML im Header und vor möglichen Skripten platziert und integriert globale CSS-Stile. Es ist dazu mit verschiedenen HTML-Attributen kompatibel.

Wofür wird das HTML-Tag style genutzt?

Über das HTML-Tag style haben Sie die Möglichkeit, Stylesheets für ein gesamtes Dokument anzulegen. Ziel des style-Tags in HTML ist es zum einen, das Aussehen einzelner Elemente für eine Website genau zu definieren und damit einheitlich zu gestalten. Zum anderen kann die Methode zusammen mit HTML-Attributen dazu genutzt werden, eine Homepage für bestimmte Devices zu optimieren. Mit dem style-Tag werden dazu CSS-Codes im HTML-Dokument platziert. Innerhalb des Elements ist es außerdem möglich festzulegen, wie der Inhalt der Website gerendert werden soll. Der Aufbau im Browser wird dadurch deutlich beschleunigt, da nicht zunächst die gesamte CSS-Datei geladen werden muss.

Wie ist das style-Tag in HTML aufgebaut?

Das style-Tag wird in HTML innerhalb des Elements head eingesetzt. Es können auch mehrere Elemente mit dem HTML-Tag style für eine Website platziert werden. Für den schnellstmöglichen Aufbau und um dem jeweiligen Browser die Darstellung zu erleichtern, wird das style-Tag in HTML vor eventuellen Skripten für die Homepage platziert. Seit der Einführung von HTML 5 ist es nicht mehr obligatorisch, das Attribut <style type="text/css"> zu nutzen. Der Inhalt wird aber immer zwischen das Anfangstag <style> und das Endtag </style> gesetzt. Hier ein Beispiel:

<!DOCTYPE html>
<html>
<head>
<title>Ein Beispiel für den Einsatz des HTML-Tags style</title>
<style>
h1 { color: #000000; }
p { color: #0A06EF; }
</style>
</head>
<body>
<h1>Eine beispielhafte Headline für Ihre Website</h1>
<p>Ein Beispieltext für den ersten Absatz</p>
</body>
</html>

Hier bewirkt das HTML-Tag style, dass im entsprechenden Dokument die Headline „Eine beispielhafte Headline für Ihre Website“ in Schwarz und der erste Absatz („Ein Beispieltext für den ersten Absatz“) in Marineblau angezeigt werden. Neben der Farbe sind z. B. auch Größe oder Font so festzulegen.

Welche Attribute sind mit dem HTML-Tag style kompatibel?

Es können einige Attribute mit dem HTML-Tag style verwendet werden. Dazu gehören sämtliche globale Attribute sowie alle Event-Attribute. Die gängigsten Attribute für das style-Tag in HTML sind folgende:

Attribut Wert Beschreibung
dir auto, rtl, ltr Das Universalattribut dir gibt die Schreibrichtung des Textes an.
height Pixel Das Attribut height gibt die Höhe eines Elements an.
id Ein String, der nicht leer sein und keine Leerzeichen enthalten darf Über id wird eine einzigartige ID für ein HTML-Element definiert.
lang Sprachkürzel Mit dem Universalattribut lang wird die Sprache innerhalb des Dokuments oder des Elements definiert.
media all, aural, braille, handheld, projection, print, screen, tty, tv Das Attribut media definiert, für welches Device das entsprechende Dokument optimiert werden soll.
width Pixel Über das Attribut width wird die Breite eines Elements definiert.
xml:space preserve, default Über das Attribut xml:space wird definiert, wie Leerzeichen im Quelltext interpretiert werden sollen.

Nicht mehr verwendet werden die Attribute scoped und type.

Hier sehen Sie ein Beispiel für die Verknüpfung des HTML-Tags style mit einem Attribut:

<style media="screen">
h1 { color: #000000; }
p { color: #0A06EF; }
body { background-color: #FFFFFF; }
</style>

Dieser Code definiert, dass für alle Screens die Headline schwarz, der Text im Absatz Marineblau und der Hintergrund weiß dargestellt wird.

HTML-Tag style: Ein nützliches Werkzeug für jede Website

Egal, ob Sie bereits seit längerer Zeit Websites erstellen oder gerade angefangen haben CSS zu lernen: Das HTML-Tag style ist ein einfaches und nützliches Werkzeug, um das Aussehen eines Dokuments und seiner einzelnen Elemente zu definieren. So fällt es Ihnen am Ende leichter, eine Website ordentlich und gut strukturiert aufzubauen. Möchten Sie außerdem externe CSS-Files einsetzen, verwenden Sie dafür das Tag link.

Tipp

Eine eigene Website ganz nach Ihren Vorstellungen? Kein Problem! IONOS bietet Ihnen mit dem Homepage-Baukasten alles Nötige. Gestalten Sie Ihren Online-Auftritt ganz individuell ohne großes Vorwissen oder lassen Sie sich von unseren erfahrenen Experten helfen.

War dieser Artikel hilfreich?