Definition im Header


<style type="text/css">
  <!--
    img.normal{height: auto;width: auto}
    img.big{height: 80px;width: 100px}
    img.small{height: 30px;width: 50px}
    td.rot{color:red;font-size:30pt;text-align:center}
    td.gruen{color:green;text-align:center}
    td.blau{color:blue;text-align:center}
  -->
</style>

Die obige Definiton erfolgt im Header-Teil des HTML-Dokuments. Die Style-Definition setzt man i.a. in Kommentar-Klammern, um zu verhindern, das ältere Browser, die CSS nicht interpretieren können, das ganze als dann ziemlich sinnlosen Text interpretieren. Die Definitionen im Header gelten für das gesamte HTML-Dokument, es ein denn, sie würden lokal durch andere Definitionen wieder aufgehoben.

Um die verschiedenen Bildgrößen zu definieren, wurde eine sogenannte Klassendefinition vorgenommen. Für ein und das selbe Objekt (im Beispiel img) werden hier drei verschiedene Klassen definiert. Die Definition erfolgt z.B. durch die entsprechende Klasse wird dann späteren wie folgt aufgerufen

<img class="normal" src="back.gif">

Im folgenden Beispiel sind drei Klassen für das Objekt <td> (Zelle einer Tabelle)definiert worden:

class=gruen class=rot class=blau