HTML Attribut class:
Space-separierte Liste von CSS-Klassen

von Thomas Salvador.

Beispiel

Eine Überschrift soll speziell ausgezeichnet werden:

<h1 class="gross rot sans">Eine Überschrift</h1>
<h1 class="gross">Eine Überschrift in Überschriftenfarbe und -schrift</h1>

Der Reihe nach werden hier die CSS-Klassen gross, rot und sans angewendet und so ein Stil aus einzelnen Komponenten erzeugt.

Bei der zweiten Überschrift legen wir nur die Größe fest, die anderen Angaben zu Farbe und Schrift kommen hier aus der Definition für das HTML-Element oder aus dem Default.

Die Klassen selbst könnten in einem <style>-Bereich definiert werden. Werden Sie auf mehreren Seiten genutzt, empfiehlt sich die Auslagerung in eine separate CSS-Datei die mit <link> eingebunden wird.

Generell kann ein so definierter Stil direkt am Element mit dem style-Attribut ganz oder teilweise überschrieben werden.

<head>
<style type="text/css">
h1     {color: blue;}
.gross {font-size: 250%;}
.rot   {color: red;}
.gruen {color: green;}
.sans  {font-family:sans-serif;}
</style>
...

Definiert ist hier, dass h1-Überschriften blau sind, eine Schriftart wird nicht festgelegt. Die mit einem Punkt eingeleiteten Klassen definieren die jeweiligen Komponenten.

Damit ist die erste Überschrift im Beispiel rot und recht gross in sans-serif gesetzt. Die zweite ist blau und hat die normale Überschriftengröße und -schriftart, da ausschließlich die Farbe definiert wurde.

Anwendung

Gibt an, dass das HTML-Element einer bestimmten oder mehreren Stylesheet-Klassen angehört. Das Element übernimmt Formate, die zentral für diese Klasse(n) definiert wurden. Mehrere Klassen werden durch Leerzeichen getrennt und in gebau dieser Reihenfolge angewendet.

Hinweise

  • Die Definition von Klassen macht Sinn, um Konsistenz und leichte Wartbarkeit zu erreichen. Genau eine Definition genügt hier zum Beispiel, um alle h1-Überschriften blau zu färben.
  • Werden mehrere Klassen genutzt, werden Sie in der angegeben Reihenfolge angewendet. Zum Beispiel erzeugt
    <h1 class="rot gruen">Eine Überschrift</h1>
    eine grüne Überschrift, da die Angaben in der Klasse gruen die von rot übersteuern.

Universelle Attribute in HTML

AttributBeschreibung
classSpace-separierte Liste von CSS-Klassen
dirAusrichtung von Text und Tabellen
idUniversalattribut
langSprache des Elementes
styleInline Style
titleBezeichnender Titel