How to Add Custom CSS to Squarespace [Updated 2024 Guide]

Squarespace has recently rolled out a major update to the dashboard, and let me tell you, it’s caused chaos.

Within the main dashboard menu, the “Design” option is no more. That’s right, Squarespace has moved all of the content and features that sat under the “Design” tab and combined them with the features of the “Page” settings in a brand new “Websites” tab. Confusing right?

What this means is that there’s now a new way to add custom CSS code snippets to a Squarespace website.

This is something that all Squarespace designers NEED to know, so keep reading to find out how to add custom CSS to Squarespace now. I will also share a helpful utility to help you use the custom CSS feature the right way – the Squarespace CSS cheat sheet.

Watch the video

Check out the YouTube video below 👇

The Updated Way to Add Custom CSS to Squarespace

To add custom Squarespace CSS, you now need to navigate to “Website.” By scrolling down through all of your listed pages, you’ll find a new section called “Utilities.”

View fullsize

Under here, there’s an option called “Website Tools,” and it’s here that you’ll find the “Custom CSS” option.

View fullsize

So, to reiterate how to add custom css to Squarespace, navigate to:

“Website” >>> “Website Tools” >>> “Custom CSS” to find your Custom CSS editor.

It’s still the same old “Custom CSS” panel; it’s just a slightly longer journey to find it.

Be sure to save and bookmark this article for future reference in case you head to your Squarespace dashboard and struggle to find the new location for “Custom CSS.” There are other Squarespace coding ideas I’d like to share with you as a designer.

You may have been in a situation whereby you want to apply custom styling to pages of your websites, but you don’t know the right class name to target — you may not even know Squarespace has an inbuilt class name for different page elements. This is where the Squarespace CSS cheat sheet is useful; continue reading for insights.

The Squarespace CSS Cheat Sheet

Understanding the intricacies of CSS can be a bit daunting, especially when adding code to a platform like Squarespace, where the design is already quite sleek and polished.

However, customizing your Squarespace site with CSS can truly elevate its appearance and functionality. The Squarespace CSS Cheat Sheet is a handy reference for those looking to add custom styles to their website. It gives you an overview of different properties to target elements on your Squarespace website.

Here is a summary of this valuable resource:

Common HTML Element Selector

The Squarespace CSS cheat sheet kicks off with common element selectors. These are the bread and butter of CSS — they allow you to target HTML elements on your webpage directly. For instance, to style all hyperlinks, you would use the ‘a’ selector, while ‘em’ is used for italicized text. The cheat sheet also includes selectors for various heading levels (h1, h2, h3, h4), bold text (‘b, strong’), body copy (‘p’), and more.

CSS Class Selector

Moving on to class selectors, these are more specific than element selectors and target elements that have a given class attribute. In Squarespace, certain class selectors are commonly used. The header can be styled using ‘#header,’ while ‘.header-nav-list’ affects the navigation menu. Social icons, buttons, and even specific elements like the announcement bar and product blocks have their own class selectors, allowing for extensive customization.

For instance, if you wanted to alter the look of all the buttons on your site, you’d use the ‘.sqs-block-button-element’ selector. To get more granular, you could target the primary, secondary, or tertiary buttons with their respective class selectors. Hover effects can also be styled using ‘:hover.’ Additionally, there are selectors for e-commerce elements like the product title (‘.product-title’) and product price (‘.product-price’), which are crucial for online stores.

CSS Properties

Knowing the selectors is only half the battle; the cheat sheet also includes common properties and example values to use in your CSS rules. These properties control the visual aspects of your elements — ‘color’ for text color, ‘font-size’ for the size of the type, ‘font-family’ for the typeface, and ‘background-color’ for the element’s background, to name a few. You can adjust the ‘border-radius’ to round the corners of elements or change the ‘opacity’ to make an element more or less transparent.

Moreover, you can use ‘text-transform’ to change the case of the text, while ‘margin’ and ‘padding’ are crucial for controlling the space around and within elements, respectively. These properties are the tools you use to craft the overall look and feel of your site, ensuring that it matches your brand and aesthetic preferences.

Other Elements

The cheat sheet also provides selectors for less common but equally important elements such as the newsletter block, forms, and lightboxes — essential for building a mailing list and generating leads. Each of these components has selectors for their sub-elements, like titles, buttons, and text fields. For instance, ‘.newsletter-form-button’ would allow you to style the newsletter submission button.

