Easy CSS tricks in Squarespace
If you have worked in Squarespace before, you undoubtedly understand the limitations it can present. You are restricted to templates and limited styles, which is both the beauty and disadvantage of this platform. In this tutorial, Meg Summerfield shows us how to overcome some of those obstacles through modifying the CSS in your Squarespace site. I know I lost some of you through just mentioning “CSS,” but don’t fear, Meg has made this tutorial easy to follow along and applicable to any Squarespace site, regardless of which template you are on.
Make sure you follow along through watching the video, and downloading the beautiful PDF walking through the CSS modifications made in the video tutorial, as well as a few others (including buttons!) that you can make to your site.
Free download
PDF tutorial to learn more Squarespace CSS.
What is CSS?
If you compare CSS building to a house, CSS is the interior designer’s job, and the HTML is the construction + general contractor’s job. In this tutorial we won’t make structural changes to your Squarespace site, but we will change how the experience looks to your audience. CSS is the language used to define the presentation of your website.
Let’s dive into a few small CSS changes you can make to your site today!
How to inject CSS
In Squarespace there are a few ways to inject CSS into your site. The primary way that you can modify the CSS is through the Design > Style Editor panel. The tools listed here allow you to change fonts, colors and other attributes that create the CSS for you through the user interface.
Another alternative is to create custom CSS that overrides all of the “style editor” CSS. Navigate to Design > Custom CSS to inject your own CSS.
How to find your CSS tag for an element you want to change
The best source for locating the specific CSS elements you want to change is in the Google Chrome browser. The reason is that it is built with a feature that allows you to inspect your website and look at the code + CSS live.
To do this, simply select the area that you want to change and right click > Inspect in Google Chrome. This might seem intimidating when first opening this tool, but once you know what you are looking for it becomes familiar and such a robust tool to take advantage of. You can hover over various parts of your site and locate the CSS id you are searching for. In our example, we were searching for the H2 tag so that we could manipulate it for one single page, rather than globally across the site. This comes in handy if you would like a different font style for one page on your site, that might have a different requirement than the other pages.
You can also modify the CSS directly in Chrome to test out the adjustments prior to applying to your site. This does not actually make the adjustments permenant, but simply allows you to trial run to make sure you are adjusting the right tag. This is helpful as well since Chrome will predict the elements you want to modify, and pop up suggestions on the specific changes (ie: text-transform, etc). That way you don’t have to always look up the specific CSS, and instead Chrome helps you by providing options to guide you.
How to change the CSS on one single page, rather than globally
When you navigate to your page and edit within Squarespace, you can add a code block to the top of the page. This is where you can edit the CSS directly. For the H2 tag CSS change on one page, here is what we inserted in the code block on the one page we wanted to change:
<style> h2 { font-size: 35px !important; } </style>
Previously, Meg’s H2 tag was 13px, so we modified it to stand out more on this page. This allows you to change the font size on one specific page of your site, and the other H2 tags on your site will stay the same as what you’ve inputted on your style editor design panel.
Adding your own CSS labels
To really make your site custom, you can add your own CSS labels. To do this, you need to think outside the box and create labels that you want to reference throughout your site. In the video, Meg walked us through how she created a custom H4 label, so she could add another header tag to her site. Just a disclaimer, this H4 does not pop up on your text panel, but works when injecting your custom CSS into your pages.
First, navigate to Design > Custom CSS to add the new tag. You can name the tag whatever you would like, but in this example we named it h4. Here is the markdown included on Meg’s site:
h4 { font-family: “brandon-grotesque”; letter-spacing: .2em; color: #d6788f; text-transform: lowercase; font-size: 20px; font-weight: 300; }
How to use your own CSS labels
Once you’ve created your own label, it is time to put it to action! In order to do this, you will add a “markdown” block in Squarespace on your page. To use the new CSS tag we created (h4), you will add the following to your markdown block:
<h4>Call to action</h4>
Well, that was easy, huh? You can even insert a link directly within the markdown, without messing with additional code. Squarespace will create that for you. So now you have your own h4 tag that you can use without having to write code or CSS each time.
Resources to learn basic CSS
We hope that you really enjoyed this tutorial on modifying CSS on your Squarespace site. I know that I walked away feeling even more confident in how to modify my own, or client’s, sites! Don’t forget to download the PDF above to learn even more CSS modifications for every Squarespace site.
Comment