Using unique IDs in your custom codes

How Unique ID’s Work

Every element on your Squarespace website—pages, sections, and blocks—has a unique identifier called an ID. Think of it like a name tag that only belongs to that one piece of your site.

When you’re writing custom CSS, IDs are what let you target and style one specific thing without changing everything else. Want one page to have a different background? Or just one block to look totally different from the rest? That’s where IDs come in.

Types of IDs in Squarespace

1. Collection IDs for Pages

Every page in Squarespace has a uique in a collection ID. These often look like this: #collection-123abc.

If you want CSS to apply to just one page, like making the heading 1 text type larger but only on the about page, you can use it’s collection id like this:

#collection-123456 h1 {
font-size: 3rem;
}

Pro Tip: Collection ID’s are labels for the container that is the page itself, so they can’t be used to make unique changes to headers or footer content on that page.

2. Section IDs for Sections

Within each page, every section has its own data-section-id. These usually look like this: section[data-section-id=”9876543210”]

If you give a section an anchor link inside the design settings for that section, taht will replace the number in it’s unique id, and could look something like this: section[data-section-id=”anchor”]

Section IDs let you style one section differently than others so you can do creative things like make all of the buttons in one section a different color than the rest of your site, show in this example:

Example:

section[data-section-id=”9876543210”] .sqs-block-button-element {
background: blue!important
}

3. Block IDs for Content

Every content block (text, image, button, etc.) has its own block ID that looks like this #block-yui_3_17_2_1-789 or this #block-2_1-79878_13327

Using a block ID is the most specific way to target something. If you want just one button or one text block styled differently, block IDs are your best friend. This code example would change the active links inside a specific content block so they are bright red and uppercase:

#block-yui_3_17_2_1-789 a {
color: red;
text-transform: uppercase;
}

How to find unique ID nubmers for your site content

The easiest way to grab an ID is by using your browser’s built-in inspect tools. Just right-click on the part of your site you want to style, choose Inspect, and look for the collection-id, data-section-id, or block-id in the highlighted code.

If you’d rather not dig through HTML yourself, you can also use the free Squarespace ID Finder Chrome extension. It highlights IDs directly on your site so you can copy them in seconds—super handy when you’re working with multiple pages, sections, or blocks.

Pro Tips for Using IDs in Your Custom Codes

  • Start broad, then go specific → Use selectors for site wide changes, and pair those with collection IDs for unique page styles, section IDs for page section specific changes, and block IDs when you need block specific control over your design.

  • Pair IDs with selectors → IDs can work with element selectors like h1, p, or a to style just that content inside the ID.

  • Use your browser’s inspector → Right-click, inspect, and copy the ID directly out of the HTML. Make sure your id starts with collection, data-section, or block; any ID’s that start with yui will be regenerated every time the page is reloaded and wont work for code. Block ID’s might have the characters yui inside of them, but not at the beginning.

  • Keep it organized → Comment your CSS with notes so you remember which ID belongs to which part of your site.

  • Don’t overdo it → IDs are powerful, but too many can make your CSS messy. Use them when you want something truly unique.

Previous
Previous

Changing One Page with Code

Next
Next

Creating Gradients