CSS: Grundlagen

Während die semantische Auszeichnung der Inhalte eines Webprojekts über HTML realisiert wird, stellt CSS Eigenschaften für die grafische Darstellung der Inhalte bereit. Von einfachen Eigenschaften wie Farbe, Schriftart, Schriftgröße etc. bis zum kompletten Layout einer Seite bietet CSS eine Vielzahl von Möglichkeiten zur optischen Gestaltung der Text- und Grafikinhalte. An dieser Stelle soll eine Enführung in die praktische Anwendung dieser Technik mit Beispielen aus der Praxis gegeben werden.

Noch wichtiger als beim Thema HTML ist die Überprüfung der Darstellung der verwendeten Eigenschaften in unterschiedlichen Browsern. Webseiten sollten daher mindestens in Blink-Browsern wie Chromium und Gecko-Browsern wie Firefox getestet werden.

Grundsätzlich sollten sämtliche grafischen Eigenschaften eines HTML-Dokuments per CSS festgelegt werden. Man darf sich nie darauf verlassen, dass z. B. eine Schriftart, die der eigene Browser zur Darstellung eines Dokuments verwendet, auch auf einem anderen Rechner oder in einem anderen Browser verwendet wird. Jeder Browser hat für die Darstellung nicht definierter Eigenschaften ein eigenes, nicht standardisiertes Stylesheet, dessen Vorgaben erst durch die eigenen expliziten Stil-Definitionen für ein bestimmtes Dokument ersetzt werden.

CSS in HTML einbinden

Um CSS in HTML einzubinden, gibt es im Wesentlichen drei Möglichkeiten:

1. Formatierung einzelner HTML-Tags über das Attribut style (Inline-CSS)
2. Angabe der Stildefinitionen im <head>-Bereich des HTML-Quelltextes
3. Auslagerung der CSS-Definitionen in eine eigenständige Datei

Die bevorzugte Methode bei einzelnen HTML-Dateien stellt die Option 3 dar, da auf diese Weise der eigentliche Quelltext frei von Formatierungen gehalten werden kann (Prinzip Trennung von Inhalt und Gestaltung) und eine Vielzahl von Seiten, die das gleiche Stylesheet verwenden, leicht durch einmalige Veränderungen der Stylesheet-Datei angepasst werden können. Lediglich von dem externen Stylesheet abweichende oder ergänzende Definitionen sollten im Quelltext eingebettet werden.

Hier wird auch deutlich, was mit dem Begriff ›kaskadierend‹ gemeint ist: Die Stildefinitionen werden in der Reihenfolge angewendet, wie sie aus den verschiedenen Quellen gelesen werden, und so auch ggf. überschrieben.

Dies soll durch folgendes Beispiel verdeutlicht werden. Hier haben wir eine Stylesheet-Datei styles.css, die im HTML-Quelltext der Datei index.htm referenziert wird (Zeile 6). Darüberhinaus existieren im <head>-Bereich der HTML-Datei und über das style-Attribut weitere Definitionen:

Code kopieren

