WWW-KnowHow CSS Juergen Kneller

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:

Unübersichtlicher HTML-Code.
Homepage schlecht auswertbar (für z.B. Suchmaschinen oder Blinden-Screenreader).
Bei optischen Änderungen an einer Homepage müssen viele HTML-Seiten geändert werden.
Keine Trennung für verschiedene Ausgabemedien (Bildschirm, Druck, ...)

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:

Übersichtliches Markup, keine komplizierten HTML-Verschachtelungen wie bei Tabellenlayouts.
Homepage gut auswertbar/barrierefreier (von Suchmaschinen, Blinden-Screenreadern,...).
Die Präsention einer Homepage liegt zentral in CSS-Dateien, Layoutänderungen sind einfach durchzuführen.
Mehrere Designs für verschiedene Ausgabemedien möglich.

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.