Always backup your CSS once in a while — a couple of times I had Custom CSS and Code Injection’s code completely erased for some reason.
Custom CSS tab
Preferable way to add CSS.
👍 Immediately see changes on the site
👍 LESS: easier syntax, media queries, child selectors & mixins
👎 Because of less, some properties like calc() need to be escaped
👎 Complex to manage with much CSS, if that’s a case you might want to move CSS to the file
How to use
Go to Pages › Website Tools › Custom CSS, add write CSS in the box. Changes are immediately reflected on the site, and you can use LESS syntax (more on this in another tutorial).
Code Injection
👎 No live updates, need to refresh to see the changes
👎 Only regular CSS
How to use
Go to Website → Website tools → Code Injection. You can add CSS in Header/Footer etc. Please note it needs to be wrapped in <style></style> tags.
Page code injection
The most inconvenient way to add CSS, but sometimes you need this to add a specific page CSS. Consider using other ways, and then move CSS to the page code injection in the end.
👎 No live updates, need to refresh to see the changes
👎 Only regular CSS
👎 You need to close panel each time to save CSS, super inconvenient even for small changes.
How to use
Click on the cog near page title in the Website sidebar. Go to advanced and add CSS code to the Header field. Please note it needs to be wrapped in <style></style> tags.
Custom file upload
With large amount of CSS (thousands of lines), it might be impossible to use any of previous methods.
👍 Can handle 1000s of CSS lines for complex edits
👎 need to reupload file after each change
How to use
If that’s a case, you can just put all CSS into a .css file, upload it to SquareSpace using Link method and add it as a link to Website → Website tools → Code Injection.
<link rel="stylesheet" href="/s/style.css">
More ways to add page-specific, section-specific and block specific CSS
Coming soon.
On this page
