What is CSS?

CSS is the language or code you use to tell your browser’s robots how you want the content on your site to be displayed or styled.

For example, if you’ve added a text block to your site, whatever you type into that text block is your content, but the CSS is what determines how that text looks to your visitors.

(ie. the font color, size, type, positioning etc.)

Without CSS, your content would all still live on your site, it would just appear in plain text mode.

I’ll use my current home page to give you an idea just how important CSS is to your design!

WITH CSS


Without CSS


So without CSS your content would just appear as line after line of dreadfully boring text that would make it dang near impossible for users to navigate your site, let alone be inspired to want to buy what you’re selling.

But since very few people have the time or attention span to code their entire site into existence, Squarespace handles it for you by providing the default CSS (a.k.a your Squarespace Template!) to automatically support and style the content you want to add.

Do I need to learn CSS?

(Can’t I just use Squarespace’s built-in site styles editor to customize my site?)

It’s is 100% possible to create an absolutely gorgeous, fully functioning website using the easy-to-tweak settings already built-in to the platform.

(My online course Square Secrets actually teaches that very thing! How to build completely custom, nothing-like-the-template website that attracts and convert your ideal client or customer…all without the use of code.)

So yep. Def possible, and a wayyyy faster way to get your biz up and running online!

You can get started with customizing your content using Squarespace’s site styles editor in this post, if ya like!

See: Squarespace basics: using site styles 

But as I mention in that post, the edits you make to your site style settings are going to happen site wide.

You do have the ability to set different “themes” which can then be applied to different sections to help one stand out in contrast to the next, but for the most part, your site style settings are meant to keep things looking pretty cohesive across your design.

Squarespace does this on purpose, btw!

They’ve been around the block a time or two and know that having too many things going on on your site at the same time can actually distract from the important things (like getting your site visitors to take the action or next steps you want them to!)

Confusion/distraction kills conversion.

So you really want to keep your site looking cohesive, clean, and stupid simple to navigate.

Why use CSS?

You’ve already got all your site styles looking just the way you want them, but you wish there was a way to make that one button or one bit of text a different color, without affecting the rest of your site.

This is where custom CSS comes in!

It allows you to target a specific page, section, or element (like a button block) on your site and apply special rules for how it should look!


How custom CSS works to change your site’s layout & design

This may be one case where knowing what this bit of techie-lingo stands for actually kinda important (more on why that is in a minute).

CSS stands for “Cascading Style Sheets.”

And if something is cascading, that means it’s flowing from top to bottom right? (Think: cascading waterfall!)

Why this matters:

The robots who listen for your CSS are standing under that waterfall, and if you have multiple bits of competing custom code trying to style the same piece of content, they are just going to go with the first one that hits them – the bit of CSS closest to the bottom!

This is how custom CSS code snippets work to change your styling from the default CSS your Squarespace template provides to your custom rules for how things should appear.

All the CSS that comes built-in to your template is stored on an external cascading style sheet you can’t see in Squarespace land, and each time you add a custom bit of CSS to your site, you are tacking it onto the bottom of an already very long list (letting the robots know it’s first priority over anything that appears higher up in the styling sheet.)

This means that if for some reason you should decide to delete a custom code snippet you’ve entered, the default version of that page, section, or element’s CSS still lives on the sheet and will be automatically reapplied to your content.

Can CSS really break my whole site?

The downside to using custom CSS

So CSS is super fun, and I’ve seen some crazy beautiful designs created by CSS gurus.

But before you go copying and pasting every custom code snippet you find online in an attempt to customize the *you know what* out of your site, be warned…

The robots can only read the coding language used to describe your content (HTML code) and styling (CSS) if it’s perfect to a ‘T’.

It’s not like reading an actual language like English where if you miss a comma, people will probably still be able to gather your meaning.

Which means that all it can take is one misplaced semi colon or squiggly bracket to seriously mess with your site.

And while the earlier or default version of your CSS still lives on your site’s cascading styles sheet like I mentioned above, there’s no guarantee you’ll be able to get your site back to looking exactly how it was before things all went to pot.

Oh, and Squarespace is only able to offer support for those features which are native to their platform, which means there is no hopping on customer support chat to quickly troubleshoot an issue caused by adding in custom code or CSS!

Why custom CSS or code might not make sense when designing for clients

If you’re a designer building sites for other people, you may be tempted to quickly pop in bits of code here and there to make your client’s demands (*ahem* requests) come true.

But what happens when you’ve handed off that project post-launch, and the site owner (not in the least bit tech-savvy) needs to make changes to their site?

So just know that if you tend to use a lot of custom CSS or code plugins to achieve your designs rather than relying on the native design features of Squarespace, it could mean needing to offer your services on retainer to keep those sites looking on point, and functioning the way they should.

Okie dokes! Now that we’ve got that little custom CSS disclaimer out of the way, let’s look at how the heck it actually gets added to your site!

3 ways to add custom CSS to your Squarespace site

1. Universally (using the custom CSS editor)

To locate the Custom CSS Editor in version 7.0 or 7.1 of Squarespace, head to design > custom CSS.

This is where you will be sticking most code snippets you find on the web, as CSS injected here will allow you to affect site-wide changes, as well as target one (or multiple) specific page, section, or element on your site all at once.


2. PAge Wide (Using the Page header code injector)

To locate a specific page’s header code injector, open the page’s settings and click advanced.

CSS added in this window will only apply to that one page, and no where else on your site.


3. Inline on a page (using a code block)

Want something to appear in only one place on your site (but have all other occurrences of that element to default to your site-wide style settings?)

Squarespace allows you to insert a code block exactly where you want that special something to appear, and apply your custom code snippet right there in the block.


This one takes a bit more than a simple copy and paste, however, since any content you want to live in that block (ie. an image, button, text, etc.) has to be manually added in with a bit of code before you can actually use CSS to style it!

This is often done by uploading that file to another page on your site, and linking to it in your code block.

Like I do in this tutorial for using code blocks to hide Pinterest images in a Squarespace blog post.

Heads up! These last two ways to add CSS to your site require you to have upgraded to the Squarespace business plan or higher!

Ready to start using custom CSS with your Squarespace site?

You’ll probably want to check out:

Each of these handy tutorials comes with exact code you need to copy and paste, the custom tweaks you need to make to the CSS code snippet to achieve your desired result, and which of the above 3 methods to use to when adding CSS to your site!

/


/

You’ll also love . . .

Squarespace CSS: what you need to know before you get started