---
title: Create and Edit Block Styles
description: The Style Builder is part of the Block Styles feature. The Style Builder allows you to create custom styles for your WordPress blocks, without any coding knowledge. The settings are divided into the following tabs. Colors, Spacing, Typography, Layout, and…
url: "https://publishpress.com/knowledge-base/style-builder/"
updated: "2025-11-04"
category: PublishPress Blocks / Block Styles
---

# Create and Edit Block Styles

The Style Builder is part of the Block Styles feature. The Style Builder allows you to create custom styles for your WordPress blocks, without any coding knowledge.

The settings are divided into the following tabs. Colors, Spacing, Typography, Layout, and Border are available in the Free version of the [PublishPress Blocks](https://publishpress.com/links/blocks) plugin. Text, Headings, Links, Media, Containers, and Interactive are available in the Pro version of the plugin.

![Style Builder](https://publishpress.com/wp-content/uploads/2025/09/style-builder-2-1024x412.png)

Let's see an example of how this Style Builder works. Imagine that we're going to create a block style that uses [the PublishPress brand colors](https://publishpress.com/brand/#publishpress-colors).

- Click "Copy" next to the "Blue message" option.
- Enter a new "Style title" and "Class name".
- Choose an "Identification color".

![Copy a style in the Style Builder](https://publishpress.com/wp-content/uploads/2025/09/copy-style-builder-1024x552.png)

- Enter the background and text colors to use for the block, as in this next screenshot:

![Style Builder with custom colors](https://publishpress.com/wp-content/uploads/2025/09/custom-style-builder-1024x396.png)

You can click on the other tabs to add more customizations. In the screenshot below, I've opened the "Spacing" tab and entered a "Padding" option of 20px. This is now a block style that I can apply to any block on this WordPress site.

![Style Builder padding option](https://publishpress.com/wp-content/uploads/2025/09/new-block-style-1024x513.png)

If you want to avoid the Style Builder and write your own CSS, you can do that via the "Custom CSS" tab.

![Custom CSS tab in the Style Builder](https://publishpress.com/wp-content/uploads/2025/09/style-builder-custom-css-1024x449.png)

After saving your block style, go to edit a post and you can apply your new style to any block:

![Custom block styles](https://publishpress.com/wp-content/uploads/2025/09/publishpress-blocks-style-1024x322.png)