INSIDETHESQUARE.

CO PRESENTS

CSS Basics for

Squarespace

ALL RIGHTS RESERVED © 2023 BY INSIDETHESQUARE.CO

legal information
IMPORTANT DISCLAIMER

The term "Squarespace" is a trademark of

Squarespace, Inc.

This content is not affiliated with Squarespace, Inc.

InsideTheSquare.co has no control over changes to

the Squarespace platform or any Squarespace
related product or website. The accuracy of
information in this PDF is subject to change.

If you have any questions or concerns about this

content, please email support@insidethesquare.co

What is CSS?
CSS stands for “cascading style sheet” and it’s a computer
language you can use to make your Squarespace website
look unique. You can use CSS to change button colors, image
sizes, page layouts, add fancy fonts, and even do advanced
things like hover effects.

Why do Squarespacer's
use custom CSS?
Squarespace has one main design menu that lets you do a LOT of
things, but for some people, it's just not enough! That's why they
created a special place in your design menu where you can add
Custom CSS to your website, letting you make as many design
changes as you want. CSS is how Squarespacer's turn basic
templates into beautiful custom creations of their very own.

ALL RIGHTS RESERVED © 2023 BY INSIDETHESQUARE.CO

 How does
it work?
CSS is a language that we can use to tell a
computer browser how we want content on
our website to look.

The example code below is telling a

computer browser that we want a button to
have a purple background on a hover. It's
one of the very first codes I learned!

CSS code start’s with you telling a computer

.sqs-block-button-element browser what element of a website you want
to change - in this case, a button. 

This is called a selector. Some selectors are based on HTML but many are unique
for the website platform, including selectors for Squarespace.

Next, we let it know we only want to see this happen

:hover on a hover. This is called the state of the selector.

After that, we tell it what to do - make the background

background: purple purple. The property is the background and the value
we want it to be is the color purple.

Then last but not least, we make sure the computer

!important browser knows this is important by adding the text
!important.

When you put that “sentence” together, it looks like this:

.sqs-block-button-element:hover{
background:purple!important}

ALL RIGHTS RESERVED © 2023 BY INSIDETHESQUARE.CO

That’s all
there is to it!
As long as you have the right selector
for what you want to change, edits like
this are a piece of cake. 🍰

You can get really specific too, telling a

computer to only show a specific
image on mobile, or make links on just
one page a certain color.

Every design change you can dream of

can be done in Squarespace can be
done with a little CSS magic! ✨

Little known fact - I’m a 100% self-taught CSS nerd. Before I

started customizing Squarespace with code, I worked at a gas
station deli for a while, was a tattoo artist for a bit, even
dabbled with espresso when I worked at Starbucks.

But these days? I'm the go-to-gal for all things CSS for
Squarespace. If I can figure this out on my own, I know you can
definitely get the hang of it with my help!

ALL RIGHTS RESERVED © 2023 BY INSIDETHESQUARE.CO

How to add CSS to
Squarespace
Now that you know the basics, let’s talk about how you can add
it to your Squarespace site.

SITE-WIDE CSS

The most popular way to add custom code to Squarespace is to add it to

your site wide CSS file. This is ideal for anyone on a personal plan, and
site-wide changes like installing a font.

PAGE HEADER CODE INJECTION

Available for business and commerce plans, you can add custom CSS
to the header of an individual page or collection. This is great for making
changes that only need to happen on those pages, like customizing a
specific section or specific item. You can have multiple types of code
here, so you need to tell the browser that your code is CSS by placing it
between two style brackets like this: <style> css code </style>

ON PAGE CODE BLOCK

You can add custom CSS to a code block on any page in Squarespace.
This is recommended for people on a personal plan who want to change
an individual page or custom changes to a specific collection item like a
blog post. Just like page header code injection, you can have multiple
types of code here, so you need to tell the browser that your code is CSS
by placing it between two style brackets like this:<style> css code </style>

ALL RIGHTS RESERVED © 2023 BY INSIDETHESQUARE.CO

Let’s make some more
changes using CSS!
These practice codes are a great place to start. Each one can be customized to
match the style of your website. If you want a step-by-step video tutorial, click
on the title to check out the full blog post that explains the code.

1 Change the header button color on a hover

Site-wide CSS Installation Recommended

.header-actions .btn:hover {
background-color: red!important
}

2 Remove the header & footer from a single page

Page Header Code Injection Installation Recommended

header, #footer-sections {
display:none!important
}

3 How to hide prev/next links at the bottom of a blog post

Page Header Code Injection Installation Recommended

.item-pagination-link{
display: none
}

ALL RIGHTS RESERVED © 2023 BY INSIDETHESQUARE.CO

Troubleshooting Tips
I keep getting a Syntax Error.
This means that there is a character in your code that the browser doesn’t
understand. It might be a misspelling or the wrong symbol, or you just haven't
finished your code with a final curly bracket yet!

Double check that your code to make sure you don't have any extra spaced,
dashes, or dots, and that you are using {curly brackets} where you need to, and not
(parentheses) or [square brackets]

Make sure you use semi colons ; colons : and commas, in the right places.
Here is an article with more info on symbols used in CSS:
insidethesquare.co/resources/css-symbols

I'm trying a code that isn't doing anything.

Make sure you have the right selector! To test it out, try using the code
{display: none!important} to see if the selector you are trying to change
disappears. Here is an example for a button:
.sqs-block-button-element {display: none!important}

If it's still there, you need to use a different selector. If it does disappear, try adding
!important after the value in your code to make sure the computer sees it! Here is
an example for a button background color:
.sqs-block-button-element {background-color: #50bdb8!important}

ALL RIGHTS RESERVED © 2023 BY INSIDETHESQUARE.CO

This is the start of
something awesome.
I am SO excited to see the customizations you’ll create with custom CSS!
To help spark your creativity, be sure to browse the free Squarespace CSS
tutorials available on my blog at insidethesquare.co

I'll be back in your inbox soon with some tips and tricks to help you make
your Squaresapce website even more awesome. If you're already ready
to rock more custom code concepts, then I'd recommend getting my
Squarespace CSS cheat sheet right now!

It's my personal collection of Squarespace selectors, premade codes you

can customize, and more pro tips that you can use to create a website
that is uniquely yours.

GET THE CHEAT SHEET →

All my best,
Becca Harpain
hello@insidethesquare.co
insidethesquare.co

ALL RIGHTS RESERVED © 2023 BY INSIDETHESQUARE.CO