How To Find A Block ID And Apply CSS To A Specific Block in Squarespace

One of the great things about working with CSS in Squarespace is the ability to apply edits to specific blocks. I am forever receiving questions asking how to make changes to ONE contact form but not the other, how to add a border to a few pictures but not others, how to make the H3 smaller in only a certain place… this, is how.

You could inspect the element and find a unique identifier, but if you’re not a designer or developer that’s pretty fiddly. This however, is super easy, super quick and free. In fact, it’s such a great tool that I use it every day instead of trawling through code when I don’t need to.

First up, you’ll need Google Chrome installed on your computer. Google Chrome is simply a web browser, just like Internet Explorer, Firefox, Safari, Opera, etc. Statistically, it’s likely that you’re reading this on Google Chrome anyway, or at least already have it downloaded. If you don’t, you can do so at google.com/chrome/.

Now, open up a new Google Chrome window and head to the Chrome Web Store. The store is made up of themes and extensions that you can download to work in conjunction with Google Chrome and enhance what your browser can do. Think of it a little like the App Store on your smart phone. In this case, we want to download and install ‘Squarespace Block Identifier’.

Now get that extension installed, refresh your browser, open a new window with your Squarespace website (you can be logged in or logged out of Squarespace – it still works) and meet me in Step Two.



STEP TWO: FIND THE SQUARESPACE BLOCK ID
This is the easy part, hit the little icon for extension. It’ll be near the top right corner of your browser window.

Labels should appear on every block on your page with the appropriate Block ID. Click on a label and the ID copies automatically! Hurray!


STEP THREE: APPLY CSS TO SPECIFIC BLOCK
Now, the final step is to paste that Block ID into your website’s CSS panel (DESIGN - CUSTOM CSS). Any CSS you put immediately after the Block ID will be applied only to that block. And that’s literally all there is to it!