Blog

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. Dieser Artikel ist nun Teil des Einsteiger CSS-Kurses für WordPress.

In zwei separaten Artikeln (Nr.1 und Nr.2) beschreibe ich im Detail einige CSS-Befehle, mit denen du bestimmte Änderungen an deiner Website vornehmen kannst. 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:

• Logik, Aufbau und Struktur von CSS
• Sinn und Zweck der geschweiften Klammern
• mehrere Eigenschaften für einen Selektor
• 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:

Welcher Selektor (Element) 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 hast du 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 und der Struktur von CSS.

Klammern und mehrere Eigenschaften

Innerhalb der geschweiften Klammern (d.h. in einer Deklaration) kannst du 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 Größe 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 des CSS-Codes im Customizer (unter Zusätzliches CSS) auf deiner Website rein gar nichts passiert. Um in der Hierarchie mit dem neuen CSS-Befehl nach oben zu rutschen, ergänzt du schlichtweg ein !important nach dem Wert.

Das würde dann so aussehen:

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

Wie du den richtigen Selektor identifizierst

Nach diesem kurzen Artikel weißt du, wie du CSS-Befehle korrekt aufbaust. Du möchtest jedoch „einfach nur“ im Customizer ein klein bisschen CSS in WordPress ergänzen, um das eine oder andere Element anzupassen? Auf deiner Website weißt du, was du ändern möchtest, erreichst mit deinen CSS-Befehlen jedoch nicht den korrekten Selektor?

Kein Problem!

Im Beitrag „WordPress CSS Element finden und bearbeiten“ bescheibe ich detailliert die Lösung dieses Problems, bzw. beantworte die Frage.

Weiter zu Teil 3

Aufbau und Struktur von CSS ist dir nun hoffentlich ein bisschen klarer geworden. Im dritten Teil des CSS-Kurses geht es darum, welche Selektoren es gibt und für was sie verwendet werden.

Hier geht es weiter zu Teil 3:
Die CSS Selektoren

CSS-Kurs (WordPress) Inhaltsverzeichnis:
Und hier geht es zur Übersichtsseite für den kleinen CSS Einsteigerkurs.

Viel Erfolg mit deiner Website, WordPress und CSS in WordPress!

WordPress CSS Lesestoff

Falls du nach diesem wirklich sehr kurz gehaltenen Einstieg ins CSS bei WordPress auf den Geschmack gekommen bist, so lies dir gerne meine anderen Artikel durch.

Unter der Kategorie WordPress CSS habe ich einige Themen für CSS-Anfänger zusammengestellt – viel Erfolg und Spaß damit!