Voraussetzungen

• Ultimate HTML

Hinweis

Wenn Sie neu in der Webentwicklung sind und sich noch nicht mit HTML beschäftigt haben, empfehlen wir, zunächst mit HTML zu beginnen. HTML bildet die Grundlage für CSS, und ein solides Verständnis von HTML wird Ihre CSS-Lernreise verbessern.

Willkommen in der Welt des Webdesigns

CSS (Cascading Style Sheets) ist ein leistungsstarkes Werkzeug, das gewöhnliche Webseiten in visuell ansprechende und benutzerfreundliche Erlebnisse verwandelt. Als „Zauberstab“ des Webdesigns definiert CSS, wie Inhalte, die mit HTML erstellt wurden, auf dem Bildschirm erscheinen und verleiht Ihren Designs Stil, Farbe und Ästhetik, sodass sie sich wirklich abheben.

Was ist CSS?

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

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 für das Hinzufügen von Stilen, Farben und Ästhetik zur Struktur verantwortlich und macht sie einladend und optisch ansprechend.

Sehen Sie sich diese Illustration an:

Links sehen Sie reines HTML, das die Grundstruktur bereitstellt. Rechts wird dasselbe HTML mit CSS zum Leben erweckt und zeigt dessen gestalterische Wirkung.

Verständnis der CSS-Syntax

CSS mag anfangs wie eine Fremdsprache erscheinen, 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.

Schauen wir uns das anhand eines Beispiels an:

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. Für den Moment gilt: Mit CSS können wir Elemente auswählen und innerhalb der geschweiften Klammern {} gestalten.

Wie geht es weiter?

In den folgenden Kapiteln werden wir tiefer in CSS-Selektoren, Eigenschaften, Werte und Techniken eintauchen, um Webseiten optisch ansprechend zu gestalten. Am Ende dieses Kurses verfügen Sie über die Fähigkeiten, schlichtes HTML in ansprechende und inspirierende Designs zu verwandeln.