Customize styling through WordPress’ CSS Customizer

1 May 2023

Reageer!

What is WordPress‘ CSS customizer?

The CSS customizer allows you to add CSS to your website.

What on earth is CSS!

CSS, Cascading Style Sheet … that name doesn’t really make it clear.
STYLING!

With HTML elements you display data in your website, and with CSS you style those elements.

So you want to make changes to the style of your website? Then you write a piece of CSS.

Why would I do that with the CSS Customizer?

The Customizer has color-coding that makes it easier to see if your code is written correctly. The Customizer also provides a LIVE preview view where you can see the changes immediately, so you can pre-view it before you Publish it.
You can instantly see if your CSS styling code is working!

The screenshot below shows a piece of CSS written in the Customizer.
You can see here the ID, Class and an H2 title element that I made red with the CSS for example.

Wanneer gebruik je de CSS Customizer van WordPress?

1. Als je de vormgeving van je website snel wilt aanpassen
2. Als je huidige thema geen beheerpaneel heeft waar je styling kunt aanpassen
3. Als je geen Child thema wilt aanmaken
4. Als je geen toegang hebt tot de styling & Serverbestanden

Let op!

When do you use WordPress’ CSS Customizer?

1. If you want to quickly change the styling of your website
2. If your current theme does not have an admin panel where you can customize styling
3. If you do not want to create a Child theme
4. If you do not have access to the styling & Server files

Notice!

To use WordPress’ CSS Customizer, it is important that you have experience with CSS.
CSS is the code language used to define the design, color and dimensions of a website.

The CSS you write in the Customizer will be loaded inline at the top of your website’s code. As a result, this CSS overrides the styling used by your theme.

You can also kill your website graphically with it, in which case it’s just a matter of deleting the written CSS, but keep in mind.

The benefits of the CSS Customizer

• You immediately see what changes on the frontend of your website
• The styling remains, even with theme updates
• You don’t need to have server access or a code editor
• The CSS code has clear code formatting in color
• You can switch views: desktop, tablet and smartphone format
• HTML styling with CSS in practice

I can see you thinking: HOW do I know WHAT to style!

In order to customize the HTML elements of your website with CSS, you obviously need to know what the elements are called. After all, you grab them by ID or CLASS name.

Therefore, open your website using an Element Inspector.
Most browsers (chrome, Firefox and more) have that option, you right-click on a particular part of your website and then choose Inspect Element – Sometimes you have to repeat this 2x to get a particular element.

Tip: You can of course open the Element Inspector in a different tab, or preferably on a different monitor because then you simply see more. After all, you only want to know the name of an element.

The screenshot below shows the CSS Customizer and the Element Inspector open on the far right.

Okay, you now know that there is a CSS Customizer in WordPress. You know that you can put CSS in there that you can use to customize the design of your website.

Now to write the CSS!
By now, of course, every programmer has long clicked away from this article and is happily adding CSS.

But I can’t write CSS!

Are you an enthusiastic website owner who has no idea how to write CSS?
Then you can commission us to modify a certain element with CSS. In fact, we write CSS as easily as the ABC.

Click here to put us to work*.
* please note, sometimes we are busy so we cannot provide the service. Security and recovery of hacked WordPress websites is our priority.

I want to learn how to write CSS

You can do that at w3schools.com
Currently there are free classes to learn CSS. (In english)
Click here to learn how to write CSS.

Saving changes in the CSS Customizer

Only when you click “Publish” – is the CSS saved in your website and displayed for new visitors! So don’t forget to press that button after writing CSS.