New to squarespace? You can sign up for a free trial here and I also got ya a little off the price! Use code PAIGE10 for 10% off your first year. (Yes, that’s an affiliate link!)

If you read my post Squarespace CSS: what you need to know before you get started, you’ll remember that all CSS does is style the content that already lives on your site.

Here’s a refresher:

HTML = the language used to communicate what content should live on each page of your website (your images, text, buttons, etc)

CSS = the language that says how that content should appear based on the rules you or your Squarespace template apply.

And while there are a bajillion gorgeous, fun ways to use custom CSS to customize your Squarespace site…

Copying and pasting all those little code snippets really isn’t going to do you any good if you don’t know how to tell Squarespace which bits of content you want to style.

So it’s important to have a basic understanding of how CSS code snippets are created, to understand how to use them on your site!

Squarespace CSS 101: Understanding CSS basics

Not sure what CSS even looks like? Here’s an example of a superrrrr basic CSS rule:

h1 { color: black; }

Any guesses as to what it’s styling?

That’s right! My h1 (Heading 1) font color!

Let’s use this example to break it down the anatomy of a basic CSS rule.


  • Selector: The selector is what is borrowed from the HTML code of your site, to help identify which bit of content you are applying the customization to.

  • Property: The property tells you which aspect of your content you wish to change (so you can target things like color, font type, font size, spacing, position etc. separately)

  • Value: The value is the bit that you’d tweak to do the actual customizing (telling Squarespace how you want that aspect of your content to look to your site visitors).

Wondering why I’ve highlighted parts of it in blue? It’s really rather important, so read on to find out!

CSS Declarations

Your property and value will always be joined at the hip using a colon or ‘:’ like above!

Together, they make up what’s called a declaration (everything I’ve highlighted in blue in the above example).

You can have multiple declarations in one bit of CSS to help you style different aspects of that same selector (a.k.a the same bit of content), but in order for Squarespace to understand what the heck you’re rambling on about, you need to finish each declaration with a ‘;’ or semicolon.

Here’s an example of a CSS rule with multiple declarations:

h1 { color: black;
font-size: 30px;
font-family: Montserrat; }


Wondering where to find the correct names for your CSS properties when trying to customize text, images, buttons, etc?

W3schools.com has a huge library of property names to help you! Here’s their list of properties to use specifically when formatting your font/text.

Squiggly brackets/curly braces

If we look at our example again:

h1 { color: black;
font-size: 30px;
font-family: Montserrat; }

Notice that the squiggly brackets or ‘{‘ and ‘}‘ are what open and close the list of declarations!

This lets Squarespace know that this list of declarations only apply to the selector (ie. h1) you’ve indicated, and any bit of CSS that comes before or after that is going to apply to a different piece of content altogether.

Think of these squiggly brackets/braces like a soap box…

You have your topic (h1), you put down your soapbox (your squiggly bracket), you stand on that soap box and shout (your declarations) about all the change you want to see in the world (ahem…your site), and then when you are done, you pick up your soap box and leave.

Boom. CSS explained.

(Kidding…there’s a little more to it than that.)

Where to inject CSS in Squarespace to start customizing your site

Okie dokes, so if you remember from Squarespace CSS: what you need to know before you get started there are 3 places to be injecting CSS on your Squarespace website. Let’s recap using the CSS example from above! (You’ll see why this matters in a minute!)

In both Squarespace 7.0 & 7.1, you can inject CSS:

  1. Universally/globally on your site, using the custom CSS injector

  2. On a specific page, using the page’s advanced code injection settings.

  3. Inline on a page, using a code block.

If I use method #1 to pop my basic h1 font CSS into my sitewide custom CSS injector, it’s essentially going to affect any text on my site where h1 is used.

If I use method #2, only the text formatted with h1 on that specific page will be changed.

And what would happen if I used method #3? Well, nothing.

Because to use method #3, you need to be able to code in both the content (HTML) and the styling (CSS) in order for it to have something to style!

For the step-by-step tutorial and explainer for the how and why of each method, check out Squarespace CSS: what you need to know before you get started.


New to squarespace? You can sign up for a free trial here and I also got ya a little off the price! Use code PAIGE10 for 10% off your first year. (Yes, that’s an affiliate link!)

How to target specific pages, sections & blocks

So you know how to inject CSS site-wide and page wide, but how do you style just one element that lives inline on your page (without having to first code that thing into existence using a code block)?

Or say you have multiple pages or blocks of pre-existing content (ie. text blocks, image blocks) you want to customize, without having to repeatedly enter in CSS for each one?

This is where targeting comes in!

Oh, and P.S. even though we will be targeting specific areas, each of these examples are actually injected using method 1 from above: Universal injection using your site’s custom CSS injector window!

This keeps all the custom CSS from your entire site design in one, easy to monitor/tweak place!

To keep it simple, I’ll be using the same CSS code snippet for each example, but just know that the same steps and tips apply when using CSS to style other types of content such as your images, buttons, etc. too (not just your font!)

How to target specific pages with CSS in Squarespace

Say I want the h1 of my home page and about page to be blue, so I’ve gone ahead and used Squarespace’s site styles editor to make it so!

But I really want the h1 on my contact page to be black.

To target only my contact page using my bit of CSS, I need to locate my page’s id.

  • use a Google Chrome browser to view your site live and visit the page you wish to target.

  • right click and go ‘view page source.’

  • use Command + F to search for the exact phrase (with quotation marks): “title”

  • beside “title” will be the name of your page followed by “id”: and a long string of numbers. Copy those numbers.


