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 (or colors if you aren't in the UK) 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 we 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 as they used to. It's up to you to test your site after you've added some CSS. Lastly, Squarespace make regular changes to their templates to improve them. They make these without warning and when they do, they may break the custom CSS that you've added.

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

With Squarespace there are two places where you can add CSS.

Custom CSS Editor

The best place to add CSS is using the Custom CSS editor. Code added here generally affects your entire site. When you type in your code, the CSS editor checks what you type and highlights errors in red. To reach the editor you'll need to be logged in to your site.

1. In the home menu, click Design.

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, we 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.