HTML CSS

von Thomas Salvador.

HTML/CSS ist das Traumpaar, wenn es um ansprechend formatierte Inhalte geht.

HTML beschreibt die Struktur des Dokuments und gibt den einzelnen Bereichen eine Bedeutung. Solche Bedeutung können zum Beispiel Überschrift, Liste und Tabelle sein, und ganze Blöcke betreffen oder auch einzelne Worte als wichtig markieren.

CSS formatiert diese Struktur, indem Anweisungen zur Darstellung an die Bedeutung gebunden werden. Es legt also fest, wie zum Beispiel eine Überschrift darzustellen ist.

Der Knackpunkt ist, dass Inhalt und Darstellung getrennt werden. Nur so wird es möglich, ein und dasselbe HTML Dokument durch unterschiedliche CSS-Definitionen zum Beispiel für Bildschirmdarstellung und Druck aufzubereiten.

Es gibt drei Möglichkeiten, CSS in HTML einzubinden.

CSS direkt am einzelnen HTML-Tag

Dies ist die stärkste Bindung und überschreibt ggf. allgemeinere Festlegungen.

<h2 style="text-align:center; color:red">Inhaltsverzeichnis</h2>
erzeugt eine Überschrift der Stufe 2, deren Text zentriert und in Rot dargestellt wird.

CSS im Kopf der HTML-Datei

Dort legt sie allgemeine Darstellungen fest. Diese überschreiben im Code vorher getroffene Definitionen und können von späteren überschrieben werden.

<html>
  <head>
    <style type="text/css"><!--
      h1,h2,h3,h4,h5,h6 {color: blue; font-family:arial}
    //-->
    </style>
    <style type="text/css"><!--
      h2 {color: green}
    //-->
    </style>
  </head>
  <body>
    <h1>Das Dokument</h1>
    <h2 style="text-align:center; color:red">Sein Inhaltsverzeichnis</h2>
    <h2>Einführung</h2>
  </body>
</html>

Im Kopf sind zwei Style-Tags abgelegt. Der erste legt Blau als Farbe und Arial als Zeichensatz aller Überschriften fest. Der Zweite wünscht Grün als Farbe der Überschriften der Stufe 2 und überschreibt damit das Blau der ersten Definition. Arial als Zeichensatz wirkt jedoch weiterhin.

Im HTML Body wird es nun angewendet. Es werden eine Überschrift der Stufe 1 und zwei der Stufe 2 gesetzt.

Durch das CSS wird die h1-Überschrift Blau dargestellt. Die Überschrift zum Inhaltsverzeichnis ist rot, da es dort explizit im style-Attribut gefordert ist. Die danach folgende Überschrift zur Einführung ist grün, wie im zweiten Style-Tag im Kopf gefordert.

CSS-Definitionen in separater Datei

Die CSS-Definitionen werden in einer separaten CSS-Datei gemacht und im HTML Kopf nur eingebunden. Dies ist die häufigste Variante für allgemeine dokumentübergreifende Festlegungen für ganze Sites, da die Wiederverwendung zum einen die Wartbarkeit erhöht und zum anderen die Nutzung beschleunigt, da es nur einmal zum Besucher übertragen werden muss und dort dann zwischengespeichert ist.

CSS Datei:

h1,h2,h3,h4,h5,h6 {color: blue; font-family:arial;}
h2 {color: green}

HTML Datei:

<html>
  <head>
    <link rel="stylesheet" href="css-datei.css"/>
  </head>
  <body>
    <h1>Das Dokument</h1>
    <h2 style="text-align:center; color:red">Sein Inhaltsverzeichnis</h2>
    <h2>Einführung</h2>
  </body>
</html>

Das Ergebnis entspricht dem vorherigen. Ändert man nun css-datei.css, so wirkt diese zentrale Änderung unmittelbar und ohne weiteren Aufwand bei allen Verwendern dieser Datei.

Diese Vorteile und auch die Möglichkeiten von CSS führen dazu, dass heute im allgemeinen jedes Dokument HTML und CSS nutzt.