How to Use Custom CSS on a Squarespace Site

Updated September 2026 · Written and maintained by the Progression Agency strategy team

The custom CSS panel is easy to find. What causes problems is what people write in it: rules targeting generated class names that change without warning, blanket overrides that alter unrelated pages, and appearance changes that break keyboard navigation. This covers what to try before writing any code, how to write rules that survive an update, the accessibility mistakes worth knowing, and the point at which more CSS is the wrong answer.

How do you use custom CSS on a Squarespace site?

Through the built-in custom CSS panel, which applies your rules on top of the template’s own styles — and the whole skill is writing rules specific enough to work and general enough to survive an update.

The panel is easy to find. What causes problems is what people write in it: rules targeting generated class names that change without warning, and blanket overrides that break unrelated parts of the site.

What should you try before writing any CSS?

Everything the built-in settings offer. Custom CSS that duplicates a setting is a maintenance liability with no benefit.

This is the single most useful discipline here: every rule you do not write is a rule that cannot break during an update.

Check the site styles panel first

Most spacing, type and color changes are settings rather than code, and settings survive updates.

Check whether a section option does it

Layout variations frequently cover what people write CSS for.

Ask whether the change is worth the maintenance

Every custom rule is something to re-test after a platform update.

Consider whether the design should change instead

Fighting a template with code usually means the template is the wrong one.

Check it is not already handled responsively

Overriding something that adapts by design frequently breaks it on other screen sizes.

Keep a note of why each rule exists

Six months later nobody remembers, and unexplained CSS never gets removed.

What makes a custom CSS rule fragile?

Targeting auto-generated class names, relying on element position, over-using importance declarations, and writing rules with no responsive consideration.

Fragile rules do not fail immediately. They fail at the next platform update, usually unnoticed, and usually on a page nobody checks.

The last row causes more site problems than any technical issue on this list. A snippet copied from a forum solved somebody else’s problem on a different template, and its side effects arrive later.

How do you make a rule apply to one page only?

By scoping it to that page’s own identifier rather than writing a global rule and hoping nothing else uses the same element.

Page-scoped rules are the difference between a change you can reason about and a change that quietly alters something on a page you had forgotten existed.

How should custom CSS handle mobile?

Deliberately, with the mobile behavior written rather than inherited — because a desktop rule applied everywhere is the commonest cause of a broken phone layout.

Most site traffic is mobile, so a rule that improves desktop and degrades mobile is a net loss even when it looks like an improvement.

Write breakpoints deliberately

Rather than letting a desktop rule apply at every width.

Test at real device widths

Not by narrowing a browser window, which misses touch behavior.

Remember hover does not exist on touch

Anything revealed on hover is unavailable on a phone.

Watch touch target sizes

Small tap targets are a genuine usability failure, not a preference.

Check text remains legible

Reduced sizes and light colors fail faster on a phone in daylight.

Check nothing overflows horizontally

A page that scrolls sideways on mobile reads as broken.

What are the accessibility risks of custom CSS?

Removing focus outlines, reducing contrast, hiding content visually while leaving it in the document, and shrinking text below legible sizes.

Removing the focus outline is the most common and most damaging: it makes the site unusable by keyboard, and it is almost always done for appearance.

The reduced-motion row is easy to satisfy and frequently overlooked: browsers expose a preference for reduced motion, and honoring it takes one media query.

Does custom CSS affect site speed or SEO?

A small amount of CSS is negligible. Large accumulated stylesheets and rules that cause layout shifts are not.

The bigger SEO risk is not the CSS itself but what people use it for — hiding content, which search engines treat differently from content that is genuinely visible.

How should you organize custom CSS so it stays maintainable?

Group it by page or component, comment every block with what it does and why, and delete rules when the reason for them goes away.

An unmaintained custom CSS panel becomes a file nobody dares to touch, which then constrains every future change to the site.

Comment every block

What it does, which page, and why. Future you will not remember.

Group by page or component

Rather than appending each new rule to the bottom.

Date significant additions

So the accumulation has some history.

Remove rules when their reason ends

Deleted CSS cannot break anything.

Keep a copy outside the platform

So the work is not only in one panel.

Re-test after platform updates

Especially anything targeting generated class names.

When should you stop using custom CSS and change something else?

When the amount of code needed to make a template behave is larger than the work of choosing a template that behaves that way already.

Fighting a template is the most common expensive mistake here, and it compounds: every subsequent change has to work around the accumulated overrides.

The bottom row is the real cost. Customization that makes a business afraid to update its own platform is a security and maintenance problem rather than a design one.

What should you do before every platform update?

Note what you have customized, take a copy of the CSS, and check the customized pages afterwards — particularly anything targeting generated class names.

Ten minutes of checking after an update catches problems that otherwise sit unnoticed for months on pages nobody visits daily.

What can custom CSS not fix?

Anything that is a content or structure problem: unclear copy, a page that does not say what the business does, or a site organized around the owner rather than the visitor.

This is worth stating plainly because a great deal of custom CSS is written in pursuit of a conversion improvement that styling cannot deliver.

Only the last row is even partly a styling problem, and the fix there is as much editorial as visual. CSS makes a page look the way you intend; it cannot make the page say something it does not say.

Canva: magic eraser, seamless carousels, custom fonts, and Snappa

Design-tool questions arrive constantly alongside site-customization ones, because the same person is usually doing both. These are the ones that come up most.

Magic eraser in Canva

Magic eraser Canva offers is a Pro feature, so Canva Pro magic eraser access is required — which is the answer to most of the confusion. Where to find magic eraser in Canva: open an image, choose Edit, then the retouch tools. How to use magic eraser well is a matter of brushing slightly beyond the object rather than precisely around it, because the fill works from surrounding pixels.

Seamless Instagram carousels in Canva

How to make a continuous Instagram post on Canva means designing one wide canvas and slicing it, rather than designing separate panels. How to make a continuous Instagram post Canva handles well: set a canvas that is a multiple of the post width, design across it, then export as separate frames. A seamless carousel Instagram users can swipe without a visible join needs the slice boundaries planned before the design, not after. Seamless multi post Instagram layouts and a seamless Instagram carousel Canva produces are the same technique under different names.

Uploading fonts to Canva

Canva fonts upload is a Pro feature under Brand Kit. How to upload fonts to Canva: Brand Kit, then Fonts, then upload the file. Can you upload fonts to Canva on a free account — no, which is the answer people are usually looking for. Canva font upload accepts common desktop formats, and the license you hold for the font still governs commercial use once it is there; upload fonts to Canva you actually have rights to.

Canva versus Snappa

What is Snappa: a lighter graphics tool aimed at social and ad creative. The Snappa app covers a narrower set of use cases with less depth than Canva and, for some people, less friction because of it. Canva vs Snappa comes down to breadth against simplicity — if you need brand kits, video and document work, the answer is Canva; if you need social graphics quickly and nothing else, Snappa is defensible.

Frequently asked questions