Aufbau und Struktur von CSS in WordPress

Etwas Hintergrundwissen zum Aufbau und der Struktur von CSS in WordPress kann nicht schaden.

Und für was soll das gut sein?

Zahlreiche Leser meiner Blogbeiträge haben mich mit ihren Fragen zu CSS in WordPress darauf gebracht.

In zwei vorangegangenen Artikeln (Nr.1 und Nr.2) beschrieb ich im Detail einige CSS-Befehle, mit denen Sie bestimmte Änderungen an Ihrer Website vornehmen können. Doch immer wieder erreichen mich E-Mails und Anfragen, wie diese CSS-Befehle denn konkret auf die Website der Fragenden anzupassen wären.

Das ist der Grund für diesen Artikel, in dem ich beschreibe:

  • Aufbau und Struktur von CSS
  • Sinn und Zweck der geschweiften Klammern
  • Hierarchie von CSS-Selektoren

Aufbau und Struktur von CSS in WordPress

Wie bei vielen anderen computerbezogenen Themen ist auch bei CSS der Aufbau logisch und klar definiert. Diese sogenannte Syntax gibt exakt vor, wie die einzelnen CSS-Befehle strukturiert werden müssen.

Grundsätzlich heißt das nichts anderes als:

Welches Element (Selektor) soll welche Eigenschaft mit welchem Eigenschafts-Wert (Deklaration) annehmen.

Mit einem Beispiel hinterlegt:

Alle Links sollen als Farbe grün annehmen.

Und in CSS würde das so aussehen:

a {color: green;}

Im Beispiel haben Sie gesehen, dass nach dem Selektor die Deklaration (Eigenschaft und Eigenschafts-Wert) in einer geschweiften Klammer zusammengefasst wird. Hierdurch wird klar festgelegt, wo die Deklaration mit ihren Eigenschaften und Eigenschafts-Werten startet und endet.

Ebenso ist es wichtig, nach jedem definierten Eigenschafts-Wert ein Semikolon zu setzen. Hiermit wird klargestellt, dass die Definition der Eigenschaft mit einem entsprechenden Wert abgeschlossen ist und nunmehr die nächste Definition kommt. Beziehungsweise das Ende der Deklaration mittels geschweifter Klammer.

Das war es bereits mit dem Aufbau.

Klammern und mehrere Eigenschaften

Innerhalb der geschweiften Klammern (d.h. in einer Deklaration) können Sie mehrere Eigenschaften mit Eigenschafts-Werten für einen Selektor definieren.

Um das Beispiel mit den Links ein bisschen auszuweiten:

a {
color: green;
background-color: red;
font-size: 8px;
}

Gut, die Lesbarkeit dieser Links mit grüner Schrift auf rotem Hintergrund in kleiner Schrift mag Geschmackssache sein. Der Aufbau des CSS in WordPress wird so jedoch funktionieren.

Hierarchie für CSS-Selektoren

Die diversen Selektoren-Typen innerhalb von Stylesheet-Dateien weisen unterschiedliche Spezifitäten auf. Im Normaldeutsch soll dies heißen: Jeder Selektor-Typ hat eine andere Gewichtung. Weisen zwei Selektoren, die im Prinzip das Gleiche darstellen sollen, unterschiedliche Werte auf, so „gewinnt“ derjenige mit der höheren Gewichtung.

Warum erzähle ich das?

Zurückkommend auf das Beispiel mit den Links kann es passieren, dass nach Eingabe im Customizer auf Ihrer Website rein gar nichts passiert. Um in der Hierarchie mit ihrem CSS-Befehl nach oben zu rutschen, ergänzen Sie ein !important nach dem Wert.

Das würde dann so aussehen:

a {
   color: green !important;
   background-color: red !important;
   font-size: 8px !important;
}

Wie Sie das richtige Element (Selektor) identifizieren

Sie wissen nach diesem kurzen Artikel, wie Sie CSS-Befehle korrekt aufbauen. Sie möchten jedoch „einfach nur“ im Customizer ein klein bisschen CSS in WordPress ergänzen, um das eine oder andere Element anzupassen? Auf Ihrer Website wissen Sie, was Sie ändern möchten, erreichen mit Ihren CSS-Befehlen jedoch nicht den korrekten Selektor?

Kein Problem!

In einem der nächsten Artikel erkläre ich, wie Sie mit dem CodeInspector das zu verändernde Element auf Ihrer Website identifizieren und im Customizer anpassen.

2 Gedanken zu “Aufbau und Struktur von CSS in WordPress”

  1. Hallo Hubert,
    super Info zum Aufbau von CSS, sehr leicht zu verstehen, sogar für mich als Nicht-Technikerin. Vor allem danke für die Info zum ; , das hatte ich bei einem meiner Versuche vergessen und jetzt funktioniert es!
    Tausend Dank!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.