Adding CSS to Squarespace

Adding CSS to Squarespace

It's easy to make a few little tweaks to a Squarespace template by adding a little code. Be warned though, you can also completely screw up your site if don't add it properly. Here's our guide to adding CSS. We provide it without warranty, expressed or implied. It's just our opinion.

What is CSS?

CSS, pronounced "see ess ess" stands for Cascading Style Sheets, but what does that mean? Simply put, it is code that tells your web browser how to display the elements that you've added to your Squarespace page or entire site. CSS can be used to modify fonts, colours and backgrounds. 

Is CSS Safe?

It depends what you mean by safe. CSS isn't dangerous. It doesn't cause viruses or malware but it can break your site if you add it incorrectly. Colour and font changes are generally easy and safe, and achievable. Changes that mildly affect layout on a page are sometimes doable, but bring greater risk. Squarespace consider adding CSS as "an advanced modification" and they don't offer assistance or troubleshooting if you have problems as a result of adding your own CSS. We don't either. All the code supplied on this site is provided without warranty, expressed or implied.

Some of the code snippets I describe may adjust the layout of your site. Where they involve padding, margins and/or floats they could prevent other functions of your website from working correctly. It's up to you to test your site after you add CSS. Lastly, Squarespace make regular changes to their templates to improve them (up to several times a day). They make these without warning and when they do, they may break any code you've added, including CSS. It’s worth checking customised sites regularly.

Getting Started

Before you start looking at CSS, make sure you've chosen the Squarespace template that works best for you. Some of them have unique features so decide what's important and pick the template with the features you need most. 

Don't try to make your template into something it's not. Customers frequently pick a template because they like something about the look and then ask how to obtain the features of another template.

Don't forget the Style Editor. Squarespace's built-in Style Editor allows you to control many of the colours, fonts and spacings without any code. Always try to make your change here first. If it can't be achieved with the Style Editor, that's when it can be worth using CSS. 

Avoid adding lots of CSS snippets to your site. Add them selectively or you may find that one snippet affects another and your site breaks. Try to understand the snippet you've added so that you can learn as you go along. 

Where to add the CSS

In Squarespace there are three places where you can add CSS but only one that I recommend. Why?

  • Custom CSS is available on all plans, including the personal Plan.

  • If you add CSS using code injection, it is only loaded when pages are loaded in full. If a page is changed using Ajax (as many of the new Squarespace templates are) any styles placed in code injection will not load.

Custom CSS Editor

The best place to add CSS is using the Custom CSS editor. If you need to use some CSS, I strongly suggest adding it here. The editor checks what you type and highlights errors in red, making it easier to see any errors that you make.

The Custom CSS Editor is on the Design menu (under Advanced)
 

1. In the home menu, click Design..

2. Click Advanced

2. Click Custom CSS.

3. Type your CSS into the box or paste a snippet of CSS that you've found. For example, if we wanted to change the colour of the body font to blue, you might add this:

body p {
  color: blue;
}

4. Check there are no errors highlighted and then save it.

Code that you add here will affect your entire site. For example, if you add code that formats images differently, every image on your site will be formatted this way, not just those on the page you are previewing. If you want code to affect a single page, you'll need to use page collection IDs. You’ll find more details in my post

CSSSF Digital