Using the CSS Editor

The Custom CSS editor in Style Mode offers you unprecedented control over your custom CSS code in a beautiful editing environment.

Step 1 - Access the Custom CSS Editor

Click the Custom CSS tab in Style Mode to access the CSS Editor.

Step 2 - Write Custom CSS Code

Begin adding your own custom CSS code below any CSS already added for the default style. Make sure to click the Save button to save your changes, or use CMD+S (Mac) or CTRL+S (PC) to save your changes here.

Features & Options

Color Scheme

This option allows you to select from light or dark color schemes for CSS editing as well as a grayscale option.

Minimize and Pop-Out

You will notice that two small icons display on the far right of the CSS Editor; an arrow and a couple of boxes. The arrow allows you to minimize or maximize the editor while the boxes icon allows you to actually pop the CSS Editor completely out into a separate window or tab.

Find & Replace

The Find & Replace icon offers you the ability to search for specific text within your custom CSS code and then automatically replace it in one click.

Undo/Redo

A familiar feature which allows you to undo or redo recent changes.

Variable Access

The $ icon gives you access to the current available style variables for your site. This can come in handy for setting custom element widths to match those of existing style elements. Just select a variable from the list to place it within your code.

Additional Features

The CSS editor also includes options (left to right in the screenshot below) for Outdent/Indent, Commenting, Font Sizes, Line Numbers and highlighting curly braces. These are all accessible with a single click.

Note: Adding or modifying code within your Squarespace site is an advanced modification that will require coding knowledge to complete successfully. Squarespace cannot troubleshoot your custom or 3rd-party code modifications, so we do recommend you use caution when making these types of changes.