HTML ist jedoch rein strukturell. Wenn Sie eine reine HTML-Datei in einem Browser öffnen würden, sähe sie eher spartanisch aus. Überschriften wären größer und fett, Links unterstrichen und blau, aber es gäbe keine Farben, keine besonderen Schriftarten, keine spezifischen Abstände oder komplexen Layouts. Alles würde linksbündig untereinander stehen, in einer Standardschrift. Das liegt daran, dass HTML keine Befehle für das Design enthält. Es sagt lediglich: „Das ist ein Titel”, nicht aber: „Dieser Titel soll rot sein, 32px groß und zentriert.”

### Die Rolle des Browsers: Der erste Stylist

Bevor CSS ins Spiel kommt, gibt es bereits eine erste Instanz, die das Aussehen Ihrer HTML-Seite beeinflusst: der Webbrowser selbst. Jeder Browser (wie Chrome, Firefox, Safari oder Edge) verfügt über ein sogenanntes User Agent Stylesheet. Dies ist ein Standard-Regelwerk, das festlegt, wie HTML-Elemente ohne explizite Styling-Anweisungen dargestellt werden sollen. Deshalb sehen Überschriften standardmäßig größer aus, Absätze haben einen gewissen Zeilenabstand, und Links sind blau und unterstrichen. Diese Standard-Styles sorgen dafür, dass eine Webseite auch ohne zusätzliches Styling zumindest lesbar und funktional ist.

Doch die Standarddarstellung der Browser ist selten ausreichend für ein professionelles Webprojekt. Unternehmen und Entwickler wollen ein einzigartiges Design, das zur Marke passt, die Benutzerfreundlichkeit optimiert und eine bestimmte Ästhetik vermittelt. Hier kommt CSS ins Spiel.

### CSS: Der Dirigent des Designs

CSS steht für Cascading Style Sheets und ist die Sprache, die dafür verantwortlich ist, wie Ihr HTML aussieht. Es ist der „Dirigent” des Designs, der dem „Skelett” aus HTML die Haut, die Kleidung, die Farben und die Frisur verleiht. CSS ermöglicht es Ihnen, das Layout, die Farben, die Schriftarten, die Abstände und fast jeden visuellen Aspekt Ihrer Webseite zu steuern.

Die Kernphilosophie hinter CSS ist die Trennung von Inhalt und Präsentation. HTML kümmert sich um den Inhalt und die Struktur, während CSS sich ausschließlich um das Styling kümmert. Diese Trennung bietet enorme Vorteile:
1. **Konsistenz**: Einmal definierte Styles können auf unzählige HTML-Elemente angewendet werden, was ein einheitliches Erscheinungsbild über die gesamte Webseite oder sogar über mehrere Webseiten hinweg gewährleistet.
2. **Wartbarkeit**: Änderungen am Design können zentral an einer Stelle vorgenommen werden, anstatt jede einzelne HTML-Datei manuell anpassen zu müssen. Das spart Zeit und reduziert Fehler.
3. **Schnellere Ladezeiten**: Externe CSS-Dateien können vom Browser gecacht werden, was bedeutet, dass sie bei wiederholten Besuchen nicht erneut heruntergeladen werden müssen.
4. **Responsives Design**: CSS ist die Grundlage für die Anpassung von Webseiten an verschiedene Bildschirmgrößen und Geräte, von Desktops über Tablets bis hin zu Smartphones.

### Wie CSS das Erscheinungsbild steuert: Bausteine des Stylings

Um zu verstehen, wie CSS funktioniert, müssen wir uns seine grundlegenden Bausteine ansehen:

1. **Selektoren**: Dies sind die Ziele, die Sie stylen möchten. Selektoren können HTML-Elemente (z.B. `p` für Absätze, `h1` für Überschriften), Klassen (`.meine-klasse`), IDs (`#meine-id`), Attribute oder sogar Pseudo-Klassen (z.B. `:hover` für den Zustand, wenn die Maus über ein Element fährt) und Pseudo-Elemente (z.B. `::before` für Inhalt vor einem Element) sein.
2. **Eigenschaften (Properties)**: Dies sind die spezifischen Aspekte eines Elements, die Sie ändern möchten (z.B. `color`, `font-size`, `background-color`, `margin`, `padding`).
3. **Werte (Values)**: Dies sind die Einstellungen, die Sie den Eigenschaften zuweisen (z.B. `red` für `color`, `16px` für `font-size`, `blue` für `background-color`).

Ein einfaches CSS-Regel-Set sieht so aus:
„`css
p {
color: blue;
font-size: 16px;
}
„`
Dieses Regel-Set würde alle Absätze (p) blau färben und ihre Schriftgröße auf 16 Pixel setzen.

#### Einbindung von CSS

Es gibt drei Hauptwege, CSS in eine Webseite einzubinden:

* **Inline-Styles**: Direkt im HTML-Tag mit dem `style`-Attribut. Beispiel: `

Dieser Text ist rot.

`. Dies wird für größere Projekte nicht empfohlen, da es die Trennung von Inhalt und Präsentation aufhebt und die Wartung erschwert.
* **Internes (eingebettetes) CSS**: Im `