How to Install CSS on your Website

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 INTSTALL 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.


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 in 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 like a landing page. It’s also great for individual style changes like a unique contact form or alternating color scheme.

When using page header code injection, you need to place the code between two style brackets, like this: <style> CODE GOES HERE </style>  


OPTION THREE: 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!


READY TO GIVE IT A SHOT?

Download my free guide to Getting Started with CSS for a few codes to try, and some pro tips on how to customize any code to work for your website.