A new way to target the home page in CSS within Squarespace

A few years back, I did a video and a blog post about targeting the home page in CSS within Squarespace so that you can style it uniquely.

Fortunately, in 2025 it's so much easier.

Old way

The old way meant we grabbed the ID with a tool like Chrome ID selector.

Such as

body#collection-68076d88ec04204e3eca688f h1 { color:blue; }

The above would style every H1 on the page with a blue colour.

New way now possible with Squarespace recent update

Now there is a class on the body you can use:

body.homepage h1 { color:blue; }

Remember, in CSS, we have classes and IDs. You target HTML classes preceding the class name with a dot. We used this when building our Premium Cafe Squarespace template.

An ID is preceded with a hashtag - an #

Everything but the home page

If you wanted to target every page BUT the home page, you could do something like this

body:not(.homepage) h1 { color:blue; }

It's just a short blog post today, but useful, and it keeps your CSS much easier to maintain.