How to apply CSS to one Squarespace page

As one of the top worldwide experts on Squarespace, I answer hundreds of users' questions on "Squarespace Answers", the official Question and Answer site for the Squarespace platform.

Many users find answers on the forum but they want to know how to apply a style to a single page, or to just one page within an index. This is simple enough to do, but if you're new to Squarespace, new to CSS, or new to both, it's certainly not obvious. Here's my guide to styling one page of your site.

Getting Started with CSS

If you haven't added CSS to your Squarespace site before, check out my guide on Adding CSS to Squarespace. This explains the differences between the Custom CSS editor and Code Injection. If these terms don't mean anything to you, it's definitely the place to start. Even if they do, take a quick look before reading on.

Collection IDs

In Squarespace, every page has something called a Collection ID. It's a unique reference for every page in Squarespace. No two pages have the same ID, regardless of the site they are part of.

Because they are unique, Collection IDs can be used to target a specific page on your Squarespace site. But first, you must know how to find your page's Collection ID. There are a number of ways to do this. I'm going to show you two - you can decide which works best for you.

In both examples, I recommend that you use the Google Chrome browser. You can find the Collection ID in other browsers but the instructions below have been customised for Chrome. If you don't have Chrome, you can download it here for free.

Chrome Extension

Let's start with the easiest way to find Collection IDs. There's a free extension for the Chrome browser called the Squarespace Collection/Block Identifier. This is a really handy tool for discovering Collection IDs.

When you've downloaded it, you'll see a 'B' icon on your browser's toolbar.

Navigate to the page you want to identify on your Squarespace site. Click the 'B' and you'll see a number of overlays.

The Chrome extension in use showing the overlays

The Chrome extension in use showing the overlays

Click on the first overlay - the Collection ID - to copy the reference to the clipboard. 

That's it! It's really that simple. You now have the Collection ID on your clipboard, ready to paste into your Custom CSS editor.

Browser Developer Tools

The Chrome browser has a set of web authoring and debugging tools built in. Other browsers have similar tools.

To open the developer tools, go to Chrome's main menu (on the toolbar) and select More Tools > Developer Tools. Alternatively, press Command+Option+I (on Mac) or Ctrl +Shift+I (on Windows or Linux). You can also right-click a page element and select Inspect.  

The Chrome Inspector showing the Collection ID (in blue)

The Chrome Inspector showing the Collection ID (in blue)

When the tools are open, you'll see the Inspector. It shows the page's source code. Close to the top of the code, you'll see the body tag (highlighted above in blue). The Collection ID is the ID within the double quotes.

Adding the CSS

Now you've identified your Collection ID, let's test it with some simple CSS.

Head over to the Custom CSS editor within your Squarespace site by navigating to Design > Custom CSS.

Add the following example CSS to make the body font blue. This should work on the majority of sites.

p {
  color:blue;
}

Here's what it should look like in the CSS editor:

The font on the page should go blue, just like in the example above.

Now, add your Collection ID and some curly braces around the CSS. It should look something like this:

Collection ID and braces added around the original CSS

Collection ID and braces added around the original CSS

Note that the Collection ID was pasted in first, followed by an opening curly brace. Then, after the CSS that you want to apply to this page, a closing curly brace has been added. All the styles within the curly braces will affect just this page. 

Save the changes and try viewing other pages. The blue font colour should only appear on one page. 

The CSS for the blue font is just an example. You can replace this with any CSS styles that you want to apply to the page.

More than one page?

If you want your style to apply to more than one page, you can add multiple Collection IDs, separated by commas like this:

#collection-5912daf886e6c038de5afe15, #collection-53da8bc6e4b0ea7cdef3ef4d {
  p {
    color:blue;
  }
}

Things to note

1. The technique above works on most page types, but it won't work on Index pages. These work differently, depending on the template being used (see below). 

2. You may not be able to identify Collection IDs for demo content as these pages don't exist on your site until you try to change them, and select "Create". Create a page of your own before trying to find Collection IDs.

Index Pages

Index pages work slightly differently but each "page" within the index can still be targeted separately.

Newer templates

The newer templates are much easier to work with. They add an ID to each section ("page"). The ID inherits the name of the page, but with spaces replaced with hyphens, a prefix of "#" (all IDs in CSS have a # prefix) and a suffix of "-section".

So for example, if the page in the index that you want to target is called "My Page" then the ID of that page will be #my-page-section

Let's use the example above again. To change the font colour on the page called "My Page" within an index, you'd add:

#my-page-section p {
  color:blue;
}

Older templates

Older templates require something a little more obscure. If the page within the index is called "My Page" then the page will have a data-url-id of "my-page".

You can use the following to achieve the same thing:

.parallax-item[data-url-id='my-page'] p {
  color: blue;
}

Want to learn more about CSS in general? Jon Duckett's book is the best book on the subject.