CSS (Cascading Style Sheets) is a set of rules used by browsers to display documents written in HTML. Utilizing custom code allows you to make subtle customizations or improvements that cannot be accomplished through Squarespace’s user interface.
CSS also can help avoid costly mistakes that could cause your site to break if Squarespace changes something in their design system. Read on to discover how CSS works on a Squarespace website!
1. Use the Style Editor
If you are familiar with Squarespace’s platform, chances are you have some experience using its Site Styles panel under Design > Site Styles in Design menu (Design > Site Styles). But there is one simple trick you can employ that may make this process less cumbersome: just one small modification could make all this simpler!
No secret here – but few know about this trick! To set a consistent look across your content, set the “Style Editor” as your “Default Style.” This will apply to every page on your website, with new pages created automatically assuming its style – making this an effective way to ensure uniformity!
Clicking “Style Editor” from the Design menu will open a panel with many adjustable options, including global fonts and color palettes as well as the capability of adding custom CSS.
The Style Editor offers many advantages, one being its ability to allow you to insert CSS code snippets. But there’s a catch!
Use of Squarespace’s Style Editor can be one of the easiest ways to add custom CSS, but it has its own set of challenges. When adding large amounts of code, managing it all may become cumbersome; and when updates break your custom CSS, fixing it can be hard or even impossible.
There are other methods available for adding CSS, but they’re more complex and cumbersome than the Style Editor. They require editing HTML code on your website, which could prove challenging if you are unfamiliar with it.
No matter which method you select, it is crucial that your changes are tested in multiple browsers before saving them and updating your CSS if it stops functioning correctly. An auto-updating plugin is the safest way to ensure your CSS snippets remain current. Paul is an established Squarespace Expert and leader of Squarespace Circle Community where he inspires and engages creatives. Paul founded SF Digital; creating trusted products designed to help Squarespace creatives increase sales and engagement with their websites.
2. Use Code Injection
When making more subtle modifications to your site’s CSS than can be accomplished via Squarespace’s Style Editor, code injection may be your go-to solution. Code injection enables you to place specific snippets directly in each page’s head> tag for easier implementation. This method is the ideal choice when adding small changes that don’t necessitate site wide changes (e.g. removing underline from links or stopping hyphenation in heading text). One drawback of using custom code injection is its accessibility; anyone working on your site could potentially add their own code injection, making you responsible for keeping track of all pages with custom code and changing as necessary. Furthermore, without LESS Syntax support for code injection snippets it may break with browser version upgrades or Squarespace’s system changes.
Code injection’s main drawback is its inaccessibility across all templates. While blogs typically utilize blog-specific templates, other layout types like collection pages or auto layouts might use different HTML for their head> tags and therefore your code might not function correctly on those pages.
So if you switch templates, using only code injection for larger changes may help ensure less confusion about how your site is laid out and where any custom code may apply.
Coding injection to add CSS may seem cumbersome at first, but it can provide more control than what can be had through Squarespace Style Editor and Block Editor alone. By following instructions carefully, you’ll have full access to everything your website offers – even using custom CSS to personalize even more aspects of its design!
Have you tried Squarespace’s code injection feature to add CSS? What results have you seen? Share with us in the comments below!
3. Use the Custom CSS Panel
Squarespace’s Custom CSS panel gives you the power to make targeted updates without risking unnecessary hassle later. For instance, adding snippets that change font sizes only for specific block types or areas can help save time when making frequent edits – and also reduce headaches!
This panel is also great because it will inform you if any part of your code is invalid, such as missing closing brackets. This feature can be especially beneficial to novice users of CSS who may not know how to implement these adjustments themselves.
To use the Custom CSS Panel on a desktop computer with Chrome installed (or another browser supporting DevTools). To access your site’s backend, click “Website” in the top left corner of your dashboard, scroll down through Website Tools until you reach Website Custom CSS, then click on Custom CSS at the end.
Here, you can enter any valid CSS code snippet you may have. Be sure to test it in multiple browsers and both mobile and desktop before going live with your code – remembering that Squarespace doesn’t consider custom code when updating their platform and any updates may cause disruption for it – should they change something which breaks it, you will have to find a solution yourself.
Simply click on the icon at the bottom of your website’s pages, which will open overlays displaying which sections or collections the CSS applies to, and copy and paste their ID numbers directly into Custom CSS for use on that block, section or collection.
Squarespace’s custom CSS panel is an amazing way to make targeted changes, making the platform perfect for sites with lots of content. I often receive requests regarding how to alter specific aspects of a page – such as adding borders only to certain photos or changing font colors on contact forms in certain areas – and this solution often proves the answer.
4. Use a Plugin
Plugins offer a quick and safe way to integrate custom CSS into your Squarespace website, often more sophisticated than little code snippets within Squarespace itself and sometimes with features like auto-update. They’re an effective way of eliminating the hassles and headaches involved with writing and maintaining custom CSS yourself!
Before using a plugin, be sure to ensure your goal can’t already be accomplished within Squarespace without custom CSS. If possible, utilize native functionality rather than plugins or custom code; any time Squarespace updates something (even changing a class name), your customized solution may become obsolete and no longer function correctly.
Most plugins operate by adding a rule to the CSS file and assigning a class to an element you wish to modify, then when hovering over this element the CSS rule appears in a pop-up window and can be edited accordingly to change its behavior.
A key advantage of using plugins is their ability to centralize all your code in one convenient location, while being faster and more reliable than using Page Header or Custom CSS Panel as changes are automatically applied in real-time.
To add a CSS plugin, hover your cursor over where you would like the code block, until a plus sign appears, then select Add Code >.
Add any code you like directly into the text field of the code block for easy integration on your website.
When creating your own CSS, try to utilize selectors with low specificity; this means avoiding descendant selectors (that select elements nested within an element) and chained selectors (that select multiple attributes or classes) whenever possible.
Utilizing these techniques will ensure your custom CSS does not break when Squarespace updates their system or you switch templates. Furthermore, testing both versions of Squarespace Editor is recommended in order to get an idea of its behavior.
Remember, while Squarespace Classic Editor allows for both HTML and custom CSS editing, certain forms of HTML require a Business plan or higher in order to add them. Furthermore, certain forms of custom CSS require such as those which modify your DOM (data object model).
