CSS Basics for Gutenberg and Atomic Blocks

Before you start this CSS basics for Gutenberg tutorial, visit my demo page that goes with this tutorial.

Gutenberg and Atomic Blocks are styled differently on different themes. I used the Revolution Pro theme by StudioPress in my demo. The blocks will probably look different in your theme, especially if you have an older theme that is not specifically built for WordPress 5.

CSS basics for Gutenberg and Atomic Blocks: A video tutorial

If you want to follow along with my CSS basics for Gutenberg tutorial, you can copy the code from the BOTTOM of the page on my Revolution Pro demo website.

The blocks I used in this CSS basics for Gutenberg tutorial

4 Accordion blocks (to make FAQs)
4 Testimonial blocks
1 Profile block
1 Call To Action block

You will need the free Atomic Blocks plugin if you want to follow along with this tutorial. Atomic Blocks is owned by WP Engine, the same people that own StudioPress and Genesis.

Lets get to the first question, where do I paste the code? (The code is at the bottom of this page.)

Using the code site wide

To use the code on all pages of your site go to: Dashboard > Appearance > Customise > Additional CSS. Paste your code into the small box.

The Additional CSS tab in the customiser

Using the code on a single page

To use the code on a single page of your site, install the Simple CSS plugin.

Then navigate to the page where you want to use the code.
Edit that page.
When in edit mode, scroll to the bottom of the WordPress post editor screen and look for a text entry box labelled Simple CSS.
Code pasted into this box will only affect that specific page.

When using the Simple CSS plugin, your code goes in this box.

Adding the background colours to your blocks

If you’re using the code I provided with this CSS basics for Gutenberg tutorial, you’ll discover that the background colour of most of the blocks didn’t change when you added the code to your site.

I did include a background colour for the Accordion, or FAQ block. Because the Accordion block does not have a point and click background colour setting.

To change the background colour of the testimonial, profile and call to action blocks, use the point and click settings that are built into WordPress. Just select the block and then look for the background tab in that block’s settings.

The block settings are in the post editor sidebar.

Finding selectors for other blocks

My tutorial only covers a few of the many blocks that are available. So how do you find the CSS class selectors you need to edit the other blocks?

The easiest way is to…

Select a block, click the button with three dots, and choose Edit As HTML.
Then search the code for class=

Edit the block's HTML. — Edit the block’s HTML.

Finding class selectors in the block HTML code.

If you think carefully about the different class selectors you find, you should be able to work out which selectors you need to style each part of the block. You will need some CSS experience to do this.

Block Advanced tab & Additional CSS Selectors

If you want to target one specific block, you can add an additional CSS selector in this box. Sometimes this is all you need to style a particular block.

The Additional CSS classes box. — The Additional CSS class box.

I often use this, for instance, to change the colour of a heading. Because the heading block does not have a point and click colour option.

You can also use the advanced CSS selectors to add specificity to your code if you’re finding it difficult to target a particular block.

As you can imagine, you will need some CSS experience to customise CSS code. You don’t need to be a genius, but you do need a basic understanding of HTML and CSS.

Changing the colours in the code I provided

The easiest way to do this is by using the find and replace option in your text editor.

Place the code in Notepad.
Then from the file menu select Edit > Replace.
You then have the options of “Find What” and “Replace With”.

The Edit Replace option in Windows Notepad.

Finding and replacing hexadecimal colour code in Windows Notepad.

You will need to know the hexadecimal code used for the background and border colours in the code. And you will need the hexadecimal code for the new colours you’ll use to replace them.

In my tutorial code I used…

Background colour: #E7F3FF
Border colour: #A7CFFA

Adobe’s online colour picker is a great way to find new colours.

This is the end of this tutorial. But I hope it makes you want to experiment with blocks and customising them in your own sites.

With a bit of practice you’ll soon be making unique looking Gutenberg layouts. Good luck 🙂

PS. The theme I used in the tutorial is Revolution Pro by StudioPress.