CSS - Cascading Style Sheets

Cascading Style Sheets (CSS)

Die Beschreibungssprache CSS (Cascading Style Sheets) ist dafür vorgesehen, das Erscheinungsbild einer HTML-Seite festzulegen.

In den Anfängen des World Wide Web war es noch sehr häufig der Fall, dass die semantische Struktur eines HTML Dokuments (Überschrift 1, Überschrift 2, Absatz, Tabelle, etc.) mit den entsprechenden Attributen zur Formatierung (Schriftgröße, Farbe, Hintergrund, etc.) miteinander vermengt war.

Früher

Früher waren Inhalt und Formatierung im HTML-Dokument vermengt

[...]
<h1 align="right">Hauptüberschrift</h1>
<h2><font color="#ffcc00">Das ist ein Untertitel</font></h2>
<p>Der erste Satz des Absatzes mit einem <b>wichtigen Hinweis!</b></p>
[...]

Heutzutage

Die seit Langem schon gängigere Variante ist, die Formatierung per CSS zu definieren und die

CSS-Datei

[...]
h1 {
  text-align: right;
}

h2 {
  color: #ffcc00;
}

span.important {
  font-weight: bold;
}
[...]

HTML-Datei

[...]
<h1>Hauptüberschrift</h1>
<h2>Das ist ein Untertitel</h2>
<p>Der erste Satz des Absatzes mit einem
<span class="important">wichtigen Hinweis!</span></p>
[...]

Einige Anmerkungen:

• In der zweiten Variante erkennt man, dass das HTML-Dokument deutlich übersichtlicher wurde.
• Die Überschrift erster Ordnung (h1) wird rechtsbündig formatiert
• Die Überschrift zweiter Ordnung (h2) wird orange formatiert
• Für den wichtige Textpassagen wurde eine eigene Klasse .important eingeführt, die eine eigene Formatierung erhält (in diesem Fall fett)