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:
Basic Layout | First Letter
#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.
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 code.squarespace.com/cssg.