Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using the CSS Editor

If you have coding knowledge and want to customize your site beyond the adjustments you can make in the Style Editor, you can add CSS code using the CSS Editor.

CSS should only be used to change fonts, colors, and backgrounds. Other CSS changes could potentially harm your site.

Before you begin

Review our recommendations on what you should and shouldn't change with CSS in Custom code FAQ.

Note: Third-party customizations fall 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. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. CSS customizations can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:

Step 1 - Open the CSS Editor

In the Home Menu, click Design, and then click Custom CSS.

You'll see a warning above the CSS Editor that modifying CSS could break your design. 

Step 2 - Add CSS code

Now that the CSS Editor is open, you can begin writing your code.

To open the editor in an expandable window, click Open in Window.

You'll see line numbers as you add more code to help you reference pieces of your CSS code.

Syntax errors will display at the bottom in red.

Note: Squarespace’s CSS Editor syntax checking system is a parser. Rather than validating against a set of rules, the parser tests what's actually going to work in different browsers. Even if your code doesn’t return an error on a CSS validator, the parser will flag it if it determines that a line may not work the way it's intended. If you see a syntax error, revise the CSS to ensure it’s written and formatted correctly and nothing’s missing.

Step 3 - Upload files (optional)

You may want to use custom images or font files. The CSS Editor has a file upload area where you can upload these assets.

Note: The Custom Files area accepts valid image files (.jpg, .png, .gif) or font files (.ttf, .otf, .woff). It doesn't support .svg files.

To open this area, click Manage Custom Files under the CSS Editor.

Once the Custom Files area is open, click and drag files into that area or click the blank space to open a file selection menu and select files from your computer.

Step 4 - Use uploaded files (optional)

If you uploaded image or font files in the Custom Files area, you probably want to use them in your code.

The quickest way to do this is to write your code to the point where you need the file url to reference. Then, leave the cursor where you want to place the URL in the code and then click the file. The CSS Editor will automatically paste the direct URL for that file so you can reference it in your code.

Step 5 - Save changes

When you're finished, click Save to publish your changes.

Note: Custom CSS doesn’t transfer when you switch templates.
Was this article helpful?
14 out of 29 found this helpful
Using the CSS Editor