CSS

Was ist CSS?

CSS steht für Cascading Style Sheets – auf Deutsch: „gestufte Stilvorlagen“. Es handelt sich dabei um die Sprache, mit der Aussehen und Layout von HTML-Elementen im Web definiert werden. Während HTML für die Struktur zuständig ist (z. B. Überschrift, Absatz, Liste), bestimmt CSS Farben, Abstände, Größen, Positionen, Animationen und vieles mehr.

Ohne CSS wären Websites reine Textwüsten. Erst mit CSS wird aus HTML eine visuell ansprechende, benutzerfreundliche Oberfläche.

Was macht CSS konkret?

Mit CSS kannst du u. a.:

  • Farben und Schriftarten festlegen
  • Abstände, Ränder und Größen steuern
  • Elemente flexibel positionieren (z. B. mit Flexbox oder Grid)
  • Hover- und Übergangseffekte erzeugen
  • Layouts responsiv machen (z. B. für Mobilgeräte)
  • Zustände und Medien gezielt ansprechen (Dark Mode, Druckansicht etc.)

Ein einfaches Beispiel:

cssKopierenBearbeitenh1 {
  color: #333;
  font-size: 2rem;
  margin-bottom: 1em;
}

Dieses CSS sorgt dafür, dass alle <h1>-Überschriften dunkelgrau, größer und mit Abstand nach unten angezeigt werden.

CSS in WordPress – wo kommt es zum Einsatz?

In WordPress wird CSS auf mehreren Ebenen verwendet:

1. Im Theme selbst

Jedes Theme bringt eigene Stylesheets mit – meist als Datei style.css. Darin ist das grundlegende Design der Website definiert.

2. Im Customizer

Unter Design → Customizer → Zusätzliches CSS kannst du eigene CSS-Regeln einfügen, die direkt auf deiner Seite aktiv werden.

3. In Page Buildern

Tools wie Elementor, Bricks oder Divi erlauben es dir, pro Element oder global CSS-Klassen zu vergeben und eigene Styles zu definieren.

4. Per Plugins

Plugins wie Simple Custom CSS, YellowPencil oder CSS Hero ermöglichen dir, auch ohne Codekenntnisse CSS anzupassen – visuell oder codebasiert.

Wie ist CSS aufgebaut?

CSS besteht aus Selektor + Eigenschaft + Wert:

selektor {
  eigenschaft: wert;
}

Beispiel:

.button {
  background-color: #fabd12;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

Mit sogenannten Media Queries kannst du gezielt Styles für bestimmte Bildschirmgrößen definieren:

@media (max-width: 768px) {
  .hero-text {
    font-size: 1.5rem;
  }
}

Das ist die Grundlage für Responsive Design.

Was bedeutet „Cascading“?

Der Begriff „Cascading“ beschreibt die Hierarchie und Vererbung von CSS-Regeln. Wenn mehrere Regeln auf ein Element zutreffen, entscheidet der Browser nach einem festen Prinzip:

  1. Spezifität (z. B. ID schlägt Klasse)
  2. Reihenfolge (letzte Regel gewinnt)
  3. Wichtigkeit (!important setzt alles außer Kraft)

Wer CSS beherrschen will, muss diese Kaskadenlogik verstehen – sie ist essenziell für sauberes Design.

Best Practices für CSS

  • Klassen statt IDs verwenden – flexibler und besser kombinierbar
  • Vermeide !important, außer in Ausnahmefällen
  • Vererbung nutzen, statt alles mehrfach zu definieren
  • Mobile First denken – zuerst Basislayout, dann Desktop-Erweiterungen
  • Strukturierte Klassennamen verwenden (z. B. nach BEM oder Utility-Prinzipien)
  • Minimiere und kombiniere CSS-Dateien, um Ladezeiten zu verbessern

CSS und SEO – gibt’s da einen Zusammenhang?

Indirekt ja. CSS beeinflusst die Usability, die Ladegeschwindigkeit (z. B. durch zu große oder blockierende Stylesheets) und damit auch die Nutzererfahrung – was Google in der Bewertung einer Website berücksichtigt.

Wenn deine Seite z. B. durch nicht geladenes CSS unlesbar erscheint oder wichtige Inhalte erst durch Animationen eingeblendet werden, kann das die Sichtbarkeit negativ beeinflussen.

Fazit

CSS ist das Design-Werkzeug des Webs. Es verwandelt nacktes HTML in ästhetisch gestaltete, responsive und zugängliche Websites. In WordPress ist CSS allgegenwärtig – ob in Themes, Page Buildern oder eigenen Anpassungen. Wer versteht, wie CSS funktioniert, hat die volle Kontrolle über das Aussehen seiner Seite – und kann damit nicht nur optisch überzeugen, sondern auch in Sachen Performance und Benutzerfreundlichkeit punkten.

Inhaltsverzeichnis