Was ist CSS und wie kannst du deine Website damit individuell anpassen?

Deine Website soll nicht nur funktionieren, sondern auch professionell aussehen und deinen persönlichen Stil widerspiegeln? Dann ist CSS genau das richtige Werkzeug für dich.

CSS, kurz für Cascading Style Sheets, ist ein Gestaltungstool, mit dem du gezielt das Erscheinungsbild deiner Website verändern kannst – von Farben über Schriftarten und Abstände bis hin zum Layout. Es sorgt dafür, dass deine Inhalte nicht nur gut strukturiert, sondern auch optisch ansprechend präsentiert werden – und das ganz ohne Webdesign-Studium oder komplexe Software.

Bevor wir uns näher damit beschäftigen, werfen wir erst einen kurzen Blick darauf, was „Code“ im Zusammenhang mit deiner Website bedeutet – und warum CSS dabei eine zentrale Rolle spielt.

Was macht Code auf einer Website?

Der Code deiner Website ist die Sprache, mit der du dem Browser mitteilst, wie deine Website aussehen und funktionieren soll. Die Grundlage dafür bildet HTML (Hypertext Markup Language). Damit legst du z. B. fest, wo Überschriften stehen, wie Absätze formatiert sind oder wie groß ein Bild angezeigt wird.

CSS ergänzt HTML: Es ist dafür zuständig, wie das Ganze aussieht. Während HTML das Grundgerüst bildet, ist CSS sozusagen die Innenausstattung: Es bestimmt Farben, Schriften, Abstände, Größen und viele andere visuelle Details. Mit CSS passt du das Design deiner Website so an, dass es zu dir oder deiner Marke passt.

Die Bestandteile von CSS

Bevor du deinen eigenen CSS-Code schreibst, lohnt sich ein Blick auf die grundlegenden Bausteine: Selektoren, Eigenschaften und Werte.

• Selektor: Dieser gibt an, welches Element auf der Seite du gestalten willst. Beispiel: Der HTML-Code für einen Absatz ist <p>. Möchtest du Absätze gestalten, ist p dein Selektor.
• Eigenschaft: Sie bestimmt, was genau geändert werden soll – zum Beispiel die Textfarbe (color).
• Wert: Dieser gibt an, wie die Änderung aussehen soll – zum Beispiel red für rote Schrift.

Ein Beispiel:

p {
  color: red;
}

Dieser Code sorgt dafür, dass alle Absätze (p) in roter Schrift angezeigt werden.

Wenn du tiefer in CSS einsteigen und mehr über Selektoren, Eigenschaften und Werte erfahren möchtest, findest du eine umfassende Einführung in der CSS-Dokumentation auf MDN Web Docs.

CSS auf deiner WordPress-Website verwenden

Es gibt mehrere Möglichkeiten, wie du CSS auf deiner WordPress-Website einsetzen kannst – je nachdem, welches Theme du nutzt und wie gezielt du das Styling anpassen möchtest.

CSS im Website-Editor (für Block-Themes): Wenn du ein Block-basiertes Theme (auch Site-Editor-Theme genannt) verwendest, kannst du benutzerdefiniertes CSS direkt im Website-Editor hinzufügen.

• Gehe zu Design > Website-Editor.
• Klicke oben rechts auf das Drei-Punkte-Menü (⋯) und wähle Website-Einstellungen.
• Scrolle nach unten zu Zusätzliches CSS, um deinen Code einzufügen.

Mehr dazu findest du in der Anleitung CSS im Website-Editor bearbeiten.

CSS im Customizer (für klassische Themes): Wenn du ein klassisches Theme verwendest, kannst du benutzerdefiniertes CSS über den Customizer hinzufügen:

• Gehe zu Design > Anpassen > Zusätzliches CSS.
• Dort kannst du deine CSS-Regeln einfügen, die dann für die gesamte Website gelten.

Hinweis: Die Möglichkeit, eigenes CSS einzufügen, ist bei WordPress.com ab dem Premium-Tarif verfügbar.

