Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, die verwendet wird, um das Erscheinungsbild von HTML- oder XML-Dokumenten zu gestalten und zu formatieren. CSS ermöglicht die Trennung von Inhalt und Präsentation, indem es Entwicklern die Möglichkeit bietet, das Layout, die Farben, die Schriftarten und andere visuelle Eigenschaften einer Webseite zu definieren, ohne den HTML-Code selbst zu ändern. Dies erleichtert die Wartung, die Konsistenz und die Anpassbarkeit von Webseiten. Hier sind einige wichtige Konzepte und Funktionen von CSS:
- Selektoren: CSS verwendet Selektoren, um HTML-Elemente auszuwählen, denen Stile zugewiesen werden sollen. Zum Beispiel kann der Selektor "p" auf alle Absätze in einem Dokument angewendet werden.
- Eigenschaften: CSS definiert verschiedene Eigenschaften, die das Erscheinungsbild von Elementen beeinflussen, wie z.B. "color" für die Textfarbe, "font-size" für die Schriftgröße und "margin" für den Abstand um ein Element.
- Werte: Jede Eigenschaft in CSS kann einen oder mehrere Werte haben. Zum Beispiel kann die "color"-Eigenschaft den Wert "rot" oder "#FF0000" haben.
- Deklarationen: In CSS werden Stile in sogenannten Deklarationen definiert. Eine Deklaration besteht aus einer Eigenschaft und einem Wert, die durch einen Doppelpunkt getrennt sind und von einem Semikolon abgeschlossen werden. Zum Beispiel: "color: blau;".
- Kaskadierung: Das "Cascading" in CSS steht für die Hierarchie, in der Stile auf Elemente angewendet werden. CSS-Regeln können von verschiedenen Quellen stammen, wie z.B. externen Stylesheets, internen Styles oder Inline-Stilen, und sie werden in einer bestimmten Reihenfolge angewendet, wobei Prioritäten und Spezifität eine Rolle spielen.
- Selektoren und Kombinatoren: CSS bietet verschiedene Selektoren und Kombinatoren, um spezifischere oder umfassendere Elemente auszuwählen. Zum Beispiel können Sie den Klassen-Selektor (.klasse) verwenden, um alle Elemente mit einer bestimmten CSS-Klasse auszuwählen.
- Medienabfragen: CSS ermöglicht es, das Layout und die Gestaltung basierend auf den Eigenschaften des Anzeigegeräts anzupassen, z.B. Bildschirmgröße, Auflösung und Ausrichtung.
- Pseudo-Klassen und Pseudo-Elemente: Mit Pseudo-Klassen (z.B. :hover für den Mauszeiger) und Pseudo-Elementen (z.B. ::before und ::after) können Sie bestimmte Zustände oder Teile von Elementen stilisieren.
- Externe Stylesheets: Es ist möglich, CSS-Regeln in externen Stylesheets-Dateien zu speichern, die dann auf mehreren Seiten einer Website verwendet werden können. Dies fördert die Konsistenz und die Wartbarkeit des Designs.
CSS ist ein grundlegender Bestandteil des modernen Webdesigns und ermöglicht die Erstellung ansprechender und gut gestalteter Webseiten. Entwickler und Designer verwenden CSS, um das Erscheinungsbild von Webseiten anzupassen und sicherzustellen, dass sie auf verschiedenen Bildschirmgrößen und Geräten korrekt angezeigt werden. CSS wird kontinuierlich weiterentwickelt, um den Anforderungen des modernen Webdesigns gerecht zu werden.