Einführung in CSS

Dieses Kapitel führt in Cascading Style Sheets (CSS) ein. Ziel ist es zu verstehen, warum CSS existiert, welches Problem es löst und wie es mit HTML zusammenspielt.

1. Was ist CSS?

Definition.
CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, mit der das visuelle Erscheinungsbild von HTML-Dokumenten beschrieben wird.

Während HTML die Struktur und Bedeutung von Inhalten festlegt, ist CSS ausschließlich für deren Darstellung zuständig.

Trennung der Aufgaben:

HTML: Was ist der Inhalt?
CSS: Wie sieht der Inhalt aus?

2. Warum braucht man CSS?

CSS wurde eingeführt, um Inhalt und Darstellung strikt zu trennen.

In frühen Webseiten wurden Layout und Design direkt in HTML beschrieben. Dies führte zu unübersichtlichem, schwer wartbarem Code.

Ohne CSS müsste jede visuelle Änderung direkt im HTML vorgenommen werden.

CSS ermöglicht:

zentrale Gestaltung vieler Seiten
konsistentes Design
einfache Wartung und Erweiterung
responsive und moderne Layouts

3. Grundidee von CSS

CSS beschreibt Regeln, die festlegen, welche HTML-Elemente wie dargestellt werden.

Eine CSS-Regel besteht konzeptionell aus:

einem Selektor (welches Element?)
einer oder mehreren Eigenschaften
zugehörigen Werten

Beispiel (konzeptionell):

Element {
    Eigenschaft: Wert;
}

4. CSS und HTML – Zusammenspiel

HTML-Elemente werden durch CSS gestylt, aber nicht verändert.

CSS kann:

Farben ändern
Abstände festlegen
Layout steuern
Schriften definieren

CSS kann keine neuen Inhalte erzeugen und keine Logik ausführen.

5. Arten von CSS

Es gibt drei grundlegende Arten, CSS in ein HTML-Dokument einzubinden.

Inline-CSS (direkt im HTML-Element)
Internes CSS (im <style>-Tag)
Externes CSS (separate .css-Datei)

Beispiel – externes CSS:

<link rel="stylesheet" href="style.css">

Externes CSS ist der Standard in professionellen Projekten.

6. Das „C“ in CSS: Cascading

Cascading beschreibt, wie CSS-Regeln priorisiert und kombiniert werden.

Mehrere Regeln können auf dasselbe Element zutreffen. CSS entscheidet anhand von:

Herkunft der Regel
Spezifität des Selektors
Reihenfolge im Code

Dieses Prinzip wird in späteren Lektionen formal behandelt.

7. Ziel dieses CSS-Kurses

Ziel ist es, CSS nicht nur anzuwenden, sondern systematisch zu verstehen.

sauberes Layout ohne Hacks
moderne Techniken (Flexbox, Grid)
responsive Designs
wartbarer, skalierbarer Code

CSS ist kein „Dekorationswerkzeug“, sondern eine eigenständige Sprache mit klaren Regeln und Modellen.

8. Ausblick

CSS-Syntax und Selektoren
Box-Modell
Layout-Systeme
Responsive Design

Wer CSS beherrscht, kontrolliert das Erscheinungsbild des Webs.