How To Make CSS Code Work For One Page on SquareSpace

You've finally found the CSS code you want to style a page but it is applying to the whole site. Frustrated? Here is how to fix it. 

When you apply a custom CSS code to SquareSpace it automatically does this for the whole site. At times this can present a pickle of a situation. First thing is first, go to your 'Custom CSS' section under 'Design'. 

 

 

Step 1: Find the page ID

SquareSpace gives each page a unique ID known as a collection ID and this is what you need to inject into this section above the CSS code. To get this, right click on the page you want to make the code only apply to and click 'Inspect' or 'Inspect Element' depending on your browser. 

 Inspect screenshot

Inspect screenshot

Here you are looking for a bit of code that says '<body id='collection' etc. Double click on this to get a box like below, and copy the code. 

Step 2: Put collection ID into 'Custom CSS'

Now, you want to go back to the 'Custom CSS' tool and above the custom CSS code you have injected, type a # followed by the collection ID number, then a open bracket. After you custom CSS code you inputted earlier, but a closed bracket. 

 

And that is it! Get in touch if you have any questions. 

 

Hello there!

I am website designer that specialises in Squarespace. I help businesses and startups have a professional website and empower them through training on their new Squarespace site. To boot, I am the only Squarespace Authorised Trainer in Scotland.


Looking to be set up with a site but on a tight budget?