Kategorien
blog WordPress CSS

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. 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 das richtige Element (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 (Elemente) (geplant 2021)

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!

4 Antworten auf „Aufbau und Struktur von CSS in WordPress“

Hallo Hubert,
super erklärt, endlich habe ich das kapiert wo was stehen muss. Als kompletter Anfänger war das bisher nur stochern im Nebel.
Danke dir, Hannes

Moin Hannes,
gerne doch und freut mich, dass der Artikel geholfen hat.
Im Laufe der nächsten Monate will ich eine kleine Artikelserie zu „WordPress und CSS“ veröffentlichen, eine Art Mini-CSS-Kurs, kostenlos natürlich. Das wäre dann bestimmt auch was für dich (falls du bis dahin nicht bereits ein Experte bist).
Weiterhin viel Erfolg!
Hubert

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.