Normaal gesproken past u de vormgeving van uw thema aan via Weergave –> Customizer.
Maar soms is er een thema en dan wilt u nou net die dingen aanpassen die niet in de Customizer staan.
Voorbeelden hiervan zijn:

• De grote van bepaalde teksten of titels
• De kleuren van achtergronden of teksten
• De hoogte van een slider
• De copyright tekst onderaan (“powered by WordPress”)

Hiervoor kan je gebruik maken van de optie “Extra CSS” in de customizer. Lees nog even verder hoe dit werkt.

Hoe werkt het?
Elke website is opgebouwd uit HTML pagina’s en stylesheets. In de HTML pagina staan de blokjes beschreven en de inhoud van die blokjes. Bijvoorbeeld de titel van een pagina is zo’n blokje.
Als je de HTML code bekijkt staat daar:
<h1 class=”entry-title”>Welkom op mijn pagina</h1>
Hier staat: Laat hier de titel van de pagina zien. Hoe die titel eruit gaat zien is vastgelegd in de stylesheet. Daarin staat: Als een titel de code <h1> </h1> laat dan deze tekst zien met deze vormgeving:

font-family: ”Arial, serif;           Dit is het lettertype
color: #323232;                           De kleur van de letters
line-height: 1.3 em;                     De regelhoogte
font-weight: 700;                        De zwaarte van de letters

Ook staat er in die stylesheet wat voor vormgeving de class “entry-title” krijgt, namelijk:

margin: 10px 0px;                     De ruimte rondom: onder en boven 10pixels en links rechts 0 pixels
font-size: 40px;                          De grote van de letters, nl 40px groot.

Hoe kan je nu dingen aanpassen en veilig bewaren?
Door gebruik te maken van het onderwaterscherm (rechtermuisknop INSPECTEREN) of F12 kan je de code inspecteren. Je ziet nu de HTML code (links) en de CSS code (rechts). Helemaal links staat het knopje voor inspecteren.

U kunt nu de elementen op een webpagina inspecteren en de bijbehorende HTML / CSS code lezen.
U kunt zelfs de CSS code aanpassen in het rechter scherm en zien of de aanpassing is zoals jij wilt.

Aanpassingen overnemen
Het aanpassen / uittesten gebeurt hier echter alleen op jouw beeldscherm. Je moet de aanpassingen nog definitief overnemen naar jouw website. Als je op deze manier uittest of jouw veranderingen de juiste zijn kan je die overnemen naar Customizer –> Extra CSS. De CSS code die daar is opgeslagen blijft bewaard bij een update van het thema.

Wat moet u dan overnemen?
U kopieert de naam van de class en de onderliggende opdrachten tot en met de afsluitende accolade
Dus bijvoorbeeld:

.entry-title {                                                   <– de punt geeft aan dat het een class is.
font-family: ”Arial, serif;
color: #323232;
line-height: 1.3 em;
font-weight: 700;
}

Een style definitie is altijd als volgt opgebouwd:    naam: waarde;
(dus de naam + dubbelpunt + de waarde + puntkomma)

Veel gebruikte aanpassingen of codes zijn:

color: #ffffff;                                    Hiermee kan je de kleur van dat element aanpassen
font-size: 30px;                               Om de lettergrootte aan te passen
margin: 10px 10px 10px 10px;     De ruimte om het element (boven. rechts, onder en links)
padding: 10px 10px 10px 10px;   De ruimte binnen het element (boven. rechts, onder en links)
display: none;                                  als je een element niet wilt laten zien

Alle mogelijke CSS codes vindt u hier: (ook om te testen)
https://www.w3schools.com/css/default.asp

Plugin gebruiken voor CSS?

En zoals voor zoveel problemen is er ook een andere oplossing: een plugin.
Deze kwam ik onlangs tegen: Site-Origin CSS
https://wordpress.org/plugins/so-css/