How to customize the style of a WordPress page

If you install a lot of different plugins on your WordPress site, you’ll find that your site looks inconsistent. You may also want to add your own styles or tweak certain elements a bit. In this guide, we’ll learn how to customize the style of a WordPress page. To do this, you’ll need to add custom CSS to your website. We’ll cover how to add custom CSS styles and the general rules to follow when doing so. However, we won’t cover what CSS is. If you’re not familiar with CSS, you can refer to this documentation.

1|Ouvrir le personnalisateur

First, you need to be able to add custom CSS to your pages. Go to any of your website pages and in the top bar you will see a Customize button.

This will open a new page with the same content as before but with new options on the left. Scroll down until you see the Additional CSS option. Click on it and an entry will appear where you can place your CSS.

2|Trouvez l’élément que vous souhaitez styliser

Now that you know where to add your CSS code, it’s time to find the element you want to style. On your page, scroll down until you see one of the elements you want to change. Once you find it, right-click on it and select “Inspect” (the wording may differ in some browsers). This will open a new pane in your browser. It may sound a little scary, but here’s what you should be looking at:

As you can see, there are many styles applied to a single element. You can also see that some lines are crossed out. To understand why this happens and how to make sure your styles will apply, we’ll talk a bit about CSS specificity.

3|Spécificité CSS

In CSS, you can have many rules that apply to a single element. You can even have the same rule apply multiple times. Therefore, only the rule with the highest specificity will apply. That’s why when you add custom styles to your WordPress pages, you need to set a higher specificity than the existing styles.

Let’s start by explaining what specificity is. Then we’ll look at some examples of how it works.

Specificity: Score/rank that determines which style declarations are ultimately applied to an element.

Here are the scores for different style statements:

Example

This may seem a bit confusing but it will become much clearer with some examples. Let's take the following HTML code:

<div class="first-class">
    <span class="second-class" id="my_super_span">Ceci est mon super span</span>
</div>

Now let's create 4 different style declarations and see which styles apply in the end.

span{
/** Spécificité : 1 → Un seul élément */
color: #666666;
}
.first-class span{
/** Spécificité : 11 → Une classe et un élément */
padding: 15px;
color: #333333;
}
.first-class .second-class{
/** Spécificité : 20 → Deux classes */
padding: 10px;
}
#my_super_span{
/** Spécificité : 100 → Un identifiant */
color: #66aacc;
}

In the code above, we have styles that change the color and padding of our span element. Let's look at each of them.

1|padding

There are 2 padding declarations, one with a specificity of 11 and one with a specificity of 20. The higher specificity will apply and the final padding will be:

padding: 10px;

2|color

There are 3 color declarations with specificities of 1, 11 and 100. As before, the highest specificity will apply and the final color will be:

color: #66aacc;

Now that we have seen how specificity works, you should be able, for each element you inspect, to find what is the highest specificity applied to it and what specificity you need to reach to override the existing values.

4|Quelques exemples

In this part, we will see some examples on how to customize the style of a WordPress page. These are the most common changes you may want to make to the elements of your WordPress pages.

1|Cacher un élément

To hide an element, you need to use the CSS rule display:none. Here’s how you can apply it:

.my_high_specificity_declaration {
    display: none;
}

It's quite simple. This statement will hide the element from the page.

2|Ajoutez une couleur d’arrière-plan et un peu d’espacement

.my_high_specificity_declaration {
    background-color: #666666; // Dark Grey
    color: #ffffff; // White
    padding: 20px; // Spacing
    border-radius: 4px; // Small rounding on the edges
}

With this example, you will wrap your element's content in a box with 20px spacing, a gray background, and white text.

Don’t hesitate to experiment on test pages before you start modifying an existing page. You don’t need to know all the possibilities offered by CSS to achieve a satisfactory result.