CSS, HTML und Javascript mit {stil}

HTML style – Globale CSS-Eigenschaften

HTML style tag

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.

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 Aufbau der Seite beim Benutzer, da der Browser nicht warten muss, bis die komplette CSS-Datei geladen wurde.

style-Tag

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 type="text/css" media="screen"> 
   p { font-face: arial; color: black; font-size: 12px } 
   pre { font-face: arial; color: red; font-size: 14px } 
   code { font-face: courier; color: blue; font-size: 12px } 
</style>
…
</head>

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.

style im body: scoped

Das style-Tag muss innerhalb des head-Elements liegen, es sei denn, das scoped-Attribut ist gesetzt.

Dann kann ein style-Tag im body der Webseite gesetzt werden (ein Segen oder eine Seuche?). Sein Wirkungsbereich beschränkt sich auf das umfassende HTML-Element – von daher der Name »scoped«.

<article>
   <header>
      <h2>Zweiter Artikel – Überschrift  h2</h2>
   </header>
   <section>
      <style scoped>
         h3 { background: orchid; padding: 10px}
      </style>
      <h3>Section 1 in Artikel 2 Überschrift h3</h3>
    </section>
   <section>
      <h3>Section 1 in Artikel 2 Überschrift h3</h3>
   </section>
</article>

Mit dem scoped-Attribut sollten eigentlich nur Stile innerhalb ihres umfassenden Containers angewendet werden, aber die Browser (außer Firefox) ignorieren das scoped-Attribut allesamt noch und wenden die Regeln des style-Tags auf das gesamte Dokument an.

Auf jeden Fall aber validiert das Dokument mit style scoped im body-Element.

Wir haben über viele Jahre hinweg gelernt, dass ein style-Tag nicht in das body-Element gehört, denn so mischen wir Struktur und Präsentation. Ob ein style-Tag in den body-Block gesetzt wird oder nicht, muss jeder für sich in Einklang bringen.

Um in Ausnahmefällen CSS auf einen Bereich des Dokuments anzuwenden gibt es das style-Attribut, das in den meisten HTML-Tags verwendet werden darf. Das style-Attribut gilt nur für den Inhalt dieses einen Tags.

Ein style-Tag im Body kann mehr: Es kann die Stile für einen kompletten Abschnitt zusammenfassen und Regeln aufführen, die mit einem style-Attribut nicht zu fassen sind – z.B. Pseudo-Elemente wie ::first-child. Zwar könnten die Stile für einen Bereich in einem Style-Tag im head-Element untergebracht werden, aber bei Content Management Systemen wie WordPress geht das nur mit zusätzlichen Plugins.

Ein style-Tag im body des Dokuments darf trotz des scoped-Attributs nicht an beliebiger Stelle im Markup sitzen: Es muss vor allen anderen flow-content-Blöcken () sitzen.

So also nicht:

<article>
   <header>
      <h2>style-Tag im body-Element</h2>
   </header>
   <style scoped>
      p { font-size: 1.2em; }
   </style>
   <p>style scoped muss vor allen flow-content-Blöcken sitzen</p>
</article>

sondern so:

<article>
   <style scoped>
      p { font-size: 1.2em; }
   </style>
   <header>
      <h2>style-Tag im body-Element</h2>
   </header>
   <p>style scoped muss vor allen flow-content-Blöcken sitzen</p>
</article>

@import-Regel

Innerhalb des style-Tags 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.
scoped (neu in HTML5)
ist ein boolesches Attribut. Wenn scoped gesetzt ist, darf das style-Tag in ein HTML-Element im body der Webseite gesetzt werden und CSS-Eigenschaften für das umfassende Element festlegen.
type
deklariert die Art des Stils. Es gibt nur einen möglichen Wert: text/css. In HTML5 kann type="text/css" weggelassen werden.