Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) sind eine Gestaltungssprache für Websites, mit der das Aussehen und Layout von HTML-Inhalten definiert wird. Während HTML für die Struktur (z. B. Überschriften, Absätze, Links) zuständig ist, sorgt CSS dafür, wie das Ganze aussieht – also Farben, Abstände, Schriftarten, Animationen oder Anordnung auf dem Bildschirm.
Das „Cascading“ steht für das Stil-Prinzip der Vererbung und Priorisierung: Mehrere Style-Regeln können sich gegenseitig beeinflussen, wobei die spezifischste Regel gewinnt.
Beispiel
Html:
<p class="hinweis">Diese Nachricht ist wichtig.</p>
Css:
.hinweis {
color: red;
font-weight: bold;
padding: 10px;
}
→ Ergebnis: Der Text erscheint fett, rot und mit Abstand zum Rand – gestaltet durch CSS, unabhängig vom HTML.
Was kann CSS steuern?
- Typografie (z. B. Schriftart, Größe, Zeilenabstand)
- Farben und Hintergründe
- Abstände und Positionen (z. B. Margin, Padding, Grid, Flexbox)
- Animationen und Übergänge
- Responsive Design für verschiedene Bildschirmgrößen
- Effekte wie Schatten, Rahmen oder Transparenz
Warum ist CSS so wichtig?
- Es trennt Inhalt und Gestaltung – für sauberen, wartbaren Code
- Es ermöglicht konsistentes Design über alle Seiten hinweg
- Es bildet die Grundlage für responsive, barrierefreie und moderne Webinterfaces
Herausforderungen
- Unterschiedliche Browser-Interpretationen
- Komplexität bei großen Projekten
- Verständnis von Vererbung, Selektoren und Spezifität nötig
- Pflegeaufwand, wenn viele Stylesheets ungeordnet wachsen
CSS macht das Web schön. Es definiert, wie Websites aussehen und sich verhalten, und ist damit eine zentrale Sprache im Frontend-Design.
