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 fonts, colours and buttons throughout your site. There are lots and lots of settings but there aren't tweaks for everything! If you want to change a style that isn't included in the Style Editor, you need to add something called Custom 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 Forum.
What is CSS?
CSS stands for Cascading Style Sheets. Thatβs a fancy way of saying that itβs language we use to set the visual style of web pages, including the layout, colors, and fonts. CSS (pronounced "see ess ess") is used on all modern websites.
In Squarespace, most CSS is created for you automatically when you use the Style Editor. It all happens behind the scenes! However, 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.
On the latest version of Squarespace, you'll find the CSS Editor in Website > Pages > Website Tools > Custom CSS. Note that you may need to scroll down past a long list of Pages before you find the Website Tools menu! If youβre having difficulties finding Custom CSS, take a look at Where is the Custom CSS panel? Squarespace also have a support guide called Using the CSS Editor.
How Does CSS Work?
Here are some basics that will help you get started with CSS. However, if you want to get the most out of CSS, I recommend you follow a good online course or read a good book.
In its simplest form, CSS allows you to specify how your web content appears. An example in English would be:
βMake my paragraphs appear in the colour redβ
The CSS equivalent of this will have a selector, a property and a value. In plain English:
The selector is βParagraphsβ. It is the thing we want to target.
The property is βColourβ. It is the aspect of the paragraph that we want to change.
The value is βRedβ. It is the colour we want to use.
The actual CSS to make paragraph text red is:
p { color: red;}
Paragraphs are referred to by their HTML element (the lowercase letter βpβ).
In CSS, the colour property is 'color' [it uses US English].
The curly brackets always follow the selector and they are used to 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 the Custom CSS panel 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 or Class. These are useful when you want to target some elements on just one page of your site.
Index Sections
On older Squarespace 7.0 sites, pages within an index have a unique ID, allowing you to make changes to just one section of an index. Note that these older version 7.0 templates vary, so this is not always the case.
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 numbers and 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)
On older Squarespace sites, you may find some IDs that start with YUI, 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 βsqs-image-blockβ and βsqs-code-blockβ.
