Einleitung

CSS steht für „Cascading Style Sheets“ und wird verwendet, um die Gestaltung und Darstellung von HTML-Dokumenten zu beeinflussen. Mit CSS ist es möglich, HTML-Dokumente in mehreren Varianten darzustellen, z.B. könnte ein HTML-Dokument im Browser anders erscheinen als wenn es auf Papier ausgedruckt wird. Diese verschiedenen Darstellungen werden durch sogenannte „Style Sheets“ erreicht (im Folgenden Stylesheets genannt), welche mit der Sprache CSS definiert werden. Der Begriff „Cascading“ (kaskadierend) bezieht sich auf die Eigenschaft von CSS, dass bestimmte CSS-Regeln Vorrang gegenüber anderen haben können. CSS ist also ebenso wie HTML keine Programmiersprache, aber auch keine Markup Language wie HTML, sondern eine Sprache zur Definition von Stylesheets.

Die erste offizielle Version von CSS ist 1996 veröffentlicht worden und wird seither beständig vom World Wide Web Consortium (W3C) (opens in a new tab) weiterentwickelt. Im Vergleich zu HTML ist CSS bereits deutlich umfangreicher und komplexer. Das Grundprinzip von CSS ist zunächst relativ einfach, denn mit CSS werden lediglich einzelne Regeln deklariert, die vom Browser auf das betroffene HTML-Dokument angewendet werden.

Betrachten wir z.B. folgende CSS-Regel:

h1 {
  color: red;
  text-decoration: underline;
}

Wird diese Regel auf ein HTML-Dokument angewendet, dann bewirkt diese, dass Hauptüberschriften (bzw. h1-Elemente) eine rote Schriftfarbe erhalten und unterstrichen dargestellt werden:

Eine Überschrift

Grundlegend haben alle CSS-Regeln diesen Aufbau. Neben solchen einfach erscheinenden gestalterischen Aufgaben, kann mit CSS jedoch auch das Layout und die Anordnung von HTML-Dokumenten beeinflusst werden. Es ist sogar möglich, komplexe Animationen und 3D-Transformationen mit CSS zu erreichen. Außerdem gibt es einige wichtige Konzepte wie das sogenannte box model, die für das Verständnis von CSS erlernt werden müssen.

In diesem Kurs werden die wesentlichen Grundlagen für CSS besprochen, damit der Einstieg in dieses unerlässliche Thema der Webentwicklung gelingt.