HTML style – globale CSS-Eigenschaften

style-Tag im head: Stile für eine einzelne Seite

Das style-Tag enthält globale CSS-Stile, die innerhalb des gesamten Dokuments gelten und Elemente dieses Dokuments formatieren.

Im Gegensatz dazu erzeugt das style-Attribut innerhalb von HTML-Tags CSS-Regeln, die nur für dieses individuelle Element gelten.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Above the Fold

Neben Stilen, die nur für das aktuelle Dokument gelten, können im style-Tag die CSS-Stile notiert werden, die für das Rendern des Inhalts »above the fold« wichtig sind. Diese Technik beschleunigt den Seitenaufbau beim Besucher, da der Browser nicht warten muss, bis die komplette CSS-Datei geladen wurde.

Dies ist ein einfaches Beispiel für das Anlegen von Stylesheets im Dokument. Die Stylesheet-Eigenschaften deklarieren die Schrift, Farbe und Größe für <p>-, <pre>- und <code>-Tags. Mehr zu CSS.

<head>
…
<style media="screen"> 
   p { color: black; font-size: 1.1em } 
   pre { color: navy; font-size: 0.9em } 
   code { font-family: Courier; color: navy } 
</style>
…
</head>

In älteren Versionen von HTML musste auch noch der Typ im style-Tag aufgeführt werden. Das gilt heute nicht mehr, das type-Attribut kann weg.

The type attribute for the style element is not needed and should be omitted.

Das media-Attribut des style-Tags ist sinnvoll, wenn Stile vor der Druckausgabe versteckt werden sollen oder Stile nur für den Druck bestimmt sind (media="print").

CSS frühzeitig einbinden

Obwohl es keine Rolle spielt, in welcher Reihenfolge die Tags im head der Webseite auftreten (außer der Reihenfolge von Javascript-Dateien, die aufeinander aufbauen), werden CSS-Dateien vor Skripten eingebunden. So kann der Browser die Seite schneller darstellen.

@import-Regel

Innerhalb des style-Elements kann auch eine externe CSS-Datei mit der @import-Rule in das Dokument importiert werden. Mit der @import-Regel laden CSS-Dateien allerdings langsamer als mit einem link-Tag.

<style>
   @import url("style.css");
   @import url("print.css") print;
   @import url("small-devices.css") projection, tv;
</style>

Die Import-Regel ist heute überflüssig (und langsamer als das Laden der CSS-Datei mittels link-Tag). Das link-Tag zum Einbinden externer CSS-Dateien ist die bessere Wahl.

Attribute für style

media
eine Liste von Medien, in denen das HTML-Dokument präsentiert werden kann (all, aural, braille, handheld, print, projection, screen, tv und tty). Die Vorgabe ist screen.
type
deklariert die Art des Stils. Es gibt nur einen möglichen Wert: text/css. type="text/css" ist nicht erforderlich.