Link zu www.kneller-gifs.de

CSS: Was ist CSS (Cascading Style Sheets)?

Zu HTML-Anfangszeiten wurden die Darstellungsoptionen von Inhalten direkt in der HTML-Datei vorgenommen.
Beispiel für einen Text, der rot und in der Schriftgröße 7 und in der Schriftart Arial angezeigt werden soll:
<font color="red" size="7" face="Arial">Text...</font>

Nachteile dieser Mischung von Inhalt und optischen Anweisungen im HTML-Quellcode sind:

Heute wird die optische Präsentation einer Homepage mit CSS realisiert. Dabei werden nicht nur einzelne HTML-Tags (Überschriften, Tabellen, Texte,...) per CSS formatiert, sondern auch das gesamte Layout einer Homepage. (Motto: Tabellenlayout ist out, CSS-Layout ist in.) HTML-Tags sollten nur (noch) ihrer Bedeutung entsprechend eingesetzt werden, also table-Tags für Tabellenpräsentation, h-Tags zur Anzeige/Markierung von Überschriften usw. Browser, die mit CSS nicht oder nur unzureichend umgehen können sind am Aussterben und zu vernachlässigen.

Vorteile der Gestaltung mit CSS:

Am besten werden Style-Definitionen zentral in einer oder mehreren CSS-Dateien gesammelt. Diese werden in jede HTML-Datei einer Homepage eingebunden. Änderungen in einer CSS-Datei (z.B. für eine andere Linkfarbe) wirken sich sofort auf alle HTML-Seiten einer Homepage aus.


In CSS legt man Formate für einzelne HTML-Elemente oder für eine bestimmte Auswahl von HTML-Elementen fest. Für welche HTML-Elemente die Formate gelten sollen beschreibt man über so genannte Selektoren.
  Selektor {
	Eigenschaft1: Wertx;
	Eigenschaft2: Werty; }

Beispiel:
  h1 {
	font-size: 16pt;
	color:     #ff0000; }
Hier wird dem HTML-Element "h1" (Überschrift) die Schriftgröße "16pt" und die Schriftfarbe "rot" zugewiesen. Das wäre auch schon der komplette Inhalt einer CSS-Datei, der hier nur das h1-Element "umdefiniert". CSS-Datei unter einem Namen (Bsp. "test.css") abspeichern und von einer HTML-Datei aus verlinken/einbinden.

CSS-Datei in HTML-Datei einbinden:
  <html>
    <head>
      <link rel=stylesheet type="text/css" href="test.css">
    </head>
    <body>
      <h1>Überschrifttext</h1>
      ...
    </body>
  </html>
Die CSS-Datei wird im <head> -Bereich der HTML-Datei eingebunden. Der Überschriftstext (h1) würde somit in der Schriftgröße "16pt" und der Schriftfarbe "rot" angezeigt werden.