How to set up a style sheet in Squarespace

Getting your website set up on Squarespace is easy, but time consuming, especially if you are creating the layout of your pages at the same time your putting in the fonts and colors. Flipping back and forth between those two tabs in the back end of your Squarespace is taking way more time than necessary and pretty annoying, to be honest.

 
How to set up a style sheet in Squarespace to save time when designing your own website.
 

But, there’s one simple way to speed up this process, and that’s setting up a digital version of your brand stylesheet. That might sound a bit complicated but it’s really simple and easy to implement.

This needs to be one of the first steps in your design process. It might seem tedious at first, but you are going to love this because it will…

  • Speed up the time you spend designing your site

  • Help you see the big picture from the get go

  • Help you see the styles in relation to each other

  • Let’s you experiment without ruining your entire site. (Note: These changes will be live, but you can see how they look on one page and go back to the old settings if needed.)

This is such a simple tutorial, watch this quick video (or scroll down to see the written steps) to see how to set up this page on your site and save yourself so much time.

1- Create a new in the unlinked section called: BANNER STYLES.

2- On the new page:

  • Add a text box and copy and paste this text: 


This is heading one.

This is heading two.

This is heading three.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 


  • Then add buttons, one of each size - small, medium, large.

3- Now we need to duplicated this page, by clicking on the wheel icon (setting for the page) and scrolling all the way to the bottom. Name the duplicated page STYLES.

On this new page we want to add 5 image blocks using 5 different types of images blocks. (Just skip “inline” because it doesn’t have any additional settings to update.) 

4- In the unlinked section you want to add an index and then drag both pages so they are stacked together.

4- Add a banner image to the background of the first page we titled BANNER STYLES. Be sure to use an image that has the same colors and tone of the pictures you intend to use across the whole site.

5- Now you want to disable this page, so no one else accidentally stumbles upon it. Do this in the settings for the Index page and uncheck the box next to enabled. Now this page won’t show anywhere for viewers to see but you always have access.