Squarespace Custom CSS

How to Access Custom CSS in Squarespace

Go to Design > Custom CSS in your Squarespace dashboard. This opens a code editor panel where you write CSS rules. Any CSS you add here overrides the template's default styles and applies to every page on your site. Changes appear in the live preview immediately as you type, which makes testing fast and iterative.

The Custom CSS editor supports standard CSS syntax including selectors, properties, media queries, and pseudo-classes. It does not support Sass, Less, or other CSS preprocessors - write plain CSS only.

How to Find CSS Selectors in Squarespace

Using Browser Developer Tools

Right-click any element on your live site and select Inspect (or Inspect Element). The browser's developer tools open and highlight the element's HTML, showing its CSS classes, IDs, and current styles. Copy the class name and use it as a selector in your Custom CSS. For example, if the element has class header-title, your CSS selector would be .header-title { }.

Using Section and Page IDs

For page-specific CSS, use the section's data attribute or the page's collection ID as a parent selector. Each section in Squarespace has a unique data-section-id attribute that you can find in the Inspect tool. Use it to target elements within a specific section without affecting the same elements elsewhere on your site.

Common Squarespace CSS Selectors

Navigation: .header-nav-item a for menu links, .header-title for the site title, .header-burger for the mobile hamburger icon.

Buttons: .sqs-block-button-element for all buttons, .sqs-block-button-element--small or --large for size variants.

Headings: h1, h2, h3 for heading levels. Add a section parent for page-specific heading styles.

Footer: .footer-section or depending on template version.

Most Common Custom CSS Modifications

Changing Font Sizes

The Site Styles panel offers preset font size ranges, but Custom CSS gives you exact control. Set any element to any pixel, rem, or em value:

h1 { font-size: 42px; } p { font-size: 17px; line-height: 1.7; }

Adjusting Spacing and Padding

Override section padding, block margins, and element spacing with precise values. The Site Styles slider controls are coarse - CSS gives you pixel-level accuracy:

.page-section { padding-top: 60px; padding-bottom: 60px; } .sqs-block { margin-bottom: 30px; }

Hiding Elements

Remove unwanted template elements without editing the HTML. Hide the site title, footer credit, specific navigation items, or any element you do not want visible:

.header-title { display: none; } .footer-block .sqs-block-content p:last-child { display: none; }

Custom Hover Effects

Add visual feedback when visitors hover over buttons, links, images, or navigation items. Use transitions for smooth animations:

.sqs-block-button-element { transition: all 0.3s ease; } .sqs-block-button-element:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

Custom Colors and Backgrounds

Override any color in your template - backgrounds, text, links, buttons, borders. Use hex codes, RGB, or HSL values for precise brand color matching:

.page-section:first-child { background-color: #1a1a2e; color: #ffffff; } a { color: #e94560; }

Writing Responsive CSS for Squarespace

Desktop CSS does not always work on mobile. Use media queries to apply different styles at different screen widths. Squarespace's primary mobile breakpoint is around 640 to 768 pixels:

@media screen and (max-width: 768px) { h1 { font-size: 28px; } .page-section { padding: 40px 15px; } .sqs-block-button-element { width: 100%; } }

Always test your CSS on actual mobile devices after adding media queries. The Squarespace mobile preview is an approximation - real devices reveal issues the preview misses. For mobile optimization strategies, our guide to Squarespace mobile optimization covers responsive design in detail.

Custom CSS Best Practices

Use specific selectors. Target elements as precisely as possible. A broad selector like div { padding: 0; } affects every div on your site. A specific selector like .page-section .sqs-block { padding: 0; } affects only the blocks you intend to change.

Avoid !important when possible. The !important flag overrides all other CSS rules and makes debugging difficult. Use more specific selectors instead. Reserve !important for cases where template styles are deeply nested and cannot be overridden otherwise.

Comment your code. Add CSS comments explaining what each rule does and when you added it: /* Hide site title on homepage - added March 2026 */. This saves hours of confusion when editing later.

Keep it organized. Group related rules together - all navigation styles in one section, all button styles in another, all responsive rules at the bottom. This structure makes your Custom CSS manageable as it grows.

Test on multiple browsers. CSS can render differently in Chrome, Safari, Firefox, and Edge. Test your custom styles on at least two browsers to catch compatibility issues. For design consistency, our Squarespace design tips guide covers cross-browser testing strategies.

Advanced CSS Techniques for Squarespace

CSS Variables for Brand Consistency

Define your brand colors and fonts as CSS custom properties (variables) at the top of your Custom CSS. Reference them throughout your rules for consistent, easy-to-update styling:

:root { --brand-primary: #2d3436; --brand-accent: #e17055; --brand-font: 'Your Font', sans-serif; } .sqs-block-button-element { background-color: var(--brand-accent); font-family: var(--brand-font); }

CSS Grid for Custom Layouts

Override the template's default block arrangement with CSS Grid for complex, multi-column layouts that the visual editor cannot produce. Target a section's content container and apply grid rules for precise column control. For layout techniques, our guide to Squarespace custom layouts covers Grid and Flexbox in detail.

Animations and Transitions

CSS keyframe animations add motion to your site without JavaScript. Create fade-in effects, sliding elements, pulsing buttons, and rotating icons using @keyframes rules and the animation property. Keep animations subtle - excessive motion can feel unprofessional and cause accessibility issues for visitors with motion sensitivities.

Troubleshooting Custom CSS Issues

CSS Not Applying

Your selector may not match the element's actual class name. Re-inspect the element and verify the class. Template updates can rename classes - if CSS that used to work stops working after an update, re-inspect the affected elements for changed selectors.

CSS Applies on Desktop but Not Mobile

Check whether a media query is overriding your desktop rule at the mobile breakpoint. Also check whether the mobile version of the element uses a different HTML structure or class name than the desktop version. For mobile CSS debugging, our Squarespace SEO guide covers technical site health including mobile rendering.

Changes Not Visible After Saving

Your browser may be caching the old CSS. Clear your browser cache or open the site in an incognito window. If using a CDN or caching plugin (through Code Injection), the cached version may take time to update.

Take Full Control of Your Squarespace Design

Custom CSS is where your Squarespace site stops looking like a template and starts looking like your brand. Every font size, color, spacing value, hover effect, and layout adjustment is within your control - and the changes take effect immediately in preview mode so you can iterate quickly.

Start with the modifications that have the biggest visual impact: heading sizes, button colors, section spacing, and navigation styling. Build from there as you get comfortable with selectors and properties. The Custom CSS editor is always one click away, and every rule you add can be removed just as easily.