How to add Custom CSS to your Squarespace Site
Squarespace allows the user to easily structure and create their website from scratch, without having to learn any HTML, CSS, or Javascript. It has wonderful interactivity and styling features, and includes a "snapping" grid when organizing your page, in order to aid with keeping your content in alignment. While this is great, and in many cases sufficient, you may begin to notice the limitations it presents.
The model of a WYSIWIG (what you see is what you get) editor is intentionally constraining the user, so they are able to create within a format which is relatively easy to control and change. However, you may want to add some custom style enhancements to your site, and this can be done by adding custom CSS.
What is CSS?
CSS is an acronym for Cascading Style Sheets. It is the language used to describe the style of a document written using HTML. It controls the colors, images, fonts, and sizes displayed to the user, largely impacting a user's interaction and experience.
What is HTML?
HTML (HyperText Markup Language) - The code used to add content to a web page. When you add a block, you're adding HTML to your site.
How do I add CSS to my site?
The video below shows how to navigate within the Squarespace menu and add Custom CSS. When you add to the Custom CSS section shown below, the changes with be made universally. We have additionally methods for adding CSS on just one page, or in a specific situation, but we will touch on that later on.
Now, let's talk about what you may want to customize using CSS in Squarespace.
Perhaps you want a background image on all pages of your site, or a special border around your links.
Let's begin with a simple example, modifying the built in HTML tags.
Headers - h1, h2, h3
The modifications you made with custom CSS on the tags above, will be accessible from your "Text Block" in the content block menu.
When a tag is built-in to html, you can reference it in the following manner:
h1{
font-size: 35px !important;
color: #7FFFD4}
The CSS code above tells your site that you would like all "h1" headers to be size 35px (it's important!) and Aquamarine.
Now you will know, each time you select "Heading 1", it will be
size 35 with an Aquamarine color.
The custom CSS will override any other style "tweaks" you may access by using the Style Editor menu.
I hope this short tutorial was helpful on beginning your journey with CSS! We are available to help with any trouble you may run into with your site, and will continue to post additional tips on getting started customizing your website.