Hey there Squarespacer, and welcome to your free training on CSS for Squarespace!
On this page you’ll find all kinds of info that you can use to make your Squarespace website uniquely yours. Be sure to bookmark this page, or click here to download this as a PDF, so you can access it anytime you need a refresher.
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.
CSS is how Squarespacer's turn basic templates into beautiful custom creations of their very own.
I used CSS to move this image to the side of the page, and rotate it a bit.
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.
Two different button colors? No problem.
Fancy image filters... on a hover? Totally possible with a little custom code.
To make a Squarespace template a unique website of your very own, you can use custom CSS, and I’ll teach you how.
Okay, how do we do this?!
Let's start with the basics. This is the first code I ever learned, and it's still one I use today! Let's change the color of a button on a hover.
Remember that I said CSS was a language? That means we just need to say change this button color on a hover in a way a browser will understand.
This is how you can use CSS to tell a computer exactly how you want something to look.
The custom CSS code for that button hover effect includes all the elements on the right. Click on any option for an explanation of what that part of the code does.
-
CSS code start’s with you telling a 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 on a hover. This is called the state of the selector.
-
After that, we tell it what to do - make the background 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 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}
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!
Now that you know the basics, let’s talk about the three ways you can add custom CSS to your Squarespace site.
-
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.
-
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> -
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>
More of a visual learner? I gotchu 😎
-
Site Wide CSS
Website →
Website Tools →
Custom CSS
-
Single Page CSS
Website →
Page Settings →
Advanced
-
Code Block
Edit →
Add Block →
Code
Advanced Page Settings & Code Blocks 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>
.sqs-block-button-element:hover{
background:purple!important
}
</style>
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 link in the description to check out the full blog post that explains the code.
-
Site-wide CSS Installation Recommended
.header-actions .btn:hover {
background-color: red!important
} -
Page Header Code Injection Recommended
header, #footer-sections {
display:none!important
} -
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, of 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}
This is the start of something awesome. 😍
I am SO excited to see the customizations you’ll create with custom CSS! To help spark a few ideas, be sure to browse my free tutorials here at insidethesquare.co
If you're 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.
THE TERM “SQUARESPACE” IS A TRADEMARK OF SQUARESPACE, INC.
THIS CONTENT IS NOT AFFILIATED WITH SQUARESPACE, INC.
All Rights Reserved © 2024 by InsideTheSquare.co; 7202 NE HWY 99 #106-167; VANCOUVER WA 98665
For support, please email support@insidethesquare.co