Webdesignerin

Webdesignerin

Dipl. Wi. Infrom. Susanne Wollatz

CSS (Cascading Style Sheets)

CSS steht für Cascading Style Sheets und bestimmt, wie eine Website aussieht – also Farben, Schriften, Abstände und das Layout. Während HTML den Inhalt einer Seite strukturiert, sorgt CSS für das Design und die optische Gestaltung.

CSS (Cascading Style Sheets) ist eine Gestaltungssprache, die im Webdesign verwendet wird, um das Aussehen und Layout von Webseiten zu definieren.
HTML liefert die Struktur und Inhalte (z. B. Texte, Überschriften, Bilder), CSS legt fest, wie diese Inhalte dargestellt werden – also das Design, die Farben, die Schriftgrößen, die Abstände, Hintergründe und Positionierungen.

Ein Beispiel:

Anzeige eines kleinen CCS-Codes

Dieser CSS-Code sorgt dafür, dass alle Hauptüberschriften (<h1>) dunkelrot und 32 Pixel groß angezeigt werden.

Die Bezeichnung „Cascading“ (zu Deutsch: „kaskadierend“) bedeutet, dass mehrere CSS-Regeln übereinander greifen können. Dabei entscheidet eine festgelegte Reihenfolge (die sogenannte Spezifität), welche Regel im Konfliktfall Vorrang hat – z. B. ob eine globale Formatierung oder eine gezielte Anweisung für ein bestimmtes Element gilt.

CSS kann auf drei Arten eingebunden werden:

  1. Extern: über eine eigene .css-Datei (empfohlen für größere Projekte).

  2. Intern: direkt im <style>-Bereich des HTML-Dokuments.

  3. Inline: als Attribut direkt im HTML-Tag (z. B. <p style="color:red;">).

Mit modernen Techniken wie Flexbox, Grid und Media Queries lassen sich flexible und responsive Layouts erstellen, die sich automatisch an verschiedene Bildschirmgrößen anpassen – vom Smartphone bis zum großen Desktop-Monitor.

Praxisbeispiel:
Wenn Sie möchten, dass Ihre Website auf dem Smartphone einspaltig und auf dem Desktop zweispaltig erscheint, können Sie das mit CSS Media Queries steuern. Damit sorgt CSS für Responsive Webdesign und eine optimale Darstellung auf allen Geräten.

Kurz gesagt: HTML ist das Gerüst – CSS ist das Design.