Adding Custom CSS to a Squarespace Site

Sometimes it’s necessary to add custom CSS to a Squarespace site to get the exact look we are after. Squarespace allows for this by providing for that Custom CSS in the Design Menu.

Design > Custom CSS

The Custom CSS screen is used to add and apply custom CSS styles. In order to target specific parts of your site you will need to make use of Squarespace’s section and block IDs.

If you are unsure how to find these IDs check this post.

If we take the summary block on the bottome of this page as an example, this is how we would Change the Post title

The ID of the element/block we wish to target

#block-yui_3_17_2_1_1626925595768_3658

The class for the title

.summary-title

And the code we add to our Custom CSS page would be a combination of these elements.

This code makes our title all capital letters, centers the text, and creates some even space around the title.

#block-yui_3_17_2_1_1626925595768_3658 .summary-title{
  text-transform:uppercase;
  text-align:center;
  padding:1rem;
}