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 per-page code injection (see next section below) or collection IDs.

Per-Page Code Injection

If you want your CSS to only affect one page*, you should add it to the Page Header Code Injection section of a page's settings. To reach this:

1. Whilst in the Pages panel, open the page that you want to modify.

2. Hover over the content area.

3. Click Settings.

4. In the window, click Advanced in the top-right corner.

5. You'll see the Page Header Code Injection area.

6. The Page Header Code Injection area doesn't expect CSS, it expects HTML. To add CSS to this area, you must format it so that it knows it is CSS. The way to do this is to place it in what we call style tags. To demonstrate this, let's use the same example that we used above. To change the colour of the body font to blue on this page only, we might add this to the code injection area:

<style>
  body p {
    color: blue;
  }
</style>

Note the style tag above and below the code. The one above is in triangular brackets. The one below is in triangular brackets with an initial "/".

7. Save the changes to your page settings and when you refresh your page, you should see the changes that you've added.