CSS steht für Cascading Style Sheets und ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und Layout von HTML-Dokumenten (wie Websites) zu beschreiben. Ein Stylesheet kann am ehesten mit einer Formatvorlage verglichen werden, der dann Inhalte zugewiesen werden. Grundlegender Gedanke ist hierbei die Trennung von Information (Daten) und deren Darstellung (Layout). Mit CSS kann daher das Design einer Website modifiziert werden, indem es Farben, Schriftarten, Abstände, Größen, Positionen und andere visuelle Komponenten definiert. Es ermöglicht eine klare Trennung zwischen dem Inhalt (HTML) und der Darstellung (CSS) einer Webseite, was die Arbeit an einer Webseite erheblich erleichtert.
CSS wurde wie gesagt entwickelt, um Darstellungsparameter weitestgehend von ihren Inhalten zu trennen. Wird diese Trennung konsequent umgesetzt, werden nur noch die inhaltliche Gliederung eines Dokumentes und sowie die Bedeutung seiner Teile in HTML oder XML beschrieben; CSS legt dazu parallel (vornehmlich via gesonderter CSS-Dateien) fest, wie die Inhalte dargestellt werden sollen (daher Eigenschaften wie Layout, Farben oder Typografie). Im aktuellen CSS3-Standard können hier auch komplexere Ausgabemöglichkeiten wie zB Animationen oder responsive Webdesigns definiert werden.
Hauptfunktionen von CSS
- Trennung von Struktur und Design: HTML beschreibt die Struktur der Webseite, während CSS die Gestaltung übernimmt. Diese Trennung erleichtert wie gesagt das Layout einer Website.
- Design und Layout: CSS wird verwendet, um das Layout einer Webseite festzulegen. Es regelt daher das Aussehen der Elemente wie Überschriften, Texte, Bilder und Schaltflächen.
- Responsive Design: CSS ermöglicht es, Webseiten für verschiedene Bildschirmgrößen (Desktop, Laptop, Smartphone) zu optimieren.
- Wiederverwendbarkeit: CSS kann auf einer Website für beliebig viele Elemente verwendet werden, wodurch sich ein konsistentes Design der Site ergibt.
Wichtige CSS-Konzepte
- Kaskadenregel: CSS-Dateien folgen einer sogenannten Kaskadenregel, bei der der Stil von der spezifischsten zur allgemeinsten Regel hin angewendet wird. Wenn mehrere Regeln auf ein Element zutreffen, entscheidet CSS nach Priorität.
- Box-Modell: Jedes HTML-Element kann als Box verstanden werden, die aus Inhalt, Padding, Rand und Rahmen besteht. Das Box-Modell ist entscheidend für das Layout und die Anordnung der Elemente auf einer Website.
- Selektoren: Selektoren bestimmen, auf welche HTML-Elemente die CSS-Regeln angewendet werden. Es gibt einfache Selektoren (wie zB
p,h1) und komplexere Selektoren wie Klassenselektoren (.class), ID-Selektoren (#id) und Pseudoklassen (:hover).
Fazit
CSS ist ein grundlegender Bestandteil der bei der Erstellung einer Website. Es ermöglicht es dem Programmierer bzw dem Gestalter, Design und Layout einer Webseite flexibel zu steuern. Mit CSS lassen sich einfache wie komplexe visuelle Anpassungen vornehmen die technische Umsetzung mit dem intendierten Layout zu verbinden.
