To style a block, you first need a way to target it in CSS. When you inspect a block’s HTML, you will see that it has a block ID selector. You can use that to target the block in CSS. But this is not the best way to style blocks in CSS. It can very quickly become hard to maintain. There is a better way, but first, lets look at how to do with the block ID.

Here is an an example, my blog which contains a photo of me and a short message.

  <div id="block-block-1" class="block block-block">
      <p><img src="/files/bw_80.jpg" align="right"> I am Blair Wadman  and this where I share tutorials and trouble shooting guides.</p>
  </div>

In this case, the block ID is 1, so the block contains an ID of block-block-1. Where does 1 come from? Look in the block_custom table in the database and you will see that each block has a unique ID, called bid.

You can use block-block-1 as the selector in CSS.

    #block-block-1 {
        background-color: #557eb3;
        padding: 7px;
        width: auto;
        margin-bottom: 10px;
    }

All good. Every block has a unique ID, so targeting them in CSS shouldn’t be a problem.

But is this the best approach? Probably not. In fact, it is a bad idea for the following reasons:

You can’t always guarantee the block ID will be correct.

Let’s say you have a dev site and a live site (or a full dev -> qa -> staging -> live pipeline if you are really lucky). If a block already exists on live and you pull it down locally, you can style it using the ID. But what if blocks are added manually on different environments? You can’t guarantee that the ID will always be the same.

You can’t easily reuse the same block style.

You can group selectors with the block IDs, but it gets messy very quickly.

For example, let’s say you have 5 blocks that require the same style. You’d end up with something like this:

    #block-block-1,
    #block-block-3,
    #block-block-7,
    #block-block-15,
    #block-block-16 {
        background-color: #557eb3;
        padding: 7px;
        width: auto;
        margin-bottom: 10px;
    }

No doubt you will have many difficult styles grouped like this. Your CSS file is going to be unnecessarily huge and messy and hard to maintain.

Use a class name

The better approach is to add class names to the blocks.

A) You can guarantee the same selector on all environments B) You can use the same style on multiple blocks by using the same class.

But wait, you can’t add your own class to a block in Drupal! Well, thanks to the block class module, you can. So go ahead and install it  

You will get a nice field where you can add your CSS class.

I have called my class ‘blue-box’. The class ‘blue-box’ is then added to the block and you can style it.

The HTML:

  <div id="block-block-1" class="block block-block blue-box">
    <p><img src="/files/bw_80.jpg" align="right"> I am Blair Wadman  and this where I share tutorials and trouble shooting guides.</p>
  </div>

The CSS:

    .block.blue-box {
        background-color: #557eb3;
        padding: 7px;
        width: auto;
        margin-bottom: 10px;
    }

The downside to this approach is that if a non-developer adds a block to the site, they will have a hard time knowing which class to add. In fact, they will not know to add a class unless you tell them to! But read on, there is a solution for that too!

Styles for content editors

Luckily there is a very easy way for content editors to manage styles, so they don’t need to worry about CSS class names. You need another module called Block Class Styles for this.

Once installed and enabled, you can define styles and associate them with classes. So, let’s say you want a style called “blue box”. This makes it clear to editors that they are indeed going to get a blue box. In the module settings page, you’d define the CSS class and style name (for people to see in the blocks interface) with a pipe between them, like so:

blue-box

Blue box block

Once installed, you will find the above field in the admin form here: admin/structure/block/styles

Then add some styles to your CSS file with the blue-box class name:

    .blue-box {
        background-color: #557eb3;
        padding: 7px;
        width: auto;
        margin-bottom: 10px;
    }

And when a content editor adds or edits a block, they can select Blue box from the selection of predefined styles.

Wrapping up

Using the default block IDs is fine enough to get the job done, but as with most things in Drupal, there is a better way. Small changes like creating block styles go a long way to improving the experience of those using the Drupal site to manage their content and its styling.