Voraussetzungen

• Ultimate HTML

Willkommen in der Welt des Webdesigns

CSS (Cascading Style Sheets) verwandelt einfaches HTML in ansprechende, benutzerfreundliche Webseiten. Es steuert Farben, Layout, Abstände und die gesamte Präsentation – und erweckt so Ihre Designs zum Leben.

Was ist CSS?

CSS, die Abkürzung für Cascading Style Sheets, ist eine Gestaltungssprache zur Definition der Präsentation von Dokumenten in HTML (Hypertext Markup Language). Doch was bedeutet das genau?

Stellen Sie sich HTML als das Fundament eines Hauses vor – es liefert die grundlegende Struktur und das Layout Ihrer Webseite. CSS hingegen ist wie der Innenarchitekt dieses Hauses. Es ist dafür verantwortlich, dem Gerüst Stil, Farben und Ästhetik zu verleihen und es einladend sowie visuell ansprechend zu gestalten.

Betrachten Sie diese Abbildung:

Die linke Seite der Abbildung zeigt reines HTML. Die rechte Seite zeigt, wie CSS denselben Inhalt mit Stil und Farbe verwandeln kann.

Verständnis der CSS-Syntax

CSS mag anfangs wie eine Fremdsprache wirken, folgt jedoch einer einfachen Syntax. Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock. Der Selektor gibt an, auf welches HTML-Element bzw. welche Elemente die Regel angewendet wird, während der Deklarationsblock ein oder mehrere Eigenschaft-Wert-Paare enthält, die das Styling definieren.

Lassen Sie uns dies anhand eines Beispiels aufschlüsseln:

p {
  color: purple;
  background-color: green;
}

• Das p ist der Selektor und gibt an, dass diese Regel für alle <p>-Elemente gilt;
• color: purple; legt fest, dass die Textfarbe lila sein soll;
• background-color: green; legt fest, dass die Hintergrundfarbe grün sein soll.

Wir werden Selektoren, Eigenschaften und Werte in späteren Kapiteln noch genauer betrachten. Merken Sie sich vorerst, dass CSS es ermöglicht, Elemente auszuwählen und innerhalb der geschweiften Klammern {} zu gestalten.

Wie geht es weiter?

In den kommenden Kapiteln werden Selektoren, Eigenschaften, Werte und praktische Gestaltungstechniken behandelt. Am Ende sind Sie in der Lage, einfaches HTML in übersichtliche, ansprechende Designs zu verwandeln.