Writing & Editing

Adding Additional CSS Classes to Blocks

This guide explains how to use the Additional CSS Classes feature of the WordPress editor.

Table of Contents

How it Works

It is recommended to have basic knowledge of CSS code to use this feature. Here’s how we can support you with CSS.

The Advanced block setting allows you to add a CSS class to your block, letting you write custom CSS to style the block as you wish.

Advanced block setting showing Additional CSS classes
Additional CSS Class(es) can be added under the Advanced section of the block settings

For example, if you wanted to justify the text for certain blocks only, you can add a class such as my-justify-class to the Additional CSS Class field in the paragraph block settings. Then, visit your CSS editor and write a style for the class like so:

p.my-justify-class {     
  text-align: justify; 
}

↑ Table of Contents ↑

Adding an Additional CSS Class

To add an additional CSS class to a block, click on the block you are editing. Then, check the block settings on the right for the Advanced setting.

If you don’t see the block settings on the right, click the gear (⚙️) icon in the top right corner to open the settings.

Each block has an Advanced setting where you can add additional CSS class(es)

You can define your class as:

  • A single word, such as special
  • A term made up of multiple words with each word separated by hyphens, such as special-class

You can also add multiple classes to the same block by separating each class by a space. For example: special-class-1 special-class-2

When defining your class, be careful not to use a class that may already have been defined in the website’s code. You’ll want to use unique terms not already in use within the site’s CSS.

You may know that when writing CSS code, we target a class by putting a period in front of the class, i.e. .page. However, do not place a period in front of the class when defining it in the block settings as an Additional CSS Class or it will not work.

↑ Table of Contents ↑

Tips for Using Additional CSS Classes

Target a specific block on a specific page

Say you want to change the appearance of one Media & Text block on your site, but leave all other Media & Text blocks on your site untouched. In this example, we define the special-media-text-block class in the Advanced block settings:

Then, we can add this CSS to our site under Customize → Additional CSS to give this block a cool gradient background color:

.special-media-text-block {
  background-image: linear-gradient(to bottom right, red, blue);
}

This is the result:

media text css example result
Change the Bullet Icon in a List

You can change the icon used in a list from a circular disc to a square, an empty circle, a roman numeral, and many more!

Define a class such as square-bullet-list-block like so:

Adding a custom class to the list block
Adding a custom class to the list block

Then, add this CSS to your CSS editor:

.square-bullet-list-block {
     list-style-type: square;
}

and the result wil be:

list block with square bullets
A list block with square bullets!

Take into account that depending on your theme’s design, you might need to add a class like <li> to the CSS above to target the correct class.

Make use of existing custom CSS classes

Some classes come pre-defined in WordPress, and you can add those to your blocks for cool effects.

For example, is-style-circle-mask will make the image in an image block appear as a circle:

The effect of the is-style-circle-mask class

Removing the class will also remove the circle effect.

Below is a list of some other existing CSS classes that some blocks will support, but keep in mind that themes styles may override these existing classes. For best results, use one of the Recommended themes.

  • aligncenter
  • alignright
  • alignleft
  • alignwide
  • alignfull
  • has-small-font-size
  • has-large-font-size
  • has-huge-font-size
  • has-drop-cap

Not quite what you're looking for?

Get Help