Adding custom CSS code to your Squarespace website


Making small changes and tweaks here and there on your Squarespace site is really simple! Different types of code (HTML, CSS and Javascript) can be added to a number of different areas of your Squarespace site to change certain attributes of blocks and content. The simplest of changes can be made by inserting CSS code into Squarespace's CSS editor. 

Be warned though! Adding custom code to your site incorrectly can mess things up, and once you start customising your base template, Squarespace Customer Care won't provided any troubleshooting or support for these areas. 

So here's our guide on how to insert CSS code in to your website. It is provided without warranty, Hive Social cannot be help accountable for mistakes made as a result of incorrectly inserted CSS code. We would, of course, be more than happy to help with any issues that you are having. 

What is CSS?

CSS stands for 'Cascading Style Sheets' and simply put, it is the languages used to instruct your web browser how to display the elements of a web page. 

Why Use CSS?

There are a number of advantages to using CSS over other types of language, most notably:

  • CSS saves time
  • Pages load faster
  • Easy maintenance
  • Superior styling options to HTML
  • Multiple Device Compatibility 
  • Global web standards
  • Offline Browsing
  • Platform Independence 

Getting Started

When choosing which template to use it is important not to worry too much about what content is included in the demo site on Squarespace's template page. Your decision should be based purely on the features, structure and the overall functionality.

Before you start thinking about adding CSS to your Squarespace website you need to make sure that you have chosen the most suitable template and have carefully explored all of the styling options available to you within the Style Editor.

Where to insert CSS

On squarespace you can insert CSS in one of two places: the CSS Editor and individual Page Header Code Injection area. The best place to start is the CSS Editor as, generally speaking, this will effect your entire site. Squarespace's CSS Editor checks the code you're inserting and highlights any errors. 

To get to your CSS Editor you need to head to: 

Design > Custom CSS > Insert code snippets in the main window