Inline im HTML-Code: Du kannst CSS direkt im HTML-Modus des Editors einfügen. Diese Methode ist schnell, eignet sich aber eher für einzelne Elemente oder Seiten – du müsstest den Code sonst immer wieder neu einfügen.

CSS gezielt auf bestimmte Blöcke anwenden

Wenn du CSS nur für einen bestimmten Block (z. B. ein Bild oder einen Absatz) anwenden willst, kannst du diesem Block eine eigene CSS-Klasse zuweisen:

1. Klicke im Editor auf den gewünschten Block.
2. Öffne in der rechten Seitenleiste die Einstellungen (⚙️).
3. Unter Erweitert findest du das Feld Zusätzliche CSS-Klasse(n) – dort kannst du einen Klassennamen wie meine-klasse eintragen.
4. Im Customizer oder Website-Editor fügst du dann den passenden CSS-Code hinzu, z. B.:

.meine-klasse {
  background-color: #f0f0f0;
  padding: 20px;
}

Eine Schritt-für-Schritt-Anleitung findest du hier: CSS-Klassen zu Blöcken hinzufügen

Beispiele: So gestaltest du deine Website mit CSS

Ändern der Textfarbe mit CSS

Wenn dein Theme z. B. gelbe H2-Überschriften verwendet, du aber lieber grüne hättest, kannst du das mit folgendem Code ändern:

h2 {
  color: green;
}

Auch der Fließtext lässt sich so einfärben:

body {
color: blue;
}

Tipp: Achte bei der Farbwahl auch auf ausreichend Kontrast – das hilft nicht nur bei der Lesbarkeit, sondern verbessert auch die Barrierefreiheit deiner Website.

Schriftart und -größe anpassen

Gefällt dir die Standardschrift deines Themes nicht? Kein Problem – du kannst die Schriftart z. B. so ändern:

h2 {
  font-family: Helvetica;
}

Mit dem oben gezeigten Code wird die Schrift deiner H2-Überschriften in Helvetica geändert. Es stehen auch viele andere Schriftarten zur Auswahl.

Du kannst auch die Schriftgröße ändern. In CSS wird die Schriftgröße in Prozentwerten angegeben. Der folgende Code zeigt eine Änderung der Größe der H2-Überschrift auf 250 %:

h2 {
  font-family: Helvetica;
  font-size: 250%;
}

Du kannst natürlich auch beides kombinieren:

h2 {
  font-family: Helvetica;
  font-size: 250%;
}

Weitere nützliche Eigenschaften sind zum Beispiel:

• text-decoration: Effekte wie unterstrichen, durchgestrichen usw.
• font-weight: Schriftstärke (z. B. bold)
• font-style: Stil (z. B. italic)

Zeichenabstand ändern

Sind dir die Buchstaben zu eng gesetzt? Dann kannst du den Abstand zwischen den Zeichen mit letter-spacing vergrößern:

p {
  letter-spacing: 0.5em;
}

Probiere unterschiedliche Werte aus, bis dir das Ergebnis gefällt.

CSS live ausprobieren

Wenn du deine Ideen direkt testen möchtest, ohne sie gleich auf deiner Website zu speichern, kannst du kostenlose Online-Tools wie CodePen oder JSFiddle verwenden. Dort kannst du HTML und CSS live bearbeiten und siehst sofort das Ergebnis – ideal zum Üben und Experimentieren.

Häufig genutzte CSS-Eigenschaften auf einen Blick

Hier ist eine kleine Übersicht von CSS-Eigenschaften, die du häufig beim Gestalten deiner Website brauchst:

👉 Tipp: Die Werte können je nach Designidee und Theme stark variieren – probiere einfach aus, was am besten zu deiner Website passt.

Jetzt bist du dran

Du weißt jetzt, was CSS ist und wie du damit das Design deiner Website nach deinen Vorstellungen gestalten kannst. Wenn du Fragen hast oder dir bei etwas unsicher bist, schau gern in die Support-Foren von WordPress.com – dort findest du viele Tipps und Hilfe von anderen Benutzern.