Roundup No. 4 // A little code goes a long way. A lot of code goes sideways.
Seven habits that keep custom CSS on a Squarespace site tidy, targeted, and easy to undo.
Short answer: Custom CSS lets you change things Squarespace's settings do not offer, like the styling of one specific section or button. Add it in the Custom CSS panel, target elements by their ID so nothing else changes, check it on a phone, and keep a backup. Use it for finishing touches, not for rebuilding the layout.
CSS is how a Squarespace site goes from template to bespoke. It is also how a perfectly good site gets broken at 11 p.m. These are the rules I work by.
1. Try the built-in settings first
Squarespace's Site Styles panel controls fonts, colors, spacing, and buttons across the whole site. If a setting exists, use it. Settings survive platform updates; a clever workaround may not. Save CSS for what the settings cannot do.
2. Know where the code goes
Sitewide styles go in the Custom CSS panel, under Website Tools at the bottom of the Pages menu. Scripts and anything in HTML go in Code Injection, right beside it, which requires a plan that supports it. Keeping the two separate makes problems far easier to find.
3. Target by ID, not by guesswork
Every section and block on a Squarespace 7.1 site has its own ID. Targeting that ID changes one thing and leaves the rest of the site alone. The Squarespace ID Finder extension for Chrome shows those IDs with one click, no digging through code.
/* Homepage intro section only */
section[data-section-id="YOUR-SECTION-ID"] h2 {
letter-spacing: 0.02em;
}4. Limit a change to one page
Want a style on the Services page but nowhere else? Each page has a collection ID on its body tag. Put it in front of your selector.
/* Services page only */
#collection-YOUR-PAGE-ID .sqs-block-button-element {
border-radius: 0;
}5. Check your phone, every time
More than half of your visitors are on a phone, and a change that looks right on a laptop can crowd a small screen. Squarespace 7.1 switches to its mobile layout at 767 pixels, so that is the breakpoint to write for.
@media screen and (max-width: 767px) {
section[data-section-id="YOUR-SECTION-ID"] h2 {
font-size: 2rem;
}
}6. Label everything and keep a backup
A comment above each chunk of code (what it does, which page it is for) costs ten seconds and saves an hour next year. Before any big change, copy the entire panel into a plain text file. Squarespace has no undo history for custom code.
7. Know when CSS is the wrong tool
If you are writing dozens of lines to force a section into a shape it does not want, the layout is the problem, not the code. Rebuild the section instead. And go easy on !important; when you need it on every line, something upstream needs fixing.
Frequently asked questions
Where do I add custom CSS in Squarespace?
In the Custom CSS panel, which applies styles across the whole site. To limit a style to one page or section, target that page's or section's ID in the code.
Will custom CSS break my Squarespace site?
It can change how things look, but it cannot delete your content. If something goes wrong, remove the code you added and the site returns to how it was. This is why a backup matters.
Does Squarespace support help with custom CSS?
No. Custom code falls outside Squarespace's support, so you or your designer are responsible for maintaining it.
How do I find a section ID in Squarespace?
Use a browser extension like Squarespace ID Finder, or right-click the section, choose Inspect, and look for data-section-id.
Do I need to know CSS to have a custom-looking Squarespace site?
No. A designer can add it for you, and a well-built site should not need you to touch it afterward.
Template winning the wrestling match? Finish Your Site picks up where you got stuck and gets it launched. Starting from scratch? See Websites, or browse the portfolio to see what a little custom code can do. The rest of my toolkit is in Roundup No. 1.
