Squarespace Site Styles Not Working

Cause 1: Custom CSS Overriding Site Styles

How This Happens

Custom CSS rules in Design > Custom CSS take priority over Site Styles settings when they target the same element with equal or higher specificity. If you previously added CSS to change your heading color to blue and then change the heading color to red in Site Styles, the CSS blue wins because Custom CSS loads after Site Styles and overrides it.

How to Diagnose

Right-click the element that is not updating and select Inspect. In the browser's developer tools, look at the element's computed styles. If you see your Custom CSS rule crossed out by another rule, or if the Custom CSS rule is taking precedence over the Site Styles value, Custom CSS is the cause. The DevTools styles panel shows exactly which CSS rule is winning.

How to Fix

Remove or update the conflicting Custom CSS rule. If you want Site Styles to control the element, delete the Custom CSS rule that targets it. If you want Custom CSS to control it, update the CSS value to match your intended design. Do not try to override CSS with Site Styles - CSS always wins when specificity is equal or higher. For CSS management, our guide to Squarespace custom CSS covers specificity and troubleshooting.

Cause 2: Browser Cache Serving Old Styles

How This Happens

Your browser caches CSS files to speed up page loading. When you change Site Styles, the browser may still serve the cached old CSS instead of the new version. This makes it look like your changes did not save - but they did, the browser just is not showing them.

How to Diagnose

Open your site in an incognito or private browsing window. If the changes appear in incognito but not your regular browser, caching is the cause.

How to Fix

Clear your browser cache completely (not just history - specifically cached images and files). On Chrome: Settings > Privacy and Security > Clear Browsing Data > Cached Images and Files. On Safari: Develop > Empty Caches. After clearing, reload your site. The updated styles should appear. Ask a friend to check the site on their device to confirm the changes are live.

Cause 3: Template Limitations

How This Happens (7.0 Sites)

On Squarespace 7.0, Site Styles options vary by template. Some templates expose more styling options than others. A setting that exists on the Brine template may not exist on the Bedford template. If you cannot find a specific styling option in Site Styles, your 7.0 template may not support it.

How This Happens (7.1 Sites)

On 7.1, Site Styles options are more consistent across sites, but some elements are styled at the section level rather than globally. Section-specific colors and fonts override global Site Styles. If a specific section uses custom colors, changing the global color in Site Styles will not affect that section.

How to Fix

For 7.0: use Custom CSS to style elements that your template's Site Styles panel does not expose. For 7.1: check section-level settings (click the section, open section settings, look for color and font overrides). Remove section-level overrides to let global Site Styles take effect. For version differences, our guide to checking your Squarespace version covers how to identify your version and its implications.

Specific Site Styles Issues and Fixes

Font Changes Not Applying

If you change a font in Site Styles but text keeps the old font, check Custom CSS for font-family rules. Check section-level font settings. Check if the text is inside a Code Block (Code Block content is not affected by Site Styles). If using a custom font loaded through Code Injection, it may override Site Styles fonts.

Button Colors Not Changing

Button styling in Site Styles applies to standard Button Blocks. If buttons inside Code Blocks, embedded forms, or third-party widgets do not change, they use their own styling that Site Styles does not control. Use Custom CSS to style non-standard buttons. For button customization, our guide to changing button colors in Squarespace covers both Site Styles and CSS approaches.

Background Colors Not Updating

Section backgrounds are set per-section, not through global Site Styles. If you change a global color and section backgrounds do not update, check each section's individual settings. Click the section, open settings, and update the background color there. Global Site Styles affects default colors, but sections with explicit color settings override the global.

Spacing Changes Not Taking Effect

Site Styles spacing controls (padding, margins) apply to specific element types. If spacing does not change for certain sections, check section-level padding settings. Check Custom CSS for margin or padding rules. The Fluid Engine (7.1) positions elements on a grid - grid positioning overrides spacing set through Site Styles.

Site Styles Panel Not Loading

If the Site Styles panel itself does not open or displays blank, clear your browser cache, disable browser extensions, and try in incognito. Update your browser to the latest version. If the panel still does not load, try a different browser (Chrome is the most compatible with the Squarespace editor). For editor troubleshooting, our guide to fixing Squarespace glitches covers browser-related issues.

Troubleshooting Process

1. Check in incognito. If changes appear in incognito, the issue is browser caching. Clear cache.

2. Check Custom CSS. Open Design > Custom CSS and search for rules targeting the element that is not updating. Remove or update conflicting rules.

3. Check section-level settings. Click on the affected section and check for section-specific color, font, or spacing overrides that may be blocking global Site Styles.

4. Check element type. Code Blocks, embedded widgets, and third-party content are not affected by Site Styles. These elements need Custom CSS for styling.

5. Inspect the element. Right-click > Inspect to see which CSS rule is actually controlling the element's appearance. This definitively shows whether Site Styles, Custom CSS, or section settings are winning.

6. Check your version. 7.0 and 7.1 have different Site Styles options. A setting available on 7.1 may not exist on your 7.0 template. For design approaches on both versions, our Squarespace design tips guide covers visual customization strategies. For CSS as an alternative, our guide to adding custom CSS to Squarespace covers styling anything Site Styles cannot reach.

Make Site Styles Work the Way It Should

Site Styles is the simplest way to control your Squarespace site's global design - but only when nothing else is blocking it. Custom CSS, browser cache, and section-level overrides are the three barriers that prevent Site Styles changes from taking effect.

Start with the incognito test to rule out caching. Check Custom CSS for conflicts. Check section settings for overrides. Use browser Inspect to see exactly which rule is winning. These four steps resolve virtually every Site Styles issue in minutes.