How To Target, Edit and Apply CSS To A Specific Block On 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.
Step One: Get Your Tools Together
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 https://www.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’.
These two links should take you to the store as a whole and to the Squarespace Block Identifier page, but in case they don’t… simple type ‘Chrome Web Store’ into Google.com, then search the store for ‘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!
Check out the video below for a more thorough walkthrough, plus a few examples of changes you could make to text and forms.