<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>CSS-Beispiel</title>
    <meta charset='UTF-8'>
    <link rel='stylesheet' type='text/css' media='screen, print' href='styles.css'>
    <style media='screen, print'>
      /* Definitionen im HTML-Quelltext */
      h1 { color:#23b; font-size:22px; }
      h1, p { font-family:Arial,sans-serif; }
      p { font-size:16px; }
      .schmal { margin-left:40px; margin-right:40px; }
    </style>
  </head>
  <body>
    <h1>Beispiele für Formatierungen mit CSS</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p class='schmal'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p class='schmal' style='font-family:"Times New Roman",serif;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <span style='font-style:italic;'>At vero eos et accusam et justo duo dolores et ea rebum.</span> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </body>
</html>

Hier die CSS-Datei styles.css. Die Angabe @charset "utf-8"; gibt die Zeichenkodierung an. Dies ist dann sinnvoll, wenn das Stylesheet Zeichen enthält, die keine ASCII-Zeichen sind, um sicherzustellen, dass diese korrekt dargestellt werden.

Code kopieren

/* Hier die Definitionen in einer externen Datei */

@charset "utf-8";
html { background-color:#def; padding:10px; }
body { background-color:#eaf; padding:30px; }

Wir sehen hier, welche Auswirkungen die Stildefinitionen haben. Durch Einbinden der CSS-Datei über

<link rel='stylesheet' type='text/css' media='screen, print' href='styles.css'>

werden die Stile für die Elemente <html> und <body> integriert. In diesem Fall bewirkt das die Färbung des Hintergrundes der Elemente über das Attribut background-color gefolgt von einem Hexadezimalwert für die Farbe sowie die Festlegung eines Abstandes zum Elternelement in Höhe und Breite durch das Attribut padding gefolgt von einem Wert in Pixeln.

Durch das Attribut media kann explizit angegeben werden, für welchen Medientyp ein Stylesheet verwendet werden soll. In diesem Fall für die Typen screen (Bildschirm) und print (Druck). Zu weiteren möglichen Medientypen siehe SelfHTML.

Eine alternative Methode zum Einbinden von separaten CSS-Dateien bietet die CSS-Regel @import, die sich in der Wirkung aber nicht von <link rel='stylesheet'> unterscheidet.

Code kopieren

<style media='screen, print'>
  @import url(css/styles.css);
</style>

Syntax

Die Syntax von Stildefinitionen hat grundstätzlich die Form
Selektor1, Selektor2 … { Attribut:Wert; Attribut2:Wert2; … }

Kommentare innerhalb von CSS werden in /* und */ eingeschlossen.

Im <head>-Bereich des HTML-Quelltextes existieren nun weitere Definitionen für die Elemente <h1> und <p> mit Angaben über die Textfarbe (color), Schriftart (font-family) und Schriftgröße (font-size). Es können Definitionen für mehrere Elemente gleichzeitig angegeben werden (h1, p { font-family:Arial,sans-serif; }). Weiterhin wurde ein so genannter Klassen-Selektor mit dem Namen .schmal eingeführt, der im Quelltext über das Attribut class angesprochen wird.

Während Definitionen für HTML-Elemente ohne weitere Referenzen im Quelltext auf jedes Element angewendet werden, gilt das bei Klassen-Selektoren nur für jene Elemente, die über class angesprochen werden.

Das Prinzip der Kaskade bewirkt hier nun, dass der zweite Absatz eingerückt wird (margin) obwohl der Stil für <p> das nicht vorsieht. Der Selektor class='schmal' hat aber Priorität. Ebenso erhält der dritte Absatz die Schrift ›Times New Roman‹, obwohl in der Definition für <p> ›Arial‹ vorgesehen ist. Weiterhin ist ein Satz des dritten Absatzes kursiv formatiert, da der innere Abschnitt <span> eine höhere Priorität als das übergeordnete class-Attribut besitzt.

Selektoren

Eine CSS-Stildefinition besteht immer aus zwei Teilen: einem oder mehreren Selektoren und einer oder mehreren CSS-Regeln. Über einen Selektor wird das Element genau beschrieben, auf das die CSS-Regel(n) angewendet werden sollen.

Beispiel:
span { color:blue; }

HIer wird dem Selektor span die Regel color:blue; zugewiesen.

Folgende Selektortypen werden unterschieden:

Typ	Beispiele
HTML-Elemente	`div`, `span`
Element-IDs	`#123`, `#info`
Klassen	`.tag`, `.dark5`
Attribute	`[lang]`, `[width]`
Attribute mit Werten	`[lang=de]`, `[width=50%]`
Pseudoklassen	`:hover`, `:visited`
Pseudoelemente	`::first-line`, `::before`

Außerdem gilt Folgendes:

Der Selektor * steht für alle Elemente.
Mehrere Selektoren, auf die eine Regel angewendet werden soll, werden durch Komma getrennt.
Selektortypen können kombiniert werden.
Folgt ein Selektor einem anderen durch ein Leerzeichen getrennt, so beschreibt er einen beliebig entfernten Nachfahren.
Der direkte Nachfahre (das Kind) eines Selektors wird durch ein >-Zeichen markiert.
Ein Selektor kann mit der Pseudoklasse :not() negiert werden.

Beispiele:

Code kopieren

/* alle Elemente: */
* { padding:0; }

/* alle Elemente <samp> und <code>: */
samp, code { font-family:monospace; }

/* alle Elemente <p>, die zur Klasse info gehören: */
p.info { color:blue; }

/* alle Elemente, die zur Klasse info gehören und Nachfahren eines Elements <p> sind: */
p .info { color:blue; }

/* alle Elemente, die zur Klasse info gehören und Kinder eines Elements <p> sind: */
p > .info { color:blue; }

/* alle Elemente, die nicht zur Klasse info gehören und Kinder eines Elements <p> sind: */
p > :not(.info) { color:green; }