5 Easy CSS Tricks for Your Squarespace Website
Squarespace is popular for being one of the easiest-to-learn-and-use website platforms available, and that’s why I recommend it to small business owners and bloggers. Beyond their many well-crafted website templates, Squarespace’s built-in style editor offers the ability to customize fonts, colors, layout and more—no coding knowledge required!
It’s certainly one of the best tools (if not the best tool) for DIY-ing a custom, professional-looking website.
However, there are some more advanced design features that can’t be customized directly from the code-free style editor in the back-end of your site. Which is too bad, because many of these are small details that can really elevate and add professionalism to your website.
Though I typically recommend leaving the custom coding to a professional web designer (improperly added code can mess up your website—not good! 🙀), there are a few simple Squarespace CSS hacks that actually are easy enough to copy/paste and add to the back-end of your site yourself, if you’re up for it.
But first:
What is CSS?
CSS stands for Cascading Style Sheets. In simple terms, it defines how your website is styled across different screen sizes. In slightly more technical terms, it describes how the HTML elements on your website should be displayed. (Think of HTML as the content of your site and CSS as the formatting of that content.)
CSS is built around selectors, properties, and property values. Here’s an example snippet of CSS code:
h1 {
font-size: 30px;
font-style: italic;}In this example, h1 (heading 1) is our selector, font-size and font-style are both properties, and 30px and italic are their respective property values. So, across this example website, we’ve styled heading 1 to be sized 30px and italic.
How to use CSS with Squarespace
Though one of the things that makes Squarespace such a great website platform is the built-in style editor (Design > Site Styles) that allows users to customize many elements of your site with absolutely no coding knowledge (woohoo!), there are some things the style editor doesn’t allow you to do.
In those cases, the only way to reach your website design dreams is to open up the hood and add some custom code. You can add custom CSS to your Squarespace website via Design > Custom CSS.
Necessary disclaimers: Broken or improperly added custom CSS can “break” your website (stop elements from displaying properly), so it’s best to only move forward with adding custom CSS if you’re confident you’re adding it correctly. Squarespace does not provide support for custom CSS.
That said, if you’re ready to copy and paste, here are some of my favorite, most-used custom CSS hacks for Squarespace websites!
My favorite CSS hacks for your Squarespace website
Any of these CSS hacks can be added to your Squarespace website via Design > Custom CSS.
Note: these snippets are specific to the Brine family of templates, so some selectors may need to be changed for other templates.
Create round images
Squarespace has an awesome Image Editor (you can re-size images, flip them, add filters, and more), but there’s one key thing it can’t do: create round images.
But, with a little custom CSS, no problem! To create round images on your Squarespace website, just follow these steps:
First, make sure your image is cropped to square (1:1).
Next, find the block ID of the image you’d like to adjust. (If you don’t have it already, this Squarespace Collection/Block Identifier Google Chrome extension is super helpful for locating your block IDs!)
Then, add this CSS snippet to your Squarespace CSS Editor (replacing #block-id with your specific block ID):
#block-id img {
border-radius: 50%;}And, look at that! You have a round image. Here’s an example of round images I’ve used on our website:
Remove automatic hyphens
Squarespace automatically hyphenates line-breaking text, and unfortunately there’s no way to stop this from your site style settings.
However, add the code below to stop hyphenation across your site. Include the heading styles you’d like to target, and remove any you do not want included.
h1, h2, h3, p {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;}Customize footer font styles
In most Squarespace templates, the footer font styles are inherited from the rest of your site. However, you may wish to incorporate different font styles in your footer—for example, decreasing the footer font size.
Add this CSS snippet to your Squarespace CSS Editor style font in your website’s footer (of course, adjust the selector to fit whichever font style you’ve used in your footer, and adjust the properties and property values as you’d like):
.Footer-blocks p {
font-size: 14px;
text-transform: uppercase;}Hide social share buttons on blog posts
Squarespace blog posts include default social share buttons, like this example:
In your site style settings you can customize the look of these buttons and whether they appear at the top or bottom of your blog post—but you can’t turn them off entirely.
If you’d like to remove these social share buttons from your blog posts altogether, simply add this CSS snippet to your Squarespace CSS Editor:
.BlogItem-share {
display: none;}Bye-bye, share buttons!
Newsletter block button styling
For some reason, the newsletter block button is not easily editable from the Squarespace style editor. It does inherit some characteristics from other button and font styling on your site, but you’re just not able to target all styling of it individually.
If you’d like to customize the styling of your newsletter block button, add this code snippet to your CSS Editor (adjusting the properties and property values as you’d like):
.newsletter-block .newsletter-form-button {
font-weight: 600;
color: #fff;}Hopefully these Squarespace CSS hacks are helpful and solve some of those common pesky design limitations in the code-free Site Styles Editor.
Create a professional website to grow your business & brand
Get my free checklist for optimizing your Squarespace website:
