Finding CSS ID and Class Selectors

If you've read my quick guide to CSS you'll know that IDs and Classes can be used to target style changes on our Squarespace site. This guide explains how to find them.

Getting Started

To make this guide easy to follow, I explain how to do this using the Google Chrome browser. If you don't already use it, I thoroughly recommend it, both for Windows and Mac. It's free and can be downloaded from Google's Chrome website.

Once you've installed Chrome, use it to log into your Squarespace website. Everything should work as expected. 

DevTools

Many users don't know this, but Chrome DevTools is a set of authoring, debugging, and profiling tools built into every desktop copy of Google Chrome. To find them, go to More Tools > Developer Tools from Chrome's Main Menu.

When you do this, you'll see a scary window open that looks something like this:

devtools-brine.png

This is what the page https://brine-demo.squarespace.com looked like when I viewed it. It shows the code 'behind' the page of the website.

Changing One Page using Page IDs

The first thing you can see is the page's unique ID. This is shown near the top of the window; it looks like this:

<body id="collection-56099b55e4b0ec7b8a89d273" class="tweak-social-

The ID is #collection-56099b55e4b0ec7b8a89d273, prefixed with a hash character when used in CSS. Here's a quick example that shows how to use the page ID. If we add this to Custom CSS:

p {color:red;}

it will change the paragraph text to red. However, if you use your page ID, you can limit this change to just this page. For example:

#collection-56099b55e4b0ec7b8a89d273 p {color:red;}

Note that you'll need to change the page ID to match the one on your page! You can find it using the DevTools!

Finding a Specific Selector 

What if you want to change something specific? Well, you can find it using the Object Inspector. To follow along, open the Brine template demo in Chrome by visiting https://brine-demo.squarespace.com/blog-brine.

Let's say we wanted to change the size of the font used in these Blog post titles in the Brine template.

brine-changetitle.jpg

Whilst you are viewing the Brine template demo in Chrome, right-click the title 'Beet Season' and then select Inspect from the pop-up menu. You'll see the DevTools window again, but this time the 'Beet Season' element will be highlighted like this:

inspectorbeet.png

Here you can see the text Beet Season and it is wrapped in a class called BlogList-item-title. You can use this class to change the font size, colour or style. Remember that classes need a '.' prefix so to change the font size to 30-pixels, the CSS will be:

.BlogList-item-title {
  font-size: 30px;
}

If you add this to the Design > Custom CSS area of a Brine website, it will change the blog post titles to this size. 

This is a simple example to get you started. To experiment, start a free trial using the Brine template. Then use the inspector to look for classes of elements on the page. Experiment with these classes in the Custom CSS area of the trial site, knowing that if anything goes wrong, you can simply delete the CSS and start again.

For further information, take a look at the other guides on our website. If you'd like help editing your site in a live whiteboard session, these can be booked by the hour. See the contact us page for more information.