Beginner's guide to CSS in Squarespace + my 5 favorite code snippets
(Pre.S. This post contains affiliate links, and clicking them could help me earn a little something on the side. My nachos fund thanks you!)
Squarespace is a FABulous platform to get a beautiful website up and running, quickly. (If you haven’t signed up yet, use my code BEJ10 to get 10% off!)
BUT I get it, there are limitations to how much you can customize your site using the given features.
That's where using a bit of custom code comes in. And every Squarespace plan includes unlimited use of CSS. Whooop!
There is a catch though: this is one thing Squarespace doesn't offer guidance on. Although they have fantastic help guides for the built-in style settings and more, custom code falls outside their scope of support.
And that's why I'm here to help! I use CSS with every single website (anywhere from just 3 lines of code to 500 - completely depends on the project)!
And get this: I have NO formal training on code. Absolutely none! And yet I now can't live without it. So I have confidence that if you're curious about what tweaks you can make with CSS to make your site just a teeny bit more custom, you can totally get comfortable with it too.
I'll first go over the basics of CSS. You can skip to my 5 favorite CSS customizations here.
What's the difference between CSS and HTML?
HTML stands for Hypertext Markup Language and makes up the words & images on a website, i.e. the content & structure.
CSS stands for Cascading Style Sheet and tells you how those words & images will appear, i.e. the design/aesthetics.
So if you were to think of it as a cake... HTML decides what type of cake is being made and how many layers it has. CSS decides what color the frosting will be and if there are sprinkles thrown on top.
This is also an oversimplification, but it can help to think about Squarespace's drag & drop build functionality as writing the HTML, and playing with the Site Styles as writing the CSS. (SQSP is always doing this for you on the back-end whenever you make changes to your site.)
So that means by using Squarespace's custom CSS editor, you can manually make changes such as font sizing, background colors, footer spacing, and soooo much more!
Where to add custom CSS in Squarespace
While you can add both custom CSS & HTML in Squarespace, some HTML will require a Business plan or higher. But the use of CSS comes with all payment tiers. 🙂
To add custom CSS to your site, log in and head to Design > Custom CSS. That's it!
I would also recommend keeping an always-up-to-date copy outside of Squarespace. I always create a website folder in Google Drive for my clients where I include a Google Doc with all the code on the site. This comes in handy when you are making changes and accidentally break or delete something.
How to use CSS on your Squarespace site
The great thing is there are thousands of CSS tutorials out there that you can swipe for free. (I'm sharing some of my most-commonly used tricks at the end of this post.) All you have to do is copy and paste them and oftentimes that's enough!
However, if you do need to make a tweak to your code snippet, I love CSS because it's oftentimes easy to guess the purpose of each line.
For example, if you were to see this code:
.sqs-block-image {
margin-left: 10px;
}
You'd be able to guess that any image block on the site will have 10 pixels of extra space to the left of it. Right? So if you needed more or less space, all you'd have to do is adjust the number to your desired effect.
Let's look at another example:
h3 {
font-family: 'Stardust';
font-weight: 600;
text-transform: lowercase;
}
Here you can see that all Heading 3 text on the site will be changed to the 'Stardust' font. You could change the weight to '400' to make the text thinner, or change the transform property to 'uppercase'. See, CSS doesn't have to be so scary!
Now, CSS can get a lot more complex, but understanding that will come with practice (not so different from learning math, or Spanish 😛)
If you're interested in creating your own simple CSS from scratch, I recommend using Google Chrome's inspect tool. To see it in action check out this video tutorial I made on customizing your Squarespace gallery blocks.
5 of my most-used CSS hacks for customizing Squarespace sites
These are some of my favorite uses for custom CSS on my clients' sites. I'll list these out for you roughly in order of simplest to most complex!
(Click on the images to view a closeup!)
1. Removing underlines from links (otherwise not an option in SQSP 7.1)
This one is self-explanatory. In Squarespace 7.1, all links are automatically underlined throughout the site. Unlike in 7.0 templates, there is not the option to turn this off in Site Styles, so custom code is needed:
Before CSS
After CSS
2. Adding a line below the navigation bar (to create separation from the main content)
To apply this in your site, check out the tutorial from Juniper & Roots :)
Sometimes if your header color is the same as your site background color, everything tends to blend together. To create some definition between the sections, I started adding a border to the bottom of the nav menu in some of my work:
3. Creating a block of color behind text (opaque OR translucent!)
Erica at Big Cat Creative has the full tutorial on this one!
If you find that your text is difficult to read on top of an image - or if you just want a different design device to play around with - just add a color box behind your text! You can make this as solid or as faded as you like. Here are some ways I've utilized this hack:
4. Adding custom fonts (i.e. fonts not already available in Squarespace)
Squarespace has a vast library of fonts included in your subscription, which is awesome. But sometimes you just need something special. In which case, you can add any font you desire to your site, like so:
5. Creating collapsible/accordion text blocks (perfect for FAQ sections!)
For this trick, I recommend Inside the Square's video tutorial and cheat sheet download.
Now this one is actually a combo of CSS & HTML, but I had to include it because it's just so cool! (and still very doable.)
This hack allows you to condense a lot of information into a small area by allowing users to click to expand the text. Here are some applications of this technique I've created for clients:
(Update: Squarespace has recently added a built-in Accordion Block! You can now achieve a similar result without the use of code. To learn how it works, check out this blog post. For something more custom, use the above tutorial and tweak the code to your liking.)
Please leave a comment below if you learned something from this post, pin it for later, and share it with a friend who uses squarespace! Thank ya ever so kindly :)
Need someone to take over your Squarespace site and customize it to your brand?
I offer full web design & strategy packages. Schedule a free consultation call to learn all about it!
More posts you might like:
How to change the Squarespace line block’s color and width in versions 7.0 & 7.1, video tutorial
Why you need a custom Error 404 Page & how to set one up in Squarespace, with 15 creative examples
How to browse all the fonts that are available inside Squarespace 7.1
Squarespace Personal vs. Business plan - features & pricing comparison
