How to Use Custom CSS on Squarespace

Squarespace gives you a solid visual editor, but sometimes you want surgical control: a tighter heading scale, bolder buttons, a calmer header. That’s where Squarespace custom CSS shines. In this guide, you’ll learn where to add CSS in Squarespace 7.1, when to use Code Injection, and how to keep your selectors clean and safe.

If you’re starting with typography, see our practical companion on changing type in Squarespace: Change fonts the right way (fonts, weights, and fallbacks). If you need interaction patterns, our pieces on adding anchor links and simple image lightboxes show applied CSS you can extend.

This isn’t about clever one‑liners. It’s about stable styles, quick testing, and easy rollback.

Overview

Adding custom CSS lets you:

• Tune typography — tighten line heights, refine heading sizes, adjust letter‑spacing.
• Standardize UI — align buttons, forms, and cards across templates and blocks.
• Calm the chrome — soften or restyle header/nav, announcement bars, and section padding.
• Target specifics — style a single page, section, or block without collateral damage.

Squarespace 7.1 supports site‑wide CSS via the Squarespace CSS editor and page‑level targeting through Code Injection. Use CSS sparingly and intentionally. Keep specificity low. Favor clarity over cleverness. For a refresher on why, see MDN: CSS specificity.

Apply style changes instantly with MicroEdits

Most people don’t want to spelunk through templates, copy code, and hope nothing breaks. MicroEdits lets you describe the change in plain English on your existing Squarespace site and see it happen. No setup. No theme surgery. No paste‑and‑pray.

• Describe what you want: Make all buttons bold and slightly larger on mobile, Reduce header padding on desktop, Round image corners on the blog.
• See an instant preview and a shareable link. If you don’t like it, roll it back. If you love it, apply it.
• Works across any Squarespace 7.1 site, with room to integrate front‑end tools like Calendly or Hotjar when you need them later.

You keep your flow. MicroEdits handles the heavy lifting and gives you the safety net.

Where to add CSS and why

Squarespace offers a few doors for CSS. Use the right one for the job.

Notes:

• Prefer Design → Custom CSS for most changes. It’s the cleanest spot for site‑wide rules. See Squarespace Help Center for their overview of custom CSS.
• Use page‑level Code Injection for single pages. That’s your scoped, low‑risk sandbox.
• Reserve site‑wide Header Code Injection for essentials you truly need in the head: a font face you host or a tiny critical CSS snippet. For specifics, Squarespace’s Code Injection guide explains the mechanics.

Organizing and scoping selectors

Messy CSS ages fast. Tidy CSS lasts.

• Label sections with comments. Date your changes, state intent, and leave breadcrumbs.
• Use variables for repeat values. Define color and spacing tokens once; reuse everywhere.
• Keep specificity low. Target minimal, composable selectors. Escalate only when required.
• Scope deliberately. For single pages, use the page ID on the body to avoid side effects.

Minimal structure you can paste into your Squarespace CSS editor:

/* =========================================
   Custom CSS — Squarespace 7.1
   Author: Your Name
   Started: 2025-08-28
   Notes: Keep specificity low; prefer variables.
========================================= */

/* Tokens */
:root {
  --brand: #1a1a1a;
  --accent: #3b82f6;
  --accent-contrast: #ffffff;
  --radius: 10px;
  --tight: 1.2;
}

/* Utilities (opt-in, lightweight) */
.u-radius {
  border-radius: var(--radius);
}
.u-hide {
  display: none !important;
} /* use sparingly */

/* Sections — add only what you use */
/* Header */
/* Buttons */
/* Headings */
/* Images */
/* Forms */

To scope to a single page (replace the ID):

/* Page-specific styles (About page) */
body[data-page-id="5f1234567890abcd12345678"] .sqs-block-button-element {
  background: var(--accent);
}

Tip: Find data-page-id on the body tag with your browser’s inspector.

Targeting common elements

Below are safe, copy‑paste snippets that play nicely with Site Styles. Adjust values, not selectors, unless you have a strong reason.

• Headings

/* Headings — balanced rhythm */
h1,
h2,
h3 {
  line-height: var(--tight);
  letter-spacing: -0.01em;
  color: var(--brand);
}

/* Optional: slightly smaller h1 on mobile */
@media (max-width: 640px) {
  h1 {
    font-size: clamp(28px, 6vw, 36px);
  }
}

• Buttons (blocks and nav buttons)

