A Beginner's Guide to Squarespace Custom CSS
So you’re looking to add Custom CSS to Squarespace? That’s so awesome!
But starting can be a bit of a headache, especially if you’re new to Squarespace and don’t know your way around just yet! Don’t worry, I’ve created this step by step guide to make sure you’re headed in the right direction.
1. Where does the CSS go in Squarespace?
The first thing you’ll need to know is whereabouts your CSS goes!
Head into the backend of your website, and go to Design > Custom CSS.
There will be a large box where you can enter your CSS, and see changes in real time – but remember to press save once you’ve entered your code.
2. A Breakdown of Basic CSS
It’s relatively easy to copy and paste CSS into the box, but sometimes it won’t work with your site or has a different effect than you intended. Being able to understand what you’re putting into the box is suuuppperrr helpful in case things need fixing.
Here is a basic overview:
So as you can see, we have a basic piece of CSS that could be pasted into a Squarespace website. Our selector is our Heading 1 (h1) which means that this is what we’re changing with our CSS.
Our property is what we want to change about h1. In this case it’s the colour, but there are other properties such as size or weight that can be changed with CSS too.
Lastly, we have our attribute – the way we want it to change. Since we’re talking about colour here, you could put the hex code for any colour you like. Here it’s white (#fff).
We also have a few pieces of punctuation. Take a look at their type and position, as these are a MUST for CSS. Your markup WILL NOT work without the correct punctuation in the correct place.
3. Understanding Selectors
As we just mentioned, Selectors are the target of change for CSS. It’s important to note that Selectors don’t all look the same. There are three main types of selectors, and each are preceded with a different piece of punctuation.
So if you’re trying to change a button, you’d start with
.Button
But if you’re make changes to a whole page on Squarespace (for example, the background colour), you’d start with:
#contactpage
I really hope this all makes sense to you! Custom CSS can be a tad confusing at first, but once you get going it’s pretty easy to pick up.
