Custom CSS is the most powerful design tool Squarespace gives you, and the most underused. Most people never open it, assuming it needs a developer or a pricey plan. Neither is true. The CSS Editor is available on every Squarespace plan, including the entry-level Basic plan, and with a handful of rules you can change almost anything about how your site looks.
I run Altitude Design, a Squarespace Platinum Partner agency, and Custom CSS is on practically every client build we ship. This is the practical version: what it is, where to find it, how to target the right thing, and the mistakes that cost beginners an afternoon.
What Custom CSS actually is (and is not)
CSS controls how your site looks: fonts, colours, spacing, buttons, hover effects, and the fine details the Site Styles panel will not let you reach. You write a rule, Squarespace applies it on top of your template's built-in styles, and visitors see your version.
What it is not is a place for HTML or scripts. Analytics tags, live chat widgets, and tracking pixels belong in Code Injection, which is a separate tool. A useful way to hold the distinction: CSS is for styling what already exists, Code Injection is for adding new things. Squarespace even recommends you put styles in the CSS Editor rather than wrapping them in Code Injection.
Where to find the CSS Editor
Squarespace moves its menus around more than anyone would like, so the reliable route is the keyboard shortcut: press the forward slash key, type CSS, and the editor opens. If you prefer to click, go to Website, then Website Tools, then Custom CSS. On 7.1 there is also a search icon in the panel.
Here is the plan point that confuses everyone: Custom CSS is free on all plans. It is Code Injection that needs a paid tier (Core and above), because that is where scripts and HTML live. So even on Basic, you can still style your whole site with CSS. You just cannot inject JavaScript site-wide until you are on Core or higher.
7.0 versus 7.1: why targeting differs
If you are on Squarespace 7.1, every section on a page carries a unique data-section-id, which makes targeting a specific section clean and predictable. You can style one section without touching the rest by using that ID in square brackets. On the older 7.0, the structure is block-based and less consistent, and there is a catch worth remembering: in 7.0, Custom CSS does not travel with you when you switch templates, so a template change can leave your styling behind. Most new sites are on 7.1, and it is the friendlier version to write CSS for.
How to find the right selector
The hardest part of CSS on Squarespace is not writing the rule, it is finding the correct thing to target. The trick is to inspect the live site rather than the editor. Open your published page in a browser, right-click the element you want to change, and choose Inspect. The panel that opens shows the class names and IDs attached to that element. You write your rule against those, then paste it into the CSS Editor.
A small example. To change your heading colour, you might write:
/* Make all h1 headings navy */
h1 {
color: #1a2b4a;
}To target one specific section on 7.1, you lean on its ID:
/* Add breathing room to one section */
[data-section-id="your-section-id"] {
padding-top: 80px;
}Changes appear in the live preview as you type, and the moment you save, they are live on your published site. There is no separate publish step for CSS, so treat Save as going live.
The habits that save you
A few practices make CSS far less painful, learned the hard way across a lot of client sites:
- Comment everything. Put a note above each block explaining what it does, wrapped in the comment marks (a forward slash and asterisk to open, the reverse to close). Six months later you will not remember why a rule exists, and comments are how you find it.
- Start small. Change one font size or one colour, save, check it, then move on. Piling in twenty rules at once and finding something broke is a slow way to work.
- Watch your brackets. One missing closing bracket breaks every rule below it, not just its own. If your CSS suddenly stops working, a stray bracket is the usual culprit.
- Keep a backup. Paste your CSS into a plain document as well. The editor makes it easy to delete a chunk by accident, and there is no undo history to save you.
- Stay in your lane. Squarespace's own guidance is that CSS is safest for fonts, colours, and backgrounds. Heavy structural changes can fight the underlying layout and behave unpredictably across devices, so test on mobile before you trust them.
If you would rather not write CSS at all
Not everyone wants to hand-write code, and you do not have to. A visual design extension like SquareKicker gives you a point-and-click panel that writes the CSS for you behind the scenes, so you can adjust spacing, colours, and effects without learning selectors. It is the tool I point clients to when they want control but not a coding lesson. Our SquareKicker Compose review covers how it works, and you can see the wider set of options in our plugins guide and plugins collection. If you are new to adding anything custom to Squarespace, the how to add plugins walkthrough is a gentle starting point.
My advice for beginners
Do not try to learn all of CSS. Learn to inspect an element, change its colour or spacing, comment the rule, and save. That single loop covers most of what a small business site ever needs. Build confidence on the easy wins first, keep a backup, and reach for a no-code tool the moment a change starts fighting you. CSS is a skill worth having, but it should serve your site, not become a second job.
Frequently asked questions
Do I need a paid plan to use Custom CSS on Squarespace?
No. The Custom CSS Editor is available on every Squarespace plan, including the Basic plan. It is Code Injection, used for HTML and scripts, that requires the Core plan or higher.
Where is the Custom CSS Editor in Squarespace?
The quickest way is to press the forward slash key and type CSS, which opens the editor from anywhere. Alternatively, go to Website, then Website Tools, then Custom CSS.
What is the difference between Custom CSS and Code Injection?
Custom CSS is for styling what already exists on your site, such as fonts, colours, and spacing, and works on all plans. Code Injection is for adding HTML and scripts like analytics or live chat, and needs the Core plan or above.
How do I find the right CSS selector on Squarespace?
Open your published page in a browser, right-click the element you want to change, and choose Inspect. The panel shows the class names and IDs on that element, which you then target in your CSS rule.
Does Custom CSS work the same on Squarespace 7.0 and 7.1?
The editor is the same, but targeting differs. In 7.1 every section has a unique data-section-id that makes styling specific sections predictable. In 7.0 the structure is block-based, and CSS does not transfer when you switch templates.
Can I customise my Squarespace site without writing CSS?
Yes. A visual design extension such as SquareKicker writes the CSS for you through a point-and-click panel, letting you adjust spacing, colours, and effects without learning to code.