Squarespace’s footer and various blocks like the Archive Block and Summary Block also have their class selectors, which is excellent for those who want to ensure consistent styling throughout their site. Selectors like ‘.archive-block’ for the archive block or ‘.summary-item-list’ for the summary block can be used to specifically target and style these areas.

In summary, the Squarespace CSS Cheat Sheet is a valuable resource for anyone looking to customize their Squarespace site beyond the standard options provided. It lists selectors for both common and specific elements, from headers and text to buttons and eCommerce features. Additionally, it provides guidance on using CSS properties to tweak the appearance of these elements to suit your style and the user experience you want to create. With this cheat sheet in hand, you’ll be well on your way to making your Squarespace site truly yours.

However, knowing how to use custom CSS and how to add custom CSS to Squarespace is not enough; you should also equip yourself with the best practices for using CSS. I will list the most important ones in the next section.

7 Best Practices for Squarespace Custom CSS

When using CSS, adhering to a set of best practices can streamline your development process and ensure your website remains accessible and maintainable.

Let’s explore some cornerstone guidelines that will help you write high-quality CSS code:

1. Keep it organized: Organize your CSS in a logical way. Consider separating structure, typography, colors, and responsive styles into sections or even different files if you’re working on a lengthy code. This not only makes your code easier to read but also simplifies the process of finding and debugging specific styles.

2. Use descriptive class and ID names: When using a custom ID or class name, choose ones that reflect their purpose or content rather than their appearance. For example, ‘.menu-item’ is better than ‘.blue-button.’ This helps maintain the code when the design changes, as the name doesn’t depend on the style.

3. Implement comments: Comments are a roadmap for you and anyone else who might work on your CSS. They should explain why certain decisions were made, especially for more complex parts of the code. This is crucial for future updates or when handing off the project.

4. Optimize for mobile responsiveness: With mobile devices accounting for more than 58% of global web traffic, ensuring that your CSS is responsive is non-negotiable. Use media queries to adapt your layout to different screen sizes and test on actual devices when possible. Remember to start with a mobile-first approach, which means designing for the smallest screen first and then scaling up.

5. Stick to a consistent syntax: Whether you decide to put your opening curly brace on the same line as your selector or the next line, be consistent. Consistency in property order (e.g., position, display, font, color) can also help you spot errors and navigate your code more easily.

6. Use shorthand properties: CSS offers shorthand properties that can significantly shorten your code. For instance, use ‘margin: 20px 0;’ instead of specifying each side separately if the values are identical or follow a pattern.

7. Test your code: Always test your code across different browsers and devices. This helps ensure your website’s user experience is consistent, regardless of how users access it.

By following these best practices on how to add custom CSS to Squarespace, you’ll create CSS that not only looks good but is also scalable, maintainable, and accessible — all essential ingredients for a professional and polished Squarespace site.

Frequently Asked Questions

Can you use custom code in Squarespace?

Yes, Squarespace allows the use of custom code to enhance your site’s design beyond the built-in style options. However, it’s recommended to have a solid understanding of coding before integrating custom CSS or scripts.

Where do I add custom CSS in Squarespace?

To add custom CSS code in Squarespace, head to the main dashboard of your website, then navigate to “Website” >>> “Website Tools” >>> “Custom CSS.” Here, you can enter your custom CSS code and save your changes for immediate effect on your site’s appearance.

What can you do with custom CSS?

With custom CSS and code block, you have the power to tailor the look of specific sections on your site. This means you can apply unique styles, such as custom font size or a background color, to just one section rather than the whole page, giving you fine control over the design and feel of your site’s individual parts.

Conclusion

I understand how confusing it can be if you open your Squarespace dashboard and the usual “Design” panel is missing. But as I have shown in this article, Squarespace has recently restructured the website management dashboard; you can now access the custom CSS panel from “Website Tools.”

In addition to knowing how to add custom CSS to Squarespace, you should take time to go through the Squarespace CSS cheat sheet, as I have mentioned. Lastly, don’t forget to follow best practices when writing CSS codes. With a mastery of these tips and hacks, you’re armed to handle your next design project like a pro.

---

📩 Join the inner circle to get exclusive code updates

---

It’s still there, it’s just a slightly longer journey to find it. 

Be sure to save and bookmark this article for future reference in case you head to your Squarespace dashboard and struggle to find the new location for Custom CSS.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?