Using CSS on Squarespace

If you want to customise the style of a Squarespace site, there's the Style Editor. This lets you tweak the colours, positions and colours throughout your site. However, the aren't tweaks for everything; it only allows you to change a limited number of styles. If you want to change a style that isn't included, you need to add some CSS. If you're not a developer, this is where it can quickly sound complicated. This is my updated guide to help you understand some of the solutions that I've posted on the Squarespace Answers site.  

What is CSS?

Cascading Style Sheets (CSS) is a style sheet language that we use to set the visual style of web pages, including the layout, colors, and fonts. CSS (pronounced "see ess ess") is a cornerstone technology used by most websites.

In Squarespace, CSS is created automatically behind the scenes for you when you use the Style Editor. You can also add your own CSS manually using the Custom CSS editor. Do take care when doing this because it can affect your site if you don't know what you're doing. 

You'll find the editor on the Design menu when you're logged on. You'll find a guide called Using the CSS Editor on Squarespace's support site.

How Does CSS Work?

We recommend you follow a good online course about CSS or read a good book. However, here are some basics that may help you get started.

CSS allows you to specify how content appears. Examples in English would be:

  • Make my paragraphs appear in the colour red
  • Change the size of my heading1 font size 30 pixels

The CSS equivalents of these statements have a selector, a property and a value. In the plain English above:

  • Paragraph is the selector. It is the thing we want to target.
  • Colour is the property. It is the aspect of the paragraph that we want to change.
  • Red is the value. It is the colour we want to use.

In CSS, the code for this is:

p { color: red;}
  • Paragraphs are referred to by their HTML element (p)
  • In CSS, the colour property is 'color' [US English]. 
  • The curly brackets always follow the selector.
  • They contain the property and value, separated by a colon.
  • The semi-colon indicates the end of one statement. Another statement (another property and value) can be added within the curly brackets after the semi-colon.

You can try this CSS is your CSS Editor. Go to Design > Custom CSS and add the CSS above. You should immediately see your paragraph text go red. Your visitors will not see this change until you click Save to save the CSS. You can delete the text or click Cancel to return things to normal.

Selectors

There are many selectors that you can use to target parts of your site or page. We've already mentioned 'p' for paragraph text. There's also 'h1' for main headings, 'h2' for heading2 and 'h3' for smaller headings. 

Some very helpful selectors are known as IDs and Classes. IDs are selectors that are prefixed with a '#' character. IDs are very specific because they are unique on every page. For example, there can only be one ID called '#Page' or '#Header' on each page. By contrast, classes can appear several times on a single page, so several parts of the page could have the class '.header'.

Pages

Every page on a Squarespace site has a unique ID. These are useful when you want to target some elements on just one page of your site.

Index Sections

Pages within an index also have a unique ID, allowing you to make changes to just one section of an index.

How to Find Selectors

The selectors and the CSS are 'hidden' behind your Squarespace pages. I've written a guide to help you find them using tools that are built in to the Chrome browser. 

Squarespace Naming Conventions

As you'll see, there are some unique naming conventions for the classes and IDs on Squarespace, as well as some more obvious ones that are more self explanatory, like “site” and “Header”.

The main ones to be aware of are:

  • Collection IDs
  • Item IDs
  • YUI IDs
  • Block IDs
  • Classes
  • Collection IDs

Every Squarespace site comprises of various Collections, and each Collection is assigned an ID.

A Blog or Gallery is a Collection, and so is a (normal) Page. It's safe to use and is most valuable for making CSS changes to just one page, blog, or gallery. The Collection ID is always in the body tag and always starts with collection- followed by a random series of number amd letters like this: collection-436fdec1c5b11b65476576a2.

Item IDs

In a Blog or Event Collection, you'll find that each post has an Item ID that looks very similar to the Collection ID, for example item-773432dfdd2e6b0db1daca6c545. These are also safe to use and are ideal for customising an individual post.

YUI IDs (Not Safe to Use)

These will appear throughout your page but beware the YUI IDs! These IDs are dynamically generated on page load by the YUI Javascript library underpinning Squarespace. If an ID starts with YUI, don't use it in your code or CSS, as your code will break the next time the page is refreshed or edited. These IDs look something like this: yui_4_23_1_2_4197904677657_302.

Block IDs

A better way to target elements within a page is to use Block IDs. These have 'yui' within the ID, but they never start with 'yui'; they always start with 'block'. They're safe to use and they are assigned to each and every Block that you add to your site. They look like this: block-yui_2_23_2_3_4356732145534_6467.

Classes

All Blocks have a class name specific to them and these are really useful for adjusting every Block of the same type on your site. Combine them with Collection IDs to adjust every Block of the same type on just one page. Blocks usually have fairly obvious class names such as “image-block” and “code-block”.