All Categories › Carrot Editor: Adding Custom CSS

Carrot Editor: Adding Custom CSS

Taylor London   Written by Taylor London    Last updated on

The Carrot Editor includes built-in style controls for most common design changes — things like colors, fonts, spacing, and button styles can all be adjusted without touching any code.

Custom CSS is available for situations where you need to go beyond what those built-in controls offer. In this tutorial, we’ll walk through the two ways to add it — both use the same Advanced → Additional CSS field on a block, but where you access that field determines how broadly the styles apply.

We’ll cover:

🚨 Note: Custom CSS is considered a modification and is added at your own discretion. We’re unable to write custom CSS for you or provide extensive troubleshooting support for CSS issues.

Option 1: Style One Specific Block

What it does: Applies CSS to a single block on a single page — nothing else is affected.

Good for: One-off tweaks, like rounding the corners on one particular image or adjusting the spacing around a specific section.

💡 Before reaching for CSS: Many blocks have built-in color, spacing, and typography controls in the right-hand panel. Check those first — they’re easier to manage and don’t require any code.

How to Access It

  1. Open a page in the Carrot Editor.
  2. Click on the block you want to style.
  3. In the right-hand panel, scroll down and expand the Advanced section.
  4. Enter your styles in the Additional CSS field.

💡 Tip: If you don’t see the right-hand panel, make sure you have a block selected. Clicking on empty space deselects it.

Option 2: Style All Instances of a Block Type Site-Wide

What it does: Applies CSS to every instance of a block type across your entire site — every page, every matching block.

Good for: Consistent styling you want applied everywhere, like making all images on your site have rounded corners, or giving all headings a consistent color.

How to Access It

  1. From your site dashboard, click Site Editor in the top admin bar.
  2. In the left-hand navigation, go to Styles and then click Blocks.
  3. Select the block type you want to style (e.g., Image, Heading, Button).
  4. Scroll down and expand the Advanced section.
  5. Enter your styles in the Additional CSS field.

💡 Tip: Changes preview live in the Site Editor canvas. You’ll still need to save for visitors to see them.

What to Type

Both entry points use the same syntax: just the CSS property and value. No selector, no curly braces needed — the Carrot Editor already knows which block you’re targeting. See an example below of syntax for an Image Block:

✅ Correct:

color: #1a6b3c;
font-size: 28px;

❌ Incorrect (don’t include a selector or curly braces):

.wp-block-image { border-radius: 8px; }

If you see a “There is an error with your CSS structure” message, remove the selector and curly braces and type the property and value only.

Worked Examples

Option 1 — Single Block

Round the corners on a single image

Select the image block on your page, open Advanced, and enter:

border-radius: 12px;

Only that image will be affected.

Adjust the color and size of one heading

Select a heading block, open Advanced, and enter:

color: #1a6b3c;
font-size: 28px;

Option 2 — Site-Wide

Round the corners on all images across your site

In the Site Editor, go to Styles → Blocks → Image → Advanced, and enter:

border-radius: 12px;

Every image block on your site will pick up this style.

Add consistent spacing below all images

In the Site Editor, go to Styles → Blocks → Image → Advanced, and enter:

margin-bottom: 24px;

Make all headings a consistent color:

Navigate to Styles → Blocks → Heading → Advanced, then enter:

  color: #2d3748;

Learn More