/* Buttons — unify look */
a.sqs-block-button-element,
.Header-nav-item--btn a {
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius);
  padding: 0.75em 1.1em;
  font-weight: 600;
}

/* Hover/focus states */
a.sqs-block-button-element:hover,
a.sqs-block-button-element:focus,
.Header-nav-item--btn a:hover,
.Header-nav-item--btn a:focus {
  filter: brightness(0.95);
}

• Header/nav (Squarespace header CSS)

/* Header — compact on desktop */
.Header {
  padding-block: 8px; /* reduces vertical padding */
}

/* Nav links — calmer color and spacing */
.Header-nav .Header-nav-list a {
  color: var(--brand);
  padding-inline: 12px;
}

/* Active/hover nav states */
.Header-nav .Header-nav-list a:hover,
.Header-nav .Header-nav-list a[aria-current="page"] {
  color: var(--accent);
}

• Image blocks

/* Image blocks — subtle rounding and shadow */
.sqs-block-image img {
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

• Sections

/* Section spacing — slightly tighter */
section[data-section-id] .section-background + .content-wrapper,
section[data-section-id] .section-content {
  padding-block: clamp(48px, 7vw, 96px);
}

• Respect motion preferences

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

• Responsive adjustments

/* Tablet refinements */
@media (max-width: 960px) {
  .Header {
    padding-block: 6px;
  }
  .Header-nav .Header-nav-list a {
    padding-inline: 10px;
  }
}

/* Mobile refinements */
@media (max-width: 640px) {
  a.sqs-block-button-element {
    width: 100%;
    text-align: center;
  }
}

Want a practical tweak? Many announcement bars feel cramped. See our focused tips in Tuning the announcement bar for clarity and contrast.

Testing and rollback

• Preview on real breakpoints. Desktop, tablet, mobile. Don’t trust a desktop browser’s tiny window alone.
• Hard refresh and clear cache. Squarespace assets ride a CDN. Use a hard reload and, if needed, a private window.
• Check contrast and motion. Verify legibility and that your reduce motion styles behave. Reference MDN: prefers‑reduced‑motion.
• Keep a changelog in comments. Timestamp edits in your CSS. Future‑you will say thanks.
• Roll back fast. If a change causes splash damage, remove the block you added. MicroEdits gives you previews and one‑click reverts so you can move quickly and safely.

FAQ

Does custom CSS override Site Styles?

Yes. Custom rules cascade after Site Styles and can override them—especially if your selectors are more specific. Keep your selectors minimal and avoid blanket * rules. If you find yourself using !important a lot, step back and lower specificity elsewhere instead.

Should I put CSS in Design → Custom CSS or use Code Injection?

Use Design → Custom CSS for site‑wide styling. Use page‑level Code Injection for one‑off pages (campaigns, landing pages) so changes don’t leak site‑wide. Reserve site‑wide Header Code Injection for must‑load‑early items like font faces or tiny critical CSS, as it affects every page.

How do I target a single page safely?

Scope with the page ID on the body. Example: body[data-page-id="..."] .sqs-block-button-element { ... }. This keeps styles fenced in. Find the ID using your browser’s inspector on that page. Avoid template‑wide classes unless you truly want a site‑wide change.

Will custom CSS slow down my site?

Tiny, focused rules won’t. Bloat and overly specific selectors can hurt maintainability more than performance. Prefer small, reusable patterns and test on mobile. Avoid loading large external CSS in the head unless necessary. Keep it lean and close to the problem.

How do I style header navigation across templates?

Target stable header hooks used in 7.1, like .Header and .Header-nav. Keep rules general: colors, spacing, states. If a template differs, add a narrow, template‑specific tweak under a commented block. Test on desktop and mobile to catch sticky‑nav variants.

I can’t override a stubborn style. Use !important?

Use it sparingly. First, lower your selector’s nesting and ensure it’s loaded after Site Styles. Try a slightly more specific selector (e.g., include the block class). If all else fails, a single !important on a targeted rule is acceptable—document why in a comment.

Can I load custom fonts with CSS?

Yes. You can load fonts via @font-face in site‑wide Header Code Injection or link to a hosted stylesheet. Keep file sizes reasonable and include fallbacks. Apply fonts in the Squarespace CSS editor, then test weights and rendering on mobile and Windows for crisp text.

If you’re editing more than once in a blue moon, MicroEdits saves time and stress. It turns I wish this looked better into a change you can see—then keep or revert in seconds.