Be able to add a custom CSS class to a WordPress block gives a control over the styling of that specific block.
You can add a CSS class to a WordPress block in the editor, without a need of 3rd party plugins.
However, changing default styles of a specific block requires two steps:
In this article, you can learn both steps, so you can modify the styles of a block of your choice in WordPress.
Add custom CSS class
Although the editor provides some style options for blocks, there are cases when you want to go beyond available options.
Let’s say, you have the Heading block on your page which you want to highlight by using unique styles.
The first step will be to add a custom CSS class to your block:
- Open the page or post you want to customize.
- Select the block in the Editor that you would like to add your own CSS class to.
- In the right sidebar, under the Block tab, locate the Advanced section and click on it.
- In the section, find Additional CSS Class(es) field.
- Enter the name of your custom CSS class. In this example, I am using
special-title
as my custom CSS class. - Update your page or post when you are ready.

After adding this CSS class to a block, you will see no changes in your block when viewing your actual page.
The thing is that we need to let WordPress know what kind of style changes we want to apply to the selected block.
Apply CSS styles
Now, we are ready to style a recently added CSS class. Here is a custom CSS that I will use for my special-title
class:
.special-title {
background-color: #09c;
padding: 1em;
color: #ffffff;
text-shadow: 0 1px 10px #0a3d4e;
text-align: center;
border-radius: 80px 20px;
border: 2px solid #0a3d4e;
}
Important: Never add custom styles to style.css
in the parent theme. You risk to lose all custom changes once after theme update.
If you never used a custom CSS on your site before then check out a quick guide on how to add a custom CSS in WordPress.
Here is what I’ve got after adding a custom CSS to my WordPress site:

Custom CSS does not work
It is possible that some parts of your recently added custom CSS might not work. Depending on how your theme is designed, some parts of your custom CSS might be overwritten by the theme.
Please understand, we do not provide any help, with issues you might experience with your theme, in the comments below.
If you are using one of our professional WordPress themes, feel free to contact us and we will be happy to help you.
In other cases, please contact the author of your theme for a solution.
Custom styles are not shown in the editor
That is a downside of this approach. The thing is that the custom CSS, you have recently added, does not get loaded in the editor. It only applies to the actual page (front-end) of your site.
There is no advanced settings for the page title? How do I enable that?
Hello Sven,
If you are referring to the page title that appears at the top of the editor then unfortunately, you cannot enable advanced settings for it because it’s not a block. It’s just a regular option, used for setting the page title.
You can see the list of all added blocks to your page by using the List View option, in the top toolbar of the editor (three lines icon, next to the “i” icon ).
Kind regards,
Taras