Advanced style options

You can customize most areas of your site in Style mode by choosing a template and style, then using the options in the Fonts, Colors & Sizes tab to create a custom style.

Style mode has a few advanced options for styling your site with custom code. This guide goes over those options.

Note: Custom code, including CSS, falls outside the scope of our support. This means that we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. CSS customizations can also cause display issues with future updates to our platform.


Add CSS elements

In the Settings tab, click Edit Customizable Elements to see a list of your site's CSS elements. Although you can edit any existing style element by clicking it, we strongly recommend that you don't make changes to these elements, as they may stop working.

To add new style elements to the drop-down menu in the Fonts, Colors & Sizes tab, scroll to the bottom. Add the name and selector, then click Update/Add Element.

  • New Selector Name - The name that appears in the Fonts, Colors & Sizes drop-down menu. Use the format Heading | Element Name.  
  • New CSS Selector - The CSS selector for the element.


Example - Style the first letter in each paragraph

To style the first letter in each paragraph and header in your main content area, you could add a CSS element like this:

Display Name:

Basic Layout | First Letter

CSS Selector:

#contentWrapper p::first-letter, h2::first-letter

After styling this element in the Fonts, Colors & Sizes tab, your page might look like this:


Add style variables

In the Settings tab, click Edit Style Variables Elements to see a list of the style variables for your site. You can use these variables in your custom CSS.

Check Read Only to prevent any variable from appearing in the Banner & Navigation or Fonts, Colors & Sizes tabs.

To add a new variable, scroll to the bottom. Add the selector name and internal name, and choose either Color or Pixel. Then click Update/Add Element. You can now reference this variable in your custom CSS with this format: $InternalName$

Tip: The internal name must begin with a letter, and can only contain letters, numbers, and the _ character.


Remove system CSS

In the Settings tab, check Complete CSS Override to remove all Squarespace system CSS for that template style. The style will look very different.

Uncheck this option and click Save Changes to restore the system CSS.

Equal column heights

In the Settings tab, check Equal Column Heights to force your sidebars and content area to extend to the same height, no matter how much content they contain.

Tip: This option can cause positioning issues or cut-off text in your sidebars or main content area. If you're seeing issues like this, try unchecking this option.

Custom CSS

Add CSS code in the Custom CSS tab. CSS should only be used to change fonts, colors, and backgrounds.

To learn more, visit Using the CSS Editor.


Tip: For additional help, visit
Was this article helpful?
0 out of 0 found this helpful