CSS, HTML & Javascript mit {stil}

HTML style-Tag – globale CSS-Eigenschaften im Seitenkopf

Das style-Tag enthält globale CSS-Stile, die innerhalb des gesamten Dokuments gelten und Elemente des aktuellen Dokuments formatieren. Im Gegensatz dazu erzeugt das style-Attribut innerhalb von HTML-Tags CSS-Regeln, die nur für ein individuelles Element gelten.

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

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. I.d.R. wird das style-Element im Kopf der Seite allerdings für Stile benutzt, die nur im aktuellen Dokument eingesetzt werden.

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

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.

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 ohne den Einsatz eines CSS-Präprozessors wie Sass oder Less allerdings u.U. langsamer als mit einem link-Tag.

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

Das link-Tag zum Einbinden externer CSS-Dateien ist die bessere Wahl, denn so kann der Browser mehrere Ressourcen gleichzeitig laden, während Dateien mit @import sequentiell geladen werden. Obendrein kann der Browser CSS-Dateien mit dem link-Tag besser zwischenspeichern. Die Import-Regel ist heute in den meisten Fällen überflüssig.

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.
Suchen auf mediaevent.de