CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die verwendet wird, um das Erscheinungsbild und Layout von Webseiten zu gestalten. Es trennt die Struktur einer Webseite, die in HTML oder einer ähnlichen Markup-Sprache definiert ist, von ihrem visuellen Design. Dies ermöglicht Webentwicklern, das Design einer Webseite unabhängig vom Inhalt zu steuern, was Flexibilität und Wiederverwendbarkeit von Stilen über verschiedene Seiten hinweg bietet.
Grundlagen
CSS funktioniert, indem es Regeln definiert, die auf HTML-Elemente angewendet werden. Diese Regeln bestehen aus einem Selektor, der das Element bestimmt, auf das die Regel angewendet wird, und einer oder mehreren Deklarationen. Eine Deklaration setzt sich aus einer Eigenschaft und einem dazugehörigen Wert zusammen. Beispielsweise würde die Regel p { color: blue; } festlegen, dass alle Textabsätze (p-Tags) blau dargestellt werden sollen.
Kaskadierung und Spezifität
Der Name „Cascading“ in CSS bezieht sich auf die hierarchische Anwendung von Regeln, wenn mehrere Stilvorgaben für dasselbe Element definiert sind. Die Kaskadierung legt fest, welche Regel im Konfliktfall Vorrang hat. CSS nutzt ein System von Spezifität, um zu bestimmen, welche Regeln dominieren. Inline-Styles, IDs und Klassen haben höhere Spezifität als einfache Tag-Selektoren, sodass sie bevorzugt werden, wenn sie auf dasselbe Element zutreffen.
Einsatz und Anwendung
CSS kann auf verschiedene Arten in eine Webseite eingebunden werden: direkt im HTML-Dokument (Inline-CSS), im <head>-Bereich des HTML-Codes (internes CSS) oder als externe Datei (externes CSS). Die externe Einbindung ist die bevorzugte Methode, da sie die Trennung von Inhalt und Design unterstützt und die Wiederverwendbarkeit von Stilen über verschiedene Seiten einer Website hinweg ermöglicht.
Medienanfragen und Responsives Design
CSS unterstützt auch das sogenannte „Responsive Design“, das Webseiten erlaubt, sich an verschiedene Bildschirmgrößen anzupassen. Durch den Einsatz von Media Queries können Entwickler Layouts gestalten, die sowohl auf Desktop- als auch auf Mobilgeräten optimal dargestellt werden. CSS spielt damit eine zentrale Rolle in der modernen Webentwicklung.
