Using CSS on Individual Pages in Squarespace 7

In making a Squarespace site, you may run into a situation where you want to have a little bit more customization than what Squarespace offers in terms of design.  In this case, you can insert Custom CSS into your website in order to make changes.  However, the information entered in the Custom CSS box loads on every page of your website.  In most cases, this is perfect, as you may want to add a filter to all of your images, or add more padding in your menu.  However, this can backfire when you only want to change elements on one page.  For example, you may want to only change the menu on the home page in order to accommodate your video background, change the styling of the price of your product that is on a huge sale, or add a background image to your newsletter block on a blog page.

Depending on the type of page, implementing the CSS is a slightly different process.  Regardless, you have to manipulate the code in the same way.  When you insert code into the standard Custom CSS box, it is normally formatted like this:

#header { opacity: 0.1; }

To be able to put it on one page, wrap the code in <style></style> tags.  An example of doing this to the previous code is below:

<style> #header { opacity: 0.1; } </style>

Changing CSS on Primary Pages

On all types of pages, when you hover over the page, there is a Settings icon.  Click on it, and and then head to the Advanced tab.  Once there, paste the code that you created earlier into the Page Header Code Injection box like shown below:

This should be perfect in most cases.  However, you may want to be even more specific.  If you on apply this on Blog, Event, or Product pages, it will apply to all of the content within that page.  You may not want every blog to have the same background image for the Newsletter block or all of your prices to have the special Sale color.

Changing CSS on Individual Blogs and Events

Both Blogs and Events operate in the same way and follow the same Draft/Publish system.  In order to add custom code, go into the edit mode of the specific blog or event and create a Markdown block.  In the Markdown block, enter the code you create surrounded by the <style></style> tags.  The cool thing about the Markdown block is that you can continue to type as normal, allowing you to disguise that there is a block there at all, since there will be no extra spacing.  An example of adding Custom CSS to one of my favorite events is below:

Changing CSS on Individual Products

Products are a unique type of page in Squarespace.  To add custom CSS to an individual product, go to the edit menu of that product (where you change the price).  Then, click the Additional Info tab.  From there, it works just like the blogs and events.  Create a Markdown block and enter your code into it surrounded by <style></style> tags.  Here is an example below:

And now you can add custom code on any page at will.  Use your new powers responsibly!