Was ist CSS?

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die das visuelle Erscheinungsbild von HTML-Dokumenten definiert. Während HTML die Struktur einer Webseite bestimmt, ist CSS für das Design verantwortlich — Farben, Schriftarten, Layouts, Abstände und Animationen.

Wie CSS funktioniert

CSS trennt Inhalt (HTML) von Gestaltung (CSS). Ein CSS-Stylesheet besteht aus Regeln, die definieren, wie bestimmte HTML-Elemente dargestellt werden sollen. Jede Regel besteht aus einem Selektor und einem Deklarationsblock.

CSS-Einbindungsmethoden

• Externes Stylesheet: Separate .css-Datei, die per <link> eingebunden wird (empfohlen)
• Internes Stylesheet: CSS im <style>-Tag im HTML-Head
• Inline-Styles: CSS direkt im HTML-Element (vermeiden)

Wichtige CSS-Konzepte

• Cascading: Die Kaskade bestimmt, welche Regeln Vorrang haben
• Spezifität: Genauere Selektoren überschreiben allgemeinere
• Box-Model: Jedes Element ist eine Box mit Content, Padding, Border und Margin
• Flexbox: Eindimensionales Layout-System für flexible Anordnung
• CSS Grid: Zweidimensionales Layout-System für komplexe Layouts

Modernes CSS

Aktuelle CSS-Features umfassen: CSS Custom Properties (Variablen), Container Queries, CSS Nesting, die :has()-Pseudo-Klasse und Cascade Layers. Frameworks wie Tailwind CSS ermöglichen Utility-First-Styling.

CSS und SEO

CSS beeinflusst die SEO indirekt über Ladegeschwindigkeit (optimierte CSS-Dateien laden schneller), Mobile-Responsiveness (CSS Media Queries), Core Web Vitals (Layout-Stabilität) und Barrierefreiheit.

Zusammenfassung

CSS ist neben HTML und JavaScript eine der drei Kerntechnologien des Webs. Ohne CSS wären Webseiten nur unformatierter Text — CSS macht das Web schön und benutzbar. Wenn aus Layout und Interaktion ein Produkt mit Anmeldung, Rechten und Schnittstellen werden soll, entwickeln wir daraus eine Web-Anwendung.