HTML-Lehrgang, CSS

Cascaded Style Sheet sind die Formatvorlagen des Internet. Mit CSS kann man einheitliches Auftreten der HTML-Seiten realisieren.

In den Anfängen von HTML gab es noch nicht viele Möglichkeiten einen Text zu gestallten. Bald wurden von den Browser-Herstellern Tags wie oder <align> entwickelt. Diese hatten jedoch den Nachteil dass Sie den HTML-Code mehr als notwendig aufblähen. Ebenso war es umständlich auf einer Seite mit ettlichen Überschriften und duzenden von Absätzen immer wieder jeden Absatz separat zu formatieren.

Bald schon wurde die Möglichkeit von CSS entwickelt. Mit CSS kann man das Aussehen jedes einzelnen HTML-Tag beeinflussen. So ist es nicht mehr notwendig jeden einzelnen mit dem zu formatieren, sondern man legt einmal in einer CSS-Datei fest wie alle p's auszusehen haben. Diese CSS-Datei bindet man an die HTML-Seite an.

CSS gibt es in verschiedenen Versionen. Die Grundversion wird sowohl von Netscape als auch vom Internet-Explorer richtig interpretiert. Die spezielleren Elemente werden je Browser unterschiedlich interpretiert. Es ist empfehlenswert für jeden einzelnen CSS Befehl eine Liste zu führen, welche Browser diesen unterstützen und ob man diesen Befehl in seinem Web verwenden möchte.

Styles können:

Direkt in ein Tag eingebettet werden. Diese Methode sollte ein Ausnahmefall für eine einmalige Formatierung in diesem speziellen Tag sein.
```
Hallo Welt
```

In den Dokumentenkopf (Head-Bereich) eingebettet werden. Diese Methode sollte eine Ausnahme sein für Formatierungen welche nur auf einer einzigen Seite vorkommen.

<style type="text/css">
<!--
h1    { font-size:48pt;
        color:#FF0000;
        font-style:italic;
      }

p,li  { font-size:12pt;
        line-height:14pt; 
        font-family:Helvetica,Arial; 
        letter-spacing:0.2mm;
        word-spacing:0.8mm;
      }
//-->
</style>

CSS-Angaben in einer separaten Datei gehalten und in mehreren Seiten im Head mit dem Link-Tag eingebunden werden. Dies ist der empfohlene Weg welcher das WebDesign vereinfacht (Achtung: Keine HTML-Tags in der CSS-Datei, beachten Sie die Bespieldatei (oben rechts)).
```
<link rel="stylesheet" type="text/css" href="../../../css/FormateKurs.css">
```

Der Vorteil der separaten Datei liegt in der Übermittlungsgeschwindigkeit. Anstatt dass jetzt jedes Tag individuell formatiert wird und die Formatierungsbefehle mit jedem Tag über die Leitung übertragen werden müssen, sind alle Format-Informationen in einer einzigen Datei enthalten. Diese Datei wird einmal übertragen aus dem Browser-Cache geladen.

Um die Möglichkeiten von CSS voll auszuschöpfen sollten Sie die in HTML existierenden Tag's zur Erstellung von Text kennen. Verwenden Sie für Darstellungskategorien eigene Tags.

Home