Your Guide to Squarespace Custom CSS
One of the advantages of Squarespace is that you can build a functional and aesthetically pleasing website without needing to know how to code.
However, there may be times when you want to use custom code to style your website and create a design that is uniquely yours.
In this article we’ll show you what custom CSS is and how to add custom coding to your Squarespace site.
What is Custom CSS?
Custom Cascading Style Sheets (CSS) is a special type of code you can use to change how your website looks.
Websites use a code called Hypertext Markup Language (HTML) to add content and determine how pages are structured. CSS controls how these HTML elements are displayed. Without it, all websites would just have black text on a white background!
For example, you can use CSS to change how fonts look, how call-to-action buttons are styled, and the placement of specific elements.
Here’s a great example of CSS in action – CSS Zen Garden. While the content across the site is static, you can apply different CSS style sheets to change how the site looks!
What Can You Do With Custom CSS in Squarespace?
While we’re big fans of Squarespace, it can sometimes be limited when it comes to design options. You can use CSS code to customize your site design and make it stand out.
Here are some cool tutorials that show what you can do with Squarespace custom code!
How to Add Squarespace Custom Code
There are three places you can add custom CSS in Squarespace. Through the custom CSS editor, through a code block, or the page header code injection settings.
How to Add Squarespace Code Through the Custom CSS Editor
The custom CSS editor is the best option if you want to apply your CSS code across the whole of your website.
You can access it by selecting Pages, Website Tools, and Custom CSS.
Paste your CSS code into the box. If there are any errors in your code, Squarespace will let you know.
You can also upload files—for example, if you want to use a specific image as a page background or create a custom font. To do this, select Custom Files.
Click Save when you’re done.
How to Add Squarespace Code Through a Code Block
Adding a code block lets you add CSS right next to the elements on a page you’re adjusting.
Go to the page you want to apply your code to and click EDIT. Then, depending on the type of page you’re on, either click the blue plus sign or ADD BLOCK to create a new block. Choose Code from the menu.
This should open the custom code box. If not, click the pencil icon to edit your Squarespace CSS.
Leave the custom code box in HTML mode. When you paste your code into the box, make sure you add style tags before and after, so it will go: <style> CSS code </style>.
Squarespace code block
Click out of the box and SAVE your page when you’re done.
How to Add Squarespace Code Through Page Header Code Injection
This allows you to apply Squarespace code to a specific page of your site. Bear in mind that you can’t use this feature if you’re on the Personal plan.
Go to the Pages menu and hover over the page you want to add your code to. Click on the cog icon that appears to access page settings. Click on Advanced and paste your code into the box. Like in the code block, you will need to add style tags around your code.
Advanced page settings
Click CLOSE when you’re done.
Some Things to Bear in Mind With CSS for Squarespace
While custom CSS opens up many design and customization options, it’s vital to use it carefully.
Custom code falls outside the scope of Squarespace’s support. This means that if the code you add causes problems with your site, Squarespace won’t be able to help.
Your CSS code may also stop working if Squarespace runs an update.
Here are our top tips for ensuring any Squarespace custom coding runs as smoothly as possible.
Keep your code as concise as possible—shorter code is less likely to cause issues
Thoroughly test your code in different browsers and devices. Your Squarespace code may look okay on desktop but may cause problems on mobile
You can add comments in the custom CSS editor. Use // for a single line comment and sandwich your comment between a /* and */ if it will span multiple lines. This will let you provide additional context about your code in case you need to come back to it
Revisit your custom CSS code regularly and remove any code you no longer need. It may be that a feature you were only able to add using code is now available in Squarespace
Remember that too much CSS can potentially slow down your website, which can negatively affect your search engine optimization efforts
Need Help With Your Squarespace Custom Code?
CSS can help you style your Squarespace site with laser precision, making it easy to create a site that perfectly aligns with your brand identity.
There are plenty of CSS snippets available online that you can tweak to your needs. If you’re up to the challenge, you can even learn to code—Codecademy offers a great free course.
Alternatively, if you’re looking for a bespoke piece of custom code for your Squarespace site, we offer ongoing Squarespace support. Tell us what you need, and we’ll develop, upload, and thoroughly test a bespoke piece of CSS code for your website.
Get in touch today, and let’s work together to transform your Squarespace site into something amazing!
