How to add additional CSS classes to blocks in WordPress

Adding additional CSS classes to WordPress blocks is the simplest and cleanest way to customize the design of your website without touching complicated code. All you need is one click in the editor and you’re done: total control over colors, spacing, animations, and more.

Have you ever wanted a button to be bigger, a column to have a rounded background, or text to stand out only on mobile? The solution lies in the additional CSS classes in the block editor (Gutenberg). I’ll explain it step by step.

Why do you need to add additional CSS classes?

WordPress themes already come with basic styles, but often they are not enough. With extra classes, you decide exactly how each block looks without creating new files or installing heavy plugins.

It’s fast, doesn’t break anything when you update the theme, and works perfectly with any block theme.

Step by step: how to add a CSS class to any block

1. Open the page or post in the WordPress editor.
2. Click on the block you want to modify (a paragraph, image, button, column, etc.).
3. In the right sidebar, look for the Advanced section (if you don’t see it, click on the three dots in the upper right corner and activate “Settings Panel”).
4. In the Additional CSS Classes field, enter the name of your class (without the period). Example: my-red-button
5. Update or publish the page.

That’s it! Now you just need to create the style in your theme.

Where to put the CSS code once you have the class

You have three easy and safe options:

• Appearance → Customize → Additional CSS → (most recommended for beginners)
• In your child theme (if you use one) in the style.css file
• With a lightweight plugin such as “Simple CSS” or “Custom CSS Pro”

Real example of code that you can copy and paste:

.my-red-button {
    background-color: #e74c3c !important;
    padding: 20px 40px !important;
    border-radius: 50px !important;
    font-size: 18px !important;
    transition: all 0.3s;
}

.my-red-button:hover {
    background-color: #c0392b !important;
    transform: scale(1.05);
}

Tip 1: Use multiple classes in the same block

You can put several separated by spaces: large-button soft-shadow slow-animation This way you can reuse styles throughout the site.

Tip 2: Classes according to screen size

Create classes for mobile or desktop only:

/* Only applies on screens smaller than 768px */
@media (max-width: 767px) {
    .hide-on-mobile { display: none !important; }
    .big-text-mobile { font-size: 32px !important; }
}

And add the hide-on-mobile class to the block you want to hide on mobile devices.

Tip 3: Automatic classes with “block styles”

Some themes and plugins already come with predefined styles. For example, the button block has styles such as “Padding,” “Outline,” etc., but you can create your own by registering “block styles” in functions.php (advanced level).

Real examples you can use today

• Gradient background in only one section: class blue-gradient
• Card with shadow and rounded border: class raised-card
• Text with fade-in animation: class animate-fade-in
• Extra spacing between columns on mobile: class gap-mobile-40

Conclusion

Adding additional CSS classes to blocks is the most powerful and simple tool you have in WordPress to make your site look exactly how you imagine it. You don’t need to be a programmer: one click + a few lines of CSS and you’re done.

Start today with a single block and see how easy it is. In less than 5 minutes you’ll have a 100% customized design.

FAQs about CSS in WordPress

Will the classes be lost if I change themes?

No, the classes you add to the block are stored in the database. You only lose the style if the new theme doesn’t have that CSS.

Can I use them with Elementor or Divi?

In most cases, yes, because native WordPress blocks still work within those builders.

What if I use Full Site Editing (FSE)?

It works exactly the same, even better, because you can create your own block templates with reusable classes.