How to install CSS on one page in Squarespace 7.1 // CSS on a Single Page in Squarespace 7.1

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn

🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10

💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel https://www.paypal.com/paypalme/insidethesquare

This tutorial is for Squarespace 7.1 sites. If you are using a 7.0 site like Brine or Bedford, check out this tutorial instead: https://youtu.be/ptQkzTVYRFs

Aaaaaand if you have no idea what that means, read up on what version you are using in this article because it makes a big difference in which codes will work for you! https://insidethesquare.co/theme-families

In this quick tutorial, I am going to walk you through the step by step process of installing code on a single page in a Squarespace site.

There are two ways to do this; the first is my preferred method, page header code injection. Your page header loads before the rest of your page content, so it’s a perfect place for CSS!

The second option is to use an on-page code block, but I only recommend using this for three very specific reasons.
1 – Code blocks load with the rest of your content, so there is a chance that your changes won’t be visible for a few seconds while your site loads.
2 – If you are on a personal subscription – you don’t have access to page header code injection, so you have to take this route.
3 – This is the only way to make changes to individual collection pages, like single blog posts or individual products. You don’t have access to individual collection page header code injection, so on-page code blocks is your best bet.

Regardless of which method you use, you have to put your code in between two “style” brackets. Page header code injection and on-page code blocks can hold different types of code so we have to let the browser know that what we are about to share is a “Style” code by literally labeling it as a style.

I can’t include the carrot symbols in a youtube description so you have to see the example in the video – pay close attention at the 02:09 mark and check the comments below for the example!

🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css

🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️ #winwin

🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.

The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥

#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips

You May Also Like