Adding Custom CSS in Squarespace

Learning Objectives

By the end of this chapter, you'll be able to:

• Access and use the Custom CSS panel in Squarespace 7.1
• Write and apply basic CSS rules safely to your site
• Test your changes across different devices and browsers
• Troubleshoot common CSS issues

Introduction

Custom CSS gives you control over your Squarespace site's appearance beyond what the built-in design settings offer. While Squarespace templates look great out of the box, sometimes you need that extra touch to make your site truly yours.

This chapter shows you how to add custom CSS to your Squarespace site through the Custom CSS panel. You'll learn the basics of writing CSS and how to apply it safely without breaking your site's design.

Lessons

Finding the Custom CSS Panel

The Custom CSS panel is built into Squarespace's design tools. Here's how to find it:

Step 1: Log into your Squarespace account and open your site editor.

Step 2: Click Design in the main navigation menu.

Step 3: Look for Custom CSS in the design panel options.

Step 4: Click on Custom CSS to open the code editor.

You'll see a text box where you can add your CSS code. This is where all your custom styling will go.

Writing Your First CSS Rule

Before you start writing CSS, you need to know what element you want to change. Most browsers have developer tools that help you identify page elements.

Step 1: Right-click on the element you want to style and select Inspect or Inspect Element.

Step 2: Look at the HTML structure to find the element's class or ID.

Step 3: In the Custom CSS panel, write your CSS rule using this format:

.class-name {
  property: value;
}

Step 4: Click Save to apply your changes.

For example, to change your site's background colour to light grey, you'd write:

body {
  background-color: #f5f5f5;
}

Your custom CSS will override Squarespace's default styling for any elements you target.

Testing Your Changes

Always test your CSS changes to make sure they work properly across different devices and browsers.

Step 1: After saving your CSS, preview your site in a new browser tab.

Step 2: Check how your changes look on desktop, tablet, and mobile views.

Step 3: Test in different browsers (Chrome, Firefox, Safari) to ensure consistency.

Step 4: Make adjustments as needed by editing your CSS code and saving again.

Use CSS media queries to control how your styles appear on different screen sizes:

@media screen and (max-width: 768px) {
  /* Styles for mobile devices */
}

Common CSS Properties

Here are some basic CSS properties you'll use frequently:

Text styling:

• color – changes text colour
• font-size – adjusts text size
• font-weight – makes text bold or normal
• text-align – aligns text left, center, or right

Layout and spacing:

• margin – adds space outside an element
• padding – adds space inside an element
• width and height – sets element dimensions

Background and borders:

• background-color – sets background colour
• border – adds borders around elements
• border-radius – creates rounded corners

Practice

Try this simple exercise to practice adding custom CSS:

1. Access your Custom CSS panel following the steps above
2. Add this code to change your site's main heading colour:

   h1 {
     color: #2c5aa0;
   }
   

3. Save your changes and preview your site
4. Notice how all your main headings now appear in blue

Once you're comfortable with this, try changing the font size or adding a different colour.

FAQs

Can I break my site with custom CSS?
CSS changes only affect appearance, not functionality. If something looks wrong, you can remove the problematic code from the Custom CSS panel.

What happens to my custom CSS when I change templates?
Your custom CSS stays in place when you switch templates, but it might not work as expected since different templates use different HTML structures.

How do I find the right CSS selectors for Squarespace elements?
Use your browser's developer tools to inspect elements and see their classes and IDs. Right-click on any element and select "Inspect" to view its code.

Will custom CSS slow down my site?
A reasonable amount of custom CSS won't noticeably affect your site's loading speed. Avoid overly complex or redundant code.

Can I use custom CSS on all Squarespace plans?
Custom CSS is available on Business plans and higher. Personal plans don't include this feature.

Jargon Buster

CSS (Cascading Style Sheets) – Code that controls how HTML elements appear on a webpage

CSS Selector – The part of a CSS rule that identifies which HTML elements to style

CSS Property – The specific aspect of an element you want to change (like colour or size)

CSS Value – The setting you want to apply to a property (like "red" for colour)

Media Query – CSS code that applies different styles based on screen size or device type

Developer Tools – Built-in browser features that let you inspect and test webpage code

Wrap-up

You now know how to add custom CSS to your Squarespace site safely and effectively. Start with small changes and build up your skills gradually. Remember to always test your changes across different devices and keep your CSS code organised.

The key to success with custom CSS is practice. Try different properties, experiment with colours and spacing, and don't be afraid to make mistakes – you can always remove code that doesn't work.

Ready to take your Squarespace customisation further? Check out our advanced CSS techniques in the next chapter.

Join Pixelhaze Academy to access more detailed tutorials and get support from our community.