Three ways to install CSS in Squarespace
As the first post in her CSS for Squarespace series, developer Rebecca Harpain provides you with everything you need to get started to install custom code for any bespoke Squarespace template.
WHAT IS CSS?
CSS stands for “cascading style sheet” and it’s a fancy way of making your Squarespace website do something special, outside of its normal functions. Making changes to the CSS file for your Squarespace site is not only easy, but it is a fabulous way to make any good site a great one!
Now if the idea of code gives you the heebie jeebies, don’t worry! If you make a mistake in your CSS, you can always just remove it and Squarespace will work as it was designed to. Consider your backspace button the ideal “undo” option.
HOW TO INSTALL CSS YOUR SITE
You have three options on where to install this Custom CSS in Squarespace:
OPTION ONE: CUSTOM CSS
AVAILABLE ON ALL SUBSCRIPTION PLANS
Adding code to the Custom CSS file in your Squarespace site will apply your code change to every page, except for cover pages. Great for site-wide things like adding fonts, or changing all of your buttons styles. To reach your CSS menu, start at the main menu and select Design > Custom CSS. Paste your code in the code section and be sure to click save when you are done!
WHAT ABOUT COVER PAGES?
While I love cover pages and use them for some specific things, they do not respond to site wide custom CSS Check out my cover page tutorial for more info on how to set them up and why they might be the best choice for some of your content: https://insidethesquare.co/squarespace-tutorials/how-to-create-a-cover-page-fast
OPTION TWO: PAGE HEADER CODE INJECTION
AVAILABLE AS A PREMIUM FEATURE IN BUSINESS AND COMMERCE PLANS
If you only want your CSS code to work on a specific page on your website, you should use page header code injection. This is perfect for things like removing a header and footer so your page can act as a landing page. It’s also great for individual style changes like a unique contact form or alternating color scheme.
To add Page Header Code Injection, navigate to your page settings, and select the Advanced tab, the very last one. There you will see a space to enter your Page Header Code Injection. When adding CSS there, you need to place the code between two style brackets, like this: <style> CODE GOES HERE </style>
OPTION THREE: ON PAGE CODE BLOCKS
AVAILABLE ON ALL SUBSCRIPTION PLANS
If you are using a personal Squarespace subscription plan, and don’t have access to Page Code Injection or Custom CSS, you can still add custom code to any page. When editing page content, insert a code block and place the code between two style brackets, like this: <style> CODE GOES HERE </style> Be sure to click apply when you are done!
Visit InsideTheSquare.co for more CSS tutorials or you can find out about the Squarespace CSS cheat sheet here.
