BONUS MODULE: LESSON TWO
Adding Custom CSS to Your Site
Now that you understand what Custom CSS can do, it’s time to learn exactly how to add it to your Squarespace website… safely and confidently. This lesson will guide you step by step so you can start customizing your site right away.
Where to Add CSS in Squarespace
Squarespace provides a built-in CSS editor where you can add your custom styles globally. Here’s how to find it:
Log into your Squarespace site and open the website you want to edit.
From the left-hand menu, click pAGES → Custom CODE → CUSTOM CSS
You’ll see a blank text editor labeled “Custom CSS” where you can type or paste your CSS code.
Safely Adding CSS
Before adding new CSS, follow these best practices:
Make a Backup: If you already have existing CSS, copy it into a text document on your computer so you can restore it if something goes wrong.
Comment Your Code: Use comments (e.g.,
/* Button Style */) to label each section of your CSS — this makes it much easier to understand and edit your code later.Add One Change at a Time: Enter or paste CSS in small pieces. This helps you see exactly what each change does and makes it easy to pinpoint errors.
Previewing Your Changes
One of the best parts of Squarespace’s CSS editor is the live preview feature:
As soon as you type or paste CSS into the editor, your site preview will update automatically, letting you see how your changes look in real time. IF NOTHING CHANGES, THAT MEANS THERE IS SOMETHING BROKEN IN YOUR CODE.
Check multiple pages of your site. Remember: most CSS changes are global, so a change you make for one section may unintentionally affect others UNLESS YOU USE THINGS LIKE BLOCK IDS.
Use Squarespace’s built-in Device Preview tool (icons at the top of the preview window) to see how your site looks on desktop, tablet, and mobile.
Testing Safely
To make sure your changes look good everywhere:
Open your live website in multiple browsers (e.g., Chrome, Safari, Firefox) to check for inconsistencies. some styles can display slightly differently depending on the browser.
Test on real devices if possible, especially your phone, since many readers will visit your site on mobile.
Clear your browser cache or use incognito mode if your changes don’t seem to appear. old files can sometimes prevent you from seeing your updates.
Saving and Publishing
Once you’re happy with your changes:
Click Save at the top of the Custom CSS editor to publish your new styles.
Visit your live website (outside the Squarespace editor) in a fresh browser window or tab to confirm that everything looks and works as expected.
Tips for Organizing Your CSS
Keep It Organized: Group related styles together — for example, all button styles in one section, all heading styles in another.
Use Clear Labels: Comments like
/* Headings */,/* Buttons */, or/* Mobile Adjustments */make your CSS easy to navigate later.Save a Master Copy: Maintain a copy of your CSS file on your computer or in cloud storage so you always have a backup.
Action Step:
RefOpen your Squarespace Custom CSS editor, explore the interface, and note how the live preview updates as you type. Familiarize yourself with how to navigate, save, and preview changes. this will prepare you for the next lesson, where you’ll start adding real CSS.
