/ Von

CSS

Design

CSS (Cascading Style Sheets)

Wenn wir über Webdesign sprechen, fallen fast immer zwei Begriffe im selben Atemzug: HTML und CSS. Während HTML das Gerüst deiner Website bildet, sorgt CSS dafür, dass dieses Gerüst auch gut aussieht.

Stell dir vor, du baust ein Haus. HTML ist der Rohbau: Wände, Balken, Fensteröffnungen. Es steht stabil, sieht aber nackt aus. CSS ist dann der Innenarchitekt und Maler in einem. Es bestimmt, welche Farbe die Fassade hat, wo die Möbel stehen und wie groß die Fenster tatsächlich sind.

Warum wir CSS brauchen

Früher wurde Design oft direkt in den HTML-Code geschrieben. Das war chaotisch und schwer zu pflegen. CSS (Cascading Style Sheets) trennt den Inhalt strikt vom Design. Das hat entscheidende Vorteile für deine Website.

  • Zentrale Steuerung: Du änderst an einer einzigen Stelle im Code die Farbe für alle Überschriften, und zack – auf allen 50 Unterseiten deiner Website ist die Farbe angepasst.
  • Ladezeit: Da der Browser die CSS-Datei nur einmal laden muss und sie dann speichert (Cache), bauen sich die Unterseiten schneller auf.
  • Responsivität: Ohne CSS gäbe es kein „Mobile Friendly“. CSS sorgt dafür, dass sich deine Website auf einem Smartphone anders anordnet als auf einem 27-Zoll-Monitor.

Wie funktioniert das technisch?

Keine Sorge, du musst kein Programmierer sein, um das Grundprinzip zu verstehen. CSS ist eine regelbasiertes Sprache. Wir sagen dem Browser: „Hey, wenn du dieses Element siehst, lass es so aussehen.“

Eine typische CSS-Regel besteht aus drei Teilen:

  1. Selektor: Wen spreche ich an? (Zum Beispiel alle p für Absätze oder eine spezielle class für Buttons).
  2. Eigenschaft: Was will ich ändern? (Zum Beispiel color für die Schriftfarbe oder font-size für die Größe).
  3. Wert: Wie soll es aussehen? (Zum Beispiel red oder 16px).

CSS in WordPress

In deinem WordPress-System arbeitet im Hintergrund meistens schon ein fertiges Stylesheet, das dein Theme mitbringt. Trotzdem wollen wir oft individuelle Anpassungen vornehmen.

  • Customizer: Der einfachste Weg für kleine Änderungen ist der Bereich „Design“ > „Customizer“ > „Zusätzliches CSS“. Hier kannst du live sehen, was dein Code bewirkt.
  • Hierarchie: Der Name „Cascading“ (kaskadierend) bedeutet, dass Regeln vererbt werden oder sich überschreiben können. Eine sehr spezifische Regel („Dieser eine Button auf der Startseite“) gewinnt fast immer gegen eine allgemeine Regel („Alle Buttons“).

Fazit

CSS ist das mächtigste Werkzeug, um aus einer langweiligen Textwüste eine Marke mit Wiedererkennungswert zu machen. Wenn deine Website „kaputt“ aussieht, lädt oft einfach nur das CSS nicht. Wenn sie super aussieht, hat jemand seinen Job beim Stylen sauber erledigt.