Advanced Targeting

Click here to download the transcript as a PDF

Click here to download this transcript as a VTT

THIS TRANSCRIPT WAS AUTOMATICALLY GENERATED BY VIMEO

Welcome to Beyond the Basics Advanced Targeting.

Here's what you're going to learn in this lesson:

You'll learn how to find and use unique IDs in your custom codes. We'll discuss why selectors are important and how to create combination codes that use both unique IDs and selectors. I'll also share two of my favorite targeting tricks.

Targeting the right content is the first step in creating your custom code.

If you remember from the basic CSS class, there are three important things that you'll need to include in every code that you create.

The first part of that code is identifying what you want to change. Clearly identifying what part of your Squarespace website that you want to customize with CSS is literally the first step in creating your code.

Now, everything on a page in Squarespace has a unique ID including the page itself. You can see in this screenshot here, we have a collection ID at the very top left hand side of the screen. That's the ID for the entire page.

After that, you'll see a data section ID for each individual page, section,

and then a block ID for each individual block of content. A text block has a unique id, a button has a unique id.

Everything on a page in Squarespace has a unique id. Duplicating a page or a page section creates brand new IDs.

You can see in this screenshot here, I duplicated the homepage and now I have a brand new collection ID data section ID and a block id.

This happens every time you duplicate a page, a page section, a blog post, anything on your Squarespace website.

These unique IDs are used to create code for individual things on your website. You will need to use them for specific code changes. This example right here adds a border to that individual block id. It won’t be anywhere else on the website.

However, we can use a selector to identify a specific type of thing on a website.

Using that same code instead of a block id, I said, take any image you find and give it the same border. Now, you'll notice these three different images with three unique IDs had the exact same border.

All the content on your Squarespace website from content blocks to global website headers, everything has a selector. These selectors are the only way to adjust global elements that don't have unique IDs.

In these two screenshots here, you'll see I have a portfolio as well as a list section.

Notice that the items inside the list section as well as the image in that portfolio; they don't have block IDs. We can only identify those with the selectors and the actual section ID itself.

To change the image inside a list section, I'll need to first identify the list section ID and then use the selector for the image.

There's no unique ID for each individual image. Now, if you're wondering, where the heck do I find all of these selectors, I already wrote them down for you.

Selectors are usually unique to every individual program. There's some exceptions like an H1 will always represent a heading one, but Squarespace is full of unique selectors for its individual items.

Inside the Squarespace CSS cheat sheet, which is linked beneath this video, you'll find a collection of selectors for everything on Squarespace.

This cheat sheet is specific for Squarespace.

Now, let's talk about the difference here. Selectors everything on that CSS cheat sheet that identifies a type of thing.

On the right hand side of the screen here, you'll see an example that says .ses-block-button-element--medium

That identifies that primary button right there. Now, we also have a unique id.

The unique ID is for a specific thing. The unique ID for this button could be #block-12345

Both of those identify the button, but you'll need to use both in your custom codes and I'll show you why.

Let's say I want to customize all of the H4 text on my site.

I could use the selector in the top example here, H4 {color:red} and you'll notice my heading four on both example pages is bright red, but if I wanna customize the H4 on one individual block of content, I can say #block-123 H4 {color:Red}

Now only the existence of the H4 inside that block will be changed. The other heading four text anywhere else on my website is exactly the same.

It's really important to understand the difference between the two because you'll be using both to create combination codes.

So when do you use an id, when do you use a selector, and when do you use both?

I've got examples for you of all of them, starting with this right here.

Two examples of when you'll use a unique id. Let's say I wanna add a border to a single page section. That's my first line of code right there.

After that, I wanted to add a shadow to a block of text using its unique id.

Here you'll see I have identified the data section ID and then the block ID on line two of my code.

Now here are two examples of when you'll only use a selector. A global element like the site title that doesn't have a unique id, so I needed to say .header-title-text {color: blue}

Now, changing the font family inside a gallery section. A gallery section is an auto layout. So if I wanted that caption to be a different font, family,

I needed to say .gallery-caption-content {font-family: Poppins}family,

That's on line four. So let's talk about combining the unique IDs with selectors.

When do you use both? This is my favorite example.

If I add a border to this block id, we're going to get a border on the content block, but if I place a border on the selector inside that block, we'll get a border on the button.

This is the border on the entire content block. This is the border on the selector inside that content block.

Do you see how combining these unique IDs with selectors are going to be essential for advanced targeting in your code?

It's a great technique to know.

Again, the unique ideas for the specific thing, the selector is the type of thing, and combining them can help you target part of a specific thing.

Now, the order of your code matters. Start with the unique ID for the page, page, section, or the content block.

Then use the selector for the type of thing that you're changing.

Now, your guide contains other examples and practice codes for you to work with, and if you're wondering, how the heck do I figure out this unique id?

There's a free chrome extension that I use to grab that information and I've linked to it.

Inside your guide, you can click on that extension and you'll see all of the unique IDs on any Squarespace website.

Now, before we call this lesson a wrap, I wanna share two time-saving targeting tricks for your code.

An asterisk will change every instance of a property inside a selector and or a unique id. In this example here, I said #footer-sections * {text-align: center}

That's on lines one, two, and three in my code example. And if you look at the yellow footer of this website, you'll see that sentences and links are all centered.

Now A is shorthand for an active link on lines four, five, and six.

I said, in this unique block of content, if there's an active link, I want you to make that underline bright red, and now we can see that red underline automatically apply to any active link inside that block of content.

Two, time saving targeting tricks for your code.

You've got some homework, my friend. Before you move on to any other lessons here inside beyond the basics, I want you to download the guide for this lesson.

Inside that guide, you'll find additional information as well as some practice codes and your first custom code challenge.

I want you to use the Chrome extension to find a unique id.

I want you to explore selectors in the Squarespace CSS cheat sheet.

I want you to create a unique ID code, a selector based code

and a combination code, and I want you to use the asterisk code trick as well as the A code trick.

I've outlined all of these inside the guide for this lesson in your practice codes and custom code challenge section, so be sure to download that guide and start your homework before you move on to the next lesson.