Pages are considered a “collection” item in Squarespace, so to get our bit of CSS to apply to only that one page, we’d need to use that page’s collection id (and a hashtag!) to help Squarespace narrow down our request.

#collection-numbergoeshere {

h1 {color: black;}

}

Notice I had to use a second set of squiggly brackets to open and close my CSS for my page id selector, in addition to the ones used to open and close my CSS for my h1 selector.

Targeting multiple pages using CSS

Now, if I wanted to target the h1 of multiple pages at the same time, I just separate the collection id’s using a comma. Like this…

#collection-numbergoeshere, #collection-numbergoeshere {

h1 {color: black;}

}

Applying them in batches, rather than adding in new CSS for each page you want to customize cuts down on the amount of CSS you’ll have living in your site’s code injection panel/window, making it easier to locate and tweak in the future.

Want to test it out? Try hiding the header and footer on one or multiple pages using the CSS in this post: My 4 favorite CSS tweaks I use on my Squarespace sites.

How to target specific sections with CSS in Squarespace

Want to apply that same bit of CSS to just one section of your page(s)?

Let’s locate the section name!

Targeting a single section in Squarespace 7.0

Thanks to index pages, it’s super simple to find your section id in Squarespace 7.0. You literally just click on the settings for that section and grab its unique URL slug. Presto!



Then, just throw that URL slug in front of your bit CSS (along with your hashtag to let Squarespace know it’s an id) and you’re off to the races!

Here’s what that looks like using our example CSS:

#meet-the-bundle-1 {

h1 { color: black; }

}

Targeting a single section in Squarespace 7.1

When Squarespace did away with index pages (meaning all sections of the page could be more easily, added, edited and rearranged in one place), it made it just a tad trickier to target just one section.

Not to worry! There’s a few ways to spot your section’s id!

The first method requires a bit of a trained eye, as it uses your Chrome Browser’s “Inspect” feature (right click on the section > “Inspect”) to peep your site’s HTML code.

But since I’m all for keeping things stupid simple, and not doing more work than you have to, let’s skip straight over to totally non-techy-friendly method! Method number 2!

All it requires is a visit to the Chrome Extension store here to grab the Squarespace ID finder extension.

Install that extension on your browser, and then try not to let your jaw hit the floor when it identifies every last block and section on your page for you with just one click.


Disclaimer: ICY didn’t know, by adding an extension to your browser, you are essentially giving that software access to any info transmitted through that browser. This is def a super handy tool, but like any software you use in your biz, use caution 🙂

Targeting multiple sections using CSS

Want to apply it to multiple sections, even if those sections all live on different pages on your site?

Grab the URL slug for each of those sections, and pop them in front of your CSS separated by commas, just like you did for pages!

#meet-the-bundle-1, #about-page-1, #faq-section-1, #contact-page-1 {

h1 { color: black; }

}

How to target specific blocks with CSS in Squarespace

Much like we did for sections and pages, all it takes is finding the unique block id you are hoping to style with CSS.

Say on my Square Secrets online course home page, I’m looking to apply my h1 font CSS to one specific block, without affecting the other blocks containing h1 text in that section of the page.


There are two super simple ways to find your block’s id!

The first one is to use that Chrome extension I mentioned above (this will work for Squarespace 7.0 or 7.1, btw!)

Just find the block you need, and click on it. The extension will automatically copy that block id to your clipboard so you can paste it into your CSS!


The second is a bit more old-school, but does the trick just fine!

Step 1: Visit the page live in a Chrome Browser.

Step 2: Highlight the content of the block you want to target using your cursor.

Step 3: Right click and go “Inspect.”


This will open up your HTML code for that page.

Scary…I know. But I promise you your block id will be easier to locate than you think!

The content you selected will already be highlighted in the HTML sheet, which means the name of the block your content lives in is not far away!

Hover over the lines right around what was already highlighted and you will see in the page preview it automatically highlights which element that line of code pertains to.

Keep hovering until your desired block is highlighted in the page preview on the left.

Once the block is highlighted on the left, copy and paste the block id straight from the HTML sheet on the right by double clicking on the block id!

Pro-tip: you might need to click the little drop down arrow to open the highlighted bit of code to reveal your block-id!

(The block id will always look something like: #block-yui_3_17_2_1_1552568133768_65388)


Now let’s apply our example CSS to that one block using the block id.

In the custom CSS injector, we’d paste in:

#block-yui_3_17_2_1_1552568133768_65388 {

h1 { color: black; }

}

And done! Successfully targeted!

Targeting multiple BLocks using CSS

Following in the footsteps of pages and sections, all that’s needed to style multiple blocks at once with only one bit of CSS is to separate the blocks by commas like so:

#block-yui_3_17_2_1_1552568133768_65388, #block-yui_3_17_2_1_1552568133768_59682, #block-yui_3_17_2_1_1594840070438_12534 {

h1 { color: black; }

}

So there you have it! The second piece of the puzzle when it comes to applying custom CSS to your Squarespace site!

If you missed the first piece of the puzzle, it’s worth taking a few minutes to get caught up now! (Here ya go! Squarespace CSS: what you need to know before you get started).

Looking for examples of custom CSS to use to customize your fonts, buttons, images, and other blocks on Squarespace?

You’ll prob find these posts pretty handy:

New to squarespace? You can sign up for a free trial here and I also got ya a little off the price! Use code PAIGE10 for 10% off your first year. (Yes, that’s an affiliate link!)


/

/

You’ll also love . . .

Squarespace CSS: how to target specific pages, sections, or blocks on your site