Bei der style.css geht es um den Stil, also das Aussehen Deiner Website.
Aber mal zurück zum Anfang 😉 Die style.css ist eine Datei. Die Endung „css“ steht für Cascading Style Sheets, eine eigene Sprache, die festlegt, wie Inhalte aussehen: Farben, Schriften, Abstände, Rahmen und vieles mehr.
HTML und CSS: ein Team
HTML beschreibt, was auf einer Seite steht: eine Überschrift, ein Absatz, ein Bild. CSS legt fest, wie das aussieht: die Überschrift in Türkis, der Absatz mit 18 Pixel Schrift, das Bild mit runden Ecken. Die beiden arbeiten zusammen, sind aber zwei verschiedene Sprachen.
Eine CSS-Regel sieht zum Beispiel so aus:
h2 {
color: #2AA9B8;
font-size: 32px;
}
Übersetzt: Alle Überschriften der Ebene 2 werden türkis und 32 Pixel groß.
Die style.css im Theme
Die style.css kommt mit dem Theme. Für WordPress ist sie sogar eine Pflichtdatei: Ganz oben steht ein Kopfbereich mit Informationen zum Theme, und ohne ihn erkennt WordPress das Theme nicht.
Dort steht zum Beispiel:
- der Name des Themes und wer es entwickelt hat
- die Version
- welche WordPress- und PHP-Version mindestens nötig ist
- die Lizenz
Diese Angaben siehst Du auch im Backend unter Design › Themes, wenn Du auf die Theme-Details klickst. Darunter folgen die eigentlichen CSS-Regeln. Die gelten für Deine Website, also das Frontend.
Und bei Plugins?
Auch Plugins bringen CSS mit. Je nach Plugin gestaltet es die Einstellungen im Backend und das, was Deine Besucher:innen sehen, zum Beispiel eine Galerie oder, bestes Beispiel, das Cookie-Banner. Diese Dateien heißen allerdings meist anders, etwa „frontend.css“ oder nach dem Plugin. Die style.css mit dem Theme-Kopf ist eine Besonderheit der Themes.
Bitte nicht in der style.css des Themes ändern!
Es ist verlockend: Datei öffnen, Farbe ändern, fertig. Das Problem: Beim nächsten Theme-Update wird die style.css überschrieben, und Deine Änderung ist weg.
Besser sind diese Wege:
- Child-Theme: Ein kleines Theme, das auf Deinem Haupt-Theme aufbaut. Es hat eine eigene style.css, in deren Kopf die Zeile „Template“ auf das Haupt-Theme verweist. Updates des Haupt-Themes lassen es in Ruhe.
- Zusätzliches CSS: Bei klassischen Themes findest Du es im Customizer (Design › Customizer › Zusätzliches CSS), bei Block-Themes im Website-Editor unter Stile.
Divi: In den Divi-Theme-Optionen gibt es ein Feld für eigenes CSS. Außerdem kannst Du in jedem Modul unter „Erweitert“ eigenes CSS nur für dieses Element eintragen.
Was hat es mit der theme.json auf sich?
Bei modernen Block-Themes wie Twenty Twenty-Five steht vieles, was früher in der style.css stand, inzwischen in einer Datei namens theme.json: Farbpalette, Schriften, Abstände. Die style.css gibt es trotzdem weiterhin, schon wegen des Theme-Kopfs.
Fazit
Die style.css ist die Visitenkarte Deines Themes: Oben stehen die Eckdaten, darunter die Regeln für das Aussehen. Lesen darfst Du sie gern. Eigene Änderungen gehören aber in ein Child-Theme oder in die dafür vorgesehenen Felder.
Hast Du schon mal in eine style.css geschaut? Oder sogar etwas geändert, das nach dem Update wieder weg war? 🙈 Schreib es mir in die Kommentare
0 Kommentare