Trennung Inhalt und Format - Cascading Style Sheets sind frei definierbare Formatvorlagen, ähnlich wie in einem Textverarbeitungsprogramm. Mit der Einführung von CSS erfolgte eine konsequente Teilung von Struktur (HTML) und Darstellung (CSS). Ein großer Vorteil von CSS liegt dabei in den wesentlich erweiterten Formatierungsmöglichkeiten. Darüber hinaus lassen sich die Anweisungen in eine zentrale Datei auslagern. Mit Hilfe dieser Datei lässt sich die Darstellung der einzelnen Webseiten zentral steuern.

Syntax - Die Syntax besteht aus einzelnen Regeln & Zuweisungen von verschiedenen Deklarationsbereichen, bestehend aus einer oder mehreren Deklarationen, die wiederum aus Eigenschaft und Wert bestehen, zu Selektoren, die z.B. HTML-Elemente sein können:

Selektor {Eigenschaft A: Wert B; Eigenschaft C: Wert D;} /* Kommentar */

Das Ganze stellt (ohne den Kommentar) eine Regel dar. Eine Eigenschaft mit Wert wird Deklaration genannt. Eine Regel kann beliebig viele Deklarationen enthalten.

Beispiel: h1.test { font-size: 20px; color: gray } /* Grauer Text in 20px Größe. */

Hier wird der Deklarationsbereich allen h1-Elementen zugewiesen, die das class-Attribut mit dem Wert test besitzen. Ein wichtiges Prinzip von CSS ist die Vererbung der Eigenschaftswerte an untergeordnete Elemente und die Kombination verschiedener Stylesheets (Kaskade).

1. Zuweisung im HTML-Tag durch das Attribut style:
   Bsp.: <h1 style="color:red">Überschrift</h1>.
2. Zuweisung im Head-Bereich einer HTML-Seite durch das Style-Tag:
   Bsp.:
   <style type="text/css">
   h1 {color:red}
   </style>
3. Zuweisung in externer css-Datei durch Verknüpfung mit der HTML-Datei mit Hilfe des Link-Tags:
   <link rel="stylesheet" type="text/css" href="pfad/name.css" />