CSS, kurz für Cascading Style Sheets, ist eine Sprache, mit der das Aussehen von Webseiten definiert wird. Während HTML die Struktur einer Seite beschreibt, sorgt CSS dafür, dass Inhalte wie Texte, Bilder und Buttons optisch ansprechend dargestellt werden.
Das Ziel von CSS ist es, Layouts, Farben, Schriftarten, Abstände, Größen und Positionierungen zu gestalten. Dabei kann CSS entweder direkt in HTML eingebunden oder als externe Datei verknüpft werden, um eine einheitliche Gestaltung über mehrere Seiten hinweg zu ermöglichen.
Selektoren
Selektoren sind die Bausteine von CSS. Sie bestimmen, welche Elemente auf einer Webseite von den Gestaltungsregeln betroffen sind. Es gibt unterschiedliche Arten von Selektoren, die sich nach verschiedenen Kriterien richten:
- Elementselektoren richten sich an bestimmte HTML-Tags wie Überschriften oder Absätze.
- Klassen- und ID-Selektoren ermöglichen gezielte Gestaltung einzelner Bereiche oder Elemente.
- Gruppen- und Nachfahrenselektoren helfen, mehrere Elemente gleichzeitig oder nur bestimmte innerhalb anderer Elemente zu stylen.
Durch die Kombination von Selektoren kann man sehr spezifische Zielgruppen für das Styling definieren.
Eigenschaften und Werte
CSS arbeitet mit Eigenschaften, die bestimmte Aspekte eines Elements beeinflussen. Dazu gehören Farben, Schriftarten, Abstände, Größen, Ränder, Hintergründe und vieles mehr. Jede Eigenschaft wird durch einen passenden Wert definiert.
Beispiele für Eigenschaften sind Textfarbe, Schriftgröße, Zeilenhöhe, Abstände zwischen Elementen, Rahmenart und Hintergrundfarbe. Werte können unterschiedliche Formen annehmen: Farben als Namen oder Codes, Größen in Pixeln oder Prozenten, und Positionierungen als relativer oder absoluter Wert.
Layout und Positionierung
Ein zentraler Bestandteil von CSS ist die Kontrolle über das Layout. Man kann Elemente nebeneinander anordnen, übereinander stapeln oder flexibel anpassen, je nach Bildschirmgröße.
Wichtige Konzepte dabei sind:
- Box-Modell: Jedes Element wird als rechteckige Box betrachtet, bestehend aus Inhalt, Innenabstand, Rand und Außenabstand. Das Verständnis dieses Modells ist entscheidend, um Layouts korrekt zu gestalten.
- Flexbox: Eine Technik, um Elemente in einer Zeile oder Spalte flexibel zu verteilen und auszurichten.
- Grid: Ein leistungsstarkes Raster-System, mit dem man komplexe Layouts strukturieren kann.
Farben, Schriftarten und Textgestaltung
CSS erlaubt die freie Gestaltung von Text und Farben. Man kann die Schriftart ändern, Schriftgrößen anpassen, Textausrichtung festlegen, Abstände zwischen Buchstaben oder Zeilen definieren und Text dekorieren.
Farbgestaltung kann entweder einfarbig sein, Farbverläufe erzeugen oder sogar Bilder als Hintergrund einbinden. Das sorgt für visuelle Hierarchie und verbessert die Benutzerfreundlichkeit.
Responsives Design
Moderne Webseiten müssen auf unterschiedlichen Geräten gut aussehen. CSS unterstützt dies durch Techniken, die Layouts an verschiedene Bildschirmgrößen anpassen. Man kann Regeln definieren, die nur greifen, wenn die Bildschirmbreite eine bestimmte Größe erreicht, sodass Elemente sich flexibel anpassen.
Zusammenfassung
CSS ist das Werkzeug, um Webseiten optisch zu gestalten und benutzerfreundlich zu machen. Es funktioniert über Selektoren, Eigenschaften und Werte, steuert Layouts, Farben, Schriftarten und Abstände und ermöglicht ein responsives Design. Das Verständnis dieser Konzepte ist die Grundlage, um ansprechende und funktionale Webseiten zu erstellen.