Adding CSS To A Squarespace Website
Table of Contents
In this tutorial, let’s talk about the ways in which we can add Custom CSS to a Squarespace site and the benefits / tradeoffs of each of these options.
Let’s learn by doing here, so what we want to be adding is some code that will add a box shadow to our image elements
Here is the CSS we need to make it work:
CSS
.intrinsic{
box-shadow: 5px 5px red;
}
.image-wrapper{
box-shadow: 5px 5px red;
}
.img-wrapper{
box-shadow: 5px 5px red;
}
WHAT IS CSS?
CSS, or Cascading Style Sheets, is a one of three main programming languages of the web, along with HTML and Javascript. CSS the language that is in charge of the layout and design of a website.
4 options when adding CSS
There are 4 main places you can add CSS onto your website.
The Custom CSS Area
The Page Header Code Injection Area
Code Block
Site Header Code Injection Area
Let’s start with #1
Custom CSS Area
The Custom CSS area is found in the design tab of your Squarespace backend.
We could paste our CSS from above into this area we’d immediately see the box-shadow on all of our image elements!
The Custom CSS area is a global space, meaning, any code added in here will be applied to every single page, unless you use targeting to select a specific page or targeting a specific block.
Over time though, this area can become very unwieldy and difficult to manage. It’s not uncommon to have over 1000 lines of CSS in this area, which takes a LOT of time to scroll through and find the specific CSS if you want to edit. So it’s best practice to reserve this area truly for code that you want to apply to every page, not just one or two pages.
To make it easier on future-you (who is searching through this code), I would recommend that you add comments in your Custom CSS area. Your two options for making comments are the single-line comment and the multi-line comment. These names are pretty self-explanatory, so I’ll just show you examples:
//This is a single Line Comment
/* This is
a multi-line
Comment */
.intrinsic{
box-shadow: 5px 5px red;
}
.image-wrapper{
box-shadow: 5px 5px red;
}
.img-wrapper{
box-shadow: 5px 5px red;
}
Single-line comments are initiated with two backslashes //. Anything after those two slashes will not be read as CSS, rather, they will be comments that are only for us designers to read. When you break to the next line the comment stops.
Multi-line comments are initiated with a backslash, then an asterisk symbol /*. This comment can span multiple lines, until we do the reverse of this, an asterisk symbol and a backslash */ to close out the comment.
I like using multi-line comments to define an entire plugin or grouping of code and the single line comments for describing what certain parts within that code do. So my CSS might look like this:
/*ADD A BOX SHADOW TO IMAGES*/
//Code for Image Blocks
.intrinsic{
box-shadow: 5px 5px red;
}
//Code for Blog Collection Page
.image-wrapper{
box-shadow: 5px 5px red;
}
//Code for Summary Blocks
.img-wrapper{
box-shadow: 5px 5px red;
}
For the more advanced users, it’s useful to know that code in this area is actually processed through a program called LESS, which gives us some additional features that vanilla CSS doesn’t give us, like variables and nesting.
Page Header Code Injection Area
The Page Header Code Injection area can be found by clicking on the pages tab, then clicking the gear icon next to any particular page, then clicking on the advanced tab.
There are often times where we just want some code to apply to a certain page, in these cases, it’s best to add the code directly onto the page itself rather than going through the Custom CSS area. This will help prevent the global Custom CSS area from becoming congested with code that’s only used on one or two pages.
This area though, only accepts HTML elements, so we need to wrap our CSS in <style> </style> tags which tells the browser to read the in-between code as CSS. So this is what our code would look like:
<style>
.intrinsic{
box-shadow: 5px 5px red;
}
.image-wrapper{
box-shadow: 5px 5px red;
}
.img-wrapper{
box-shadow: 5px 5px red;
}
</style>
Notice that the second </style> tag has a backslash at the start, which indicates that we’re closing out an element we’ve already opened.
This is a much better place to add our code, but we need to be careful about our comments. Since we’re in HTML land, we need to use HTML appropriate comments. The backslashes option // doesn’t work here, we need to use our multi-line comments within the script tags, and HTML comments outside the <style> tags.
An HTML Comment starts with this <!-- and ends with this -->, and these comments can also be multi-line. So this would be appropriate:
<!-- ADD A BOX SHADOW TO IMAGES -->
<style>
/*Code for Image Blocks*/
.intrinsic{
box-shadow: 5px 5px red;
}
/*Code for Blog Collection Pages*/
.image-wrapper{
box-shadow: 5px 5px red;
}
/*Code for Summary Blocks*/
.img-wrapper{
box-shadow: 5px 5px red;
}
</style>
WARNING
If you're moving code from your Custom CSS area to your Page Header Code Injection area, sometimes just copying and pasting it won't work. The Custom CSS uses LESS which allows for some syntax that regular CSS doesn't allow for, so you might need to do some adjusting.
Additional Options
Some other places you can add CSS are using a code block and in the Site Header Code Injection area (Settings » Advanced » Code Injection). Both of these places have the same requirements as the Page Header Code Injection area, in that the code must be written in an HTML-friendly way (between <style> </style> tags)
Where to apply your CSS?
So this is how I decide where code should go:
I default to putting code in the page header code injection area of the specific page or two that need the CSS.
If any of the following apply, I add the code to the Custom CSS area:
If the code should this CSS be applied to 3 or more separate pages?
If the code specifically needs LESS syntax (some plugins require this)
If I’m testing the code (it’s much easier to test in Custom CSS area)
Finally, I’ll use a code block if I need to apply the code to a specific page, but the page doesn’t have a Page Header Code Injection area (like blog pages!).
I have yet to run into a time where I need to add CSS to the SITE Header Code Injection Area.
Learn CSS in Squarespace
If you’re interested in learning more about CSS in Squarespace, check out my Learn CSS in Squarespace course. This course is for people who are serious about improving their Squarespace Website building skills. I wholeheartedly believe that CSS is the single best skill you can learn if you want to become a better Squarespace designer.
