Targeting Squarespace Elements with CSS

Learning Objectives

• Identify and use CSS classes and IDs in Squarespace
• Apply custom CSS to specific elements within Squarespace sites
• Understand how to revert or modify CSS changes

Introduction

When you need to customise specific parts of your Squarespace site, CSS classes and IDs are your best friends. They act like address labels for different elements on your webpage, allowing you to style exactly what you want without affecting everything else.

This chapter shows you how to find these address labels and use them to make precise changes to your site's design. You'll learn to target specific blocks, pages, or navigation items with surgical precision.

Lessons

Lesson 1: Understanding CSS Classes and IDs

CSS classes and IDs work like labels stuck onto webpage elements. Classes can be used on multiple elements (like a group label), while IDs are unique to just one element (like a house number).

Step 1: Open your Squarespace site in a web browser
Step 2: Right-click on the element you want to style
Step 3: Select "Inspect" or "Inspect Element" from the menu
Step 4: Look for class="" or id="" in the highlighted HTML code

The developer tools will open showing you the behind-the-scenes HTML. When you click on an element, the corresponding code highlights automatically.

Step 5: Note down the class or ID name – you'll need this for your CSS

Lesson 2: Applying Custom CSS to Specific Elements

Now you can target your chosen element with custom CSS code.

Step 1: In your Squarespace dashboard, go to Design > Custom CSS
Step 2: Write your CSS rule using the class or ID you found:

• For classes: .class-name { your-styling-here }
• For IDs: #id-name { your-styling-here }

Step 3: Add your styling property. For example:

.header-nav-item {
  color: blue;
}

Step 4: Click Save to apply your changes
Step 5: Check your site to see the results

Keep your site preview open alongside the Custom CSS panel so you can see changes happen in real time.

Lesson 3: Testing and Adjusting Your Changes

After applying CSS, you need to check it works properly across different devices.

Step 1: View your site on desktop and mobile to ensure your changes look good on both
Step 2: If something looks wrong, return to Design > Custom CSS
Step 3: Adjust your code or remove it completely if needed
Step 4: Save and test again

Before making major changes, copy your existing CSS code to a text file as backup. This makes it easy to restore your original styling if needed.

Practice

Find the CSS class for your site's main navigation menu. Write CSS code to change the text colour to red. Apply this in the Custom CSS section and check how it looks on both desktop and mobile views.

Once you've tested it, change the colour to something that better suits your site's design.

FAQs

How do I find the CSS classes and IDs of Squarespace elements?
Right-click on any element on your live site and select "Inspect". This opens your browser's developer tools where you can see the HTML structure and identify the classes and IDs.

Can I undo changes made with custom CSS on Squarespace?
Yes, simply delete the CSS code from the Custom CSS section, or use Squarespace's version history to revert to an earlier version of your site.

Is it possible to target specific pages with custom CSS on Squarespace?
Absolutely. Each page has its own unique ID that you can use to apply CSS only to that specific page.

Jargon Buster

Custom Code: HTML, CSS, or JavaScript code added to enhance or modify your website's default appearance and functionality

CSS Basics: The fundamental principles of CSS, the language used to control how web pages look and are laid out

Classes and IDs: HTML attributes used to identify specific elements so they can be styled with CSS

Wrap-up

You now know how to find and target specific elements on your Squarespace site using CSS classes and IDs. This skill gives you precise control over your site's design without affecting elements you want to leave unchanged.

Next, you'll learn more advanced CSS techniques for creating sophisticated customisations. Keep practising with different elements on your site to build your confidence.

Ready to take your Squarespace skills further? Join Pixelhaze Academy for access to our complete course library and expert support.