CSS Elemente herausfinden

In den neuen Versionen der WordPress Software ist eine Funktion enthalten, die mein Webdesignerherz höher schlagen lässt: zusätzliches CSS.
Diese Funktion befindet sich ganz unten im Customizer und hilft dir, deine Webseite auch über die Möglichkeiten deines Themes hinaus deinen Wünschen anzupassen.

Wunderbare Sache, WENN du dich mit CSS auskennst. Dann kannst du nämlich schnell mal eine Schriftgröße, eine Farbe oder eine ganze Schrift ändern, auch wenn das in deinem Theme so nicht vorgesehen war.

Nun ist CSS allerdings kein Hexenwerk – hat man einmal den Aufbau eines CSS-Befehls verstanden, kann man damit viel Spaß haben. Als Hilfestellung kannst du z.B. auf der Seite wiki.selfhtml.org nachsehen, welche CSS Befehle es überhaupt gibt und welche Möglichkeiten der Anpassung sie bieten.

Merke: CSS Befehle sind allgemeingültig!

Beispiel: der Befehl
{font-size: 28px;}
(Schriftgröße 28 Pixel) wird auf allen Webseiten gleich ausgeführt.

Die Schwierigkeit liegt eher darin, herauszufinden, wie des jeweilige CSS Element in deinem Theme heißt, das du verändern möchtest.

Zum Verständnis hier der grundlegende Aufbau eines CSS Befehls
Selektor {Property: Wert;}
also ist das font-size von oben die Property und 28px ist der Wert – was ist aber der Selektor?

Und das ist genau das Problem. Es gibt zwar einige Selektoren, die auf allen Webseiten gleich heißen (z.B. p für normalen Text), aber manchmal ist das Element, das du ändern möchtest, eben auch sehr viel individueller benannt. Das liegt einfach an den Themeentwicklern, die das dann so festgelegt haben.

In meinem nachfolgenden Video zeige ich dir, wie du in Chrome und in Firefox einfach herausfindest, wie das CSS Element heißt, das du ändern möchtest. Sicherlich gibt es in den anderen Browsern da auch Möglichkeiten – wie immer: suchen hilft! Und der grundsätzliche Ansatz ist hier vermutlich gleich.

Firebug für Firefox