How to add HTML & CSS to your Squarespace website


Most, if not all, of my tutorials and how-to guides involve adding custom HTML and/or CSS to your Squarespace website. If you are new to adding HTML and/or CSS, please follow the tutorial below.

Due to recent Squarespace Plan feature changes, you will want the Business plan.

Add Custom HTML to Squarespace website

  1. Select a page you want to Edit

  2. Click on “+” sign OR click on the line bubble to add a Block

  3. Choose the Code block underneath the More section

  4. Remove the default code Squarespace puts into its Code block

  5. Insert the HTML code you want to add

  6. Click the Apply button

Add Custom CSS to Squarespace website

When it comes to adding CSS code to your Squarespace website, you have the option of adding it to your entire website OR to a single page. My personal preference is to add all of your CSS code to the global CSS editor unless you want to do more customization to an already customized module. One example might be if I apply CSS to the Line that makes the padding less that the default padding BUT I want the Line padding decreased even more on one single page.

Add CSS to global CSS editor

  1. From the main menu, go to Design

  2. Select Custom CSS

  3. The CSS editor at the bottom is where you would enter in your CSS code which would be applied globally

Add CSS to a single page

  1. Click on the gear icon for the page you want to add custom CSS to in order to get to the Page settings

  2. Click on the Advanced tab

  3. Enter in the CSS code you want to use

  4. Keep in mind for CSS code entered on the page, you need to insert the <style> tags

<style>
/* Custom CSS Code here */
</style>