CSS Basics for Squarespace Beginners

Learning Objectives

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

• Understand what CSS is and how it works
• Find and use Squarespace's Custom CSS editor
• Add simple CSS code to customise your site
• Troubleshoot common CSS issues

Introduction

CSS controls how your Squarespace site looks. While your template handles most of the design work, adding your own CSS lets you make specific changes that aren't possible through the standard design settings.

This chapter covers the basics of CSS in Squarespace. You'll learn what CSS does, where to add it, and how to make simple changes safely.

Lessons

What CSS Does

CSS stands for Cascading Style Sheets. It's the code that tells your browser how to display your website – things like colours, fonts, spacing, and layout.

Every Squarespace template uses CSS behind the scenes. When you change colours or fonts in the Style Editor, you're actually changing the CSS values.

Here's what CSS can control:

• Text colours and fonts
• Background colours and images
• Spacing between elements
• Size and position of content blocks
• Hover effects and animations

How Squarespace Uses CSS

Squarespace templates come with built-in CSS that creates the overall design. The Style Editor lets you change common settings like colours and fonts without writing code.

Custom CSS sits on top of the template's existing styles. When you add custom CSS, it overrides the default styling for specific elements.

This is why custom CSS is so powerful – you can change almost anything about how your site looks, even if the Style Editor doesn't have that option.

Finding the Custom CSS Editor

Adding custom CSS in Squarespace is straightforward:

1. Go to your site's admin area
2. Click Design in the main menu
3. Click Custom CSS
4. Enter your CSS code in the text box
5. Click Save to apply changes

The preview window shows your changes in real-time, so you can see what happens before saving.

Writing Your First CSS Rule

CSS works with rules. Each rule targets specific elements and tells them how to look.

Here's a simple example:

body {
  background-color: #f5f5f5;
}

This rule changes your site's background colour to light grey. Here's how it works:

• body targets the entire page
• background-color is the property you're changing
• #f5f5f5 is the colour value
• Curly braces {} contain the styling instructions

Common CSS Properties

These properties handle the most common styling changes:

Colours:

• color – text colour
• background-color – background colour
• border-color – border colour

Text:

• font-size – text size
• font-weight – text thickness (bold, normal)
• text-align – alignment (left, center, right)

Spacing:

• margin – space outside an element
• padding – space inside an element
• line-height – space between lines of text

Targeting Specific Elements

CSS uses selectors to target elements. Squarespace adds special class names to different parts of your site, making them easy to target.

Common Squarespace selectors:

• .sqs-block-button – button blocks
• .sqs-block-image – image blocks
• .Header – site header
• .Footer – site footer

You can find these class names using your browser's developer tools.

Practice

Try adding this CSS to change your button colours:

.sqs-block-button-element {
  background-color: #2c5aa0;
  color: white;
}

This targets all button elements and gives them a blue background with white text.

Save the code and check a page with buttons to see the change.

FAQs

Will custom CSS break my site?
CSS only affects styling, not functionality. The worst that can happen is elements looking wrong, which you can fix by removing the problem code.

Why isn't my CSS working?
Check for typos in your code first. Make sure you're using the right selector and that existing styles aren't overriding your changes. Sometimes you need to add !important to force your styles to apply.

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

Will my CSS work on mobile devices?
Yes, but mobile devices might display things differently. Always test your changes on different screen sizes.

How do I find the right selector for an element?
Right-click on the element and choose "Inspect" or "Inspect Element". This opens developer tools showing the HTML and CSS classes for that element.

Jargon Buster

CSS – Cascading Style Sheets. The code that controls how websites look.

Selector – The part of CSS that targets specific elements on your page.

Property – The aspect of styling you want to change (like colour or size).

Value – The setting for a property (like "red" for colour).

Class – A name given to HTML elements so CSS can target them.

Override – When newer CSS rules replace older ones.

Wrap-up

You now know how CSS works in Squarespace and how to add basic custom styles. Start with simple changes like colours and fonts before moving on to more complex styling.

Remember to test your changes on different devices and keep your CSS organised with comments explaining what each rule does.

Ready to learn more advanced CSS techniques? Check out our next chapter on targeting specific elements and creating responsive designs.

Join Pixelhaze Academy for more detailed CSS tutorials and Squarespace customisation guides.