Essential Squarespace CSS Customizations

Squarespace gives you a polished starting point, but the real power is in CSS. These 15 essential customizations cover the techniques site owners ask about most — from finding the right selector to styling password pages. Everything goes in Design → Custom CSS unless noted otherwise.

1. How to Find Any CSS Selector

Before you can style anything in Squarespace, you need to know what to target. Every element on the page — headings, buttons, images, sections — has a CSS class or ID assigned by the template. The trick is finding the right one.

Right-click any element on your Squarespace site and choose Inspect (or Inspect Element). This opens the browser's developer tools showing the HTML structure. The highlighted element's classes and IDs are your CSS selectors. Look for unique, stable classes like .page-section, .sqs-block-button-element, or [data-section-id] attributes rather than randomly generated strings.

Squarespace 7.1 uses a consistent naming convention across all templates. Once you learn the common selectors — #header, #footer, .page-section, .sqs-block-content— you can style virtually anything. The developer tools also let you live-test CSS changes before committing them to your Custom CSS panel.

/* Common Squarespace 7.1 selectors reference */

/* Header */
#header { }
.header-nav-item a { }
.header-title-logo img { }

/* Sections */
.page-section { }
[data-section-id="YOUR_ID"] { }

/* Blocks */
.sqs-block-content { }
.sqs-block-image { }
.sqs-block-button-element { }

/* Footer */
#footer { }
.footer-nav-item a { }

/* Blog */
.blog-item-content { }
.blog-title { }
.blog-meta-item--date { }

Result:You now have a reference of the most commonly used Squarespace 7.1 selectors. Use the browser inspector to find any element's specific class, then write CSS rules targeting that class in your Custom CSS panel.

2. Change Background Color on Specific Section

Squarespace's design panel lets you choose from preset color themes per section, but it doesn't give you pixel-level control. When you need an exact hex color or a gradient background on one specific section, CSS is the way.

Each section in Squarespace 7.1 has a unique data-section-idattribute. Find it by inspecting the section element in your browser's developer tools — it's a long alphanumeric string on the section's wrapper div. Use that as a CSS attribute selector to change the background of just that section without affecting anything else on the page.

This technique is especially powerful for hero sections, CTAs, and testimonial blocks where you want a color that doesn't exist in Squarespace's built-in color palette. You can also override text colors within the same section selector to ensure readability against the new background.

/* Target specific section */
[data-section-id="6501abc123def456"] {
  background-color: #f8f9fa !important;
}

/* With a gradient background */
[data-section-id="6501abc123def456"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Override text colors in that section */
[data-section-id="6501abc123def456"] h1,
[data-section-id="6501abc123def456"] h2,
[data-section-id="6501abc123def456"] p {
  color: #ffffff !important;
}

Result: Only the section with that specific ID gets the new background color or gradient. All other sections remain untouched. Replace the example ID with your actual section ID from the inspector.

3. Hide Any Element by ID

Sometimes you need to hide a specific block that the Squarespace editor won't let you delete — maybe it's part of a template structure, or you want to hide it on certain screen sizes but not others. The display: none approach is clean and reliable.

Every content block in Squarespace 7.1 has a unique block ID in the format .sqs-block followed by a data-block-idattribute. Use either selector to hide specific blocks. Pair this with media queries for responsive control — hide on desktop but show on mobile, or the other way around.

This is also useful for A/B testing content: hide one version of a section and show another, or progressively reveal sections as you build out new content without deleting the old.

/* Hide by block data attribute */
[data-block-id="YOUR_BLOCK_ID"] {
  display: none !important;
}

/* Hide on desktop only */
@media screen and (min-width: 768px) {
  [data-block-id="YOUR_BLOCK_ID"] {
    display: none !important;
  }
}

/* Hide on mobile only */
@media screen and (max-width: 767px) {
  [data-block-id="YOUR_BLOCK_ID"] {
    display: none !important;
  }
}

Result:The targeted block disappears from the page entirely. When wrapped in a media query, it only hides at the specified screen size. The content still exists in the DOM — it's just not visible to visitors.

4. Add a Back to Top Button

Long-form pages and blogs benefit from a floating button that scrolls visitors back to the top. Squarespace doesn't include one by default, but you can add a polished version with a small code injection snippet.

This button is fixed to the bottom-right corner and uses smooth scroll behavior to glide back to the top. It starts invisible and fades in after the user scrolls past 300 pixels, keeping the design clean on initial page load. The approach uses inline styles so everything lives in a single code injection block — no separate CSS needed.

Add the following to Settings → Advanced → Code Injection → Footer. The script handles both the scroll detection and the click behavior.

<!-- Add to Code Injection > Footer -->
<div id="back-to-top" style="
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  background: #1a1a2e;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 999;
  font-size: 20px;
  pointer-events: none;
">&uarr;</div>

<script>
  const btn = document.getElementById('back-to-top');
  window.addEventListener('scroll', () => {
    if (window.scrollY > 300) {
      btn.style.opacity = '1';
      btn.style.pointerEvents = 'auto';
    } else {
      btn.style.opacity = '0';
      btn.style.pointerEvents = 'none';
    }
  });
  btn.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
</script>

Result: A dark circular button with an arrow appears in the bottom-right corner once visitors scroll down. Clicking it smoothly scrolls them back to the top. Change the background color and size to match your brand.

5. Add a Scroll Progress Bar

A scroll progress bar is a thin horizontal line fixed to the very top of the viewport that fills from left to right as users scroll down. It gives readers a visual indicator of how far through the page they are — especially useful on long blog posts and articles.

The bar is powered by a simple JavaScript scroll listener that calculates the percentage of the page scrolled and updates the bar's width accordingly. The transition property ensures smooth animation even during fast scrolling. Add this to your footer code injection.

The z-index is set to 9999 so it sits above the Squarespace header. If your header is sticky, the bar will appear just above or overlaid on it, depending on your template's header z-index. Adjust the color to match your brand.

<!-- Add to Code Injection > Footer -->
<div id="scroll-progress" style="
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: #e63946;
  width: 0%;
  z-index: 9999;
  transition: width 0.1s linear;
"></div>

<script>
  window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const progress = (scrollTop / docHeight) * 100;
    document.getElementById('scroll-progress').style.width = progress + '%';
  });
</script>

Result: A slim colored bar at the very top of the page fills from 0% to 100% as visitors scroll to the bottom. It provides a clear reading progress indicator without cluttering the design.

6. Custom Scrollbar Styling

The default browser scrollbar is a thick gray bar that clashes with carefully designed sites. You can replace it with a slim, branded scrollbar that matches your color palette. Most visitors notice it subconsciously — it's one of those details that separates polished sites from template-default ones.

WebKit-based browsers (Chrome, Safari, Edge) support custom scrollbar styling via ::-webkit-scrollbar pseudo-elements. Firefox uses the scrollbar-width and scrollbar-color properties. Include both syntaxes for full cross-browser coverage. This goes directly in your Custom CSS panel.

Keep the scrollbar thumb color contrast high enough that users can still see and grab it. A good rule is to make the track very light (near white) and the thumb a medium gray or your brand's secondary color.

/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

Result: The browser scrollbar becomes a slim 8px rounded bar with your chosen colors. Chrome, Safari, and Edge get the full custom styling. Firefox gets the slim width and color treatment through its own syntax.

7. Custom Text Selection Color

When visitors highlight text on your site, the default selection color is the browser's blue. Changing it to your brand color is a subtle but effective design detail that reinforces your identity. It's a single CSS rule that takes five seconds to implement and makes designers smile.

The ::selection pseudo-element controls the highlight background and text color. Include the ::-moz-selection prefix for older Firefox versions. Choose a background color with enough contrast against the text color so highlighted text remains readable.

A partial-opacity brand color works well if your primary color is too bold. For example, if your brand red is #e74c3c, you could use rgba(231, 76, 60, 0.3) for a softer highlight that still reads as on-brand.

::selection {
  background: #e74c3c;
  color: #ffffff;
}
::-moz-selection {
  background: #e74c3c;
  color: #ffffff;
}

Result: Selected text on your site shows your brand color as the highlight instead of the default browser blue. The white text color ensures readability against the colored background.

8. Custom Loading Spinner

Squarespace 7.1 doesn't include a page loading spinner by default. On slower connections or image-heavy pages, visitors may see a flash of unstyled content. A loading spinner provides a polished transition while the page renders.

The spinner works in two parts: CSS for the visual styling and animation goes in your Custom CSS panel, while a small HTML element and JavaScript snippet go in Code Injection. The overlay covers the entire viewport with a white background and centered spinner, then fades out once the DOM is ready.

The spinner itself is a pure CSS animation — a circular border with one colored edge that rotates continuously. No images or external dependencies required. Adjust the border-top-color to match your brand.

CSS (goes in Custom CSS):

.page-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.4s ease;
}
.page-loader.loaded { opacity: 0; pointer-events: none; }
.page-loader .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #eee;
  border-top-color: #111;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

HTML + JavaScript (goes in Code Injection → Header):

<div class="page-loader">
  <div class="spinner"></div>
</div>

<script>
  window.addEventListener('load', function() {
    document.querySelector('.page-loader').classList.add('loaded');
  });
</script>

Result: Visitors see a clean white overlay with a spinning circle while the page loads. Once everything is ready, the overlay fades out smoothly in 0.4 seconds, revealing the fully rendered page beneath.

9. Print Stylesheet

When visitors print a page from your Squarespace site, they get the header, footer, navigation, cookie banners, and all the chrome surrounding the actual content. A print stylesheet strips all of that away and delivers clean, readable output.

The @media print query applies styles only when the page is being printed or saved as PDF. Hide the header, footer, announcement bar, and any floating elements. Reset backgrounds to white and text to black to save ink. The a[href]::afterrule is a nice touch — it appends the actual URL after each link so readers know where links point on paper.

This is especially valuable for portfolio sites, recipe blogs, and any content site where visitors might want a physical copy. Without print styles, the printed page looks chaotic and wastes paper.

@media print {
  .header,
  .footer-sections,
  .header-announcement-bar-wrapper,
  .sqs-cookie-banner-v2,
  .back-to-top,
  .floating-social {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }
  .content-wrapper {
    max-width: 100% !important;
  }
}

Result: When visitors print or save the page as PDF, they get only the main content on a white background with black text. Navigation, footers, banners, and floating buttons are all stripped away. Links display their URLs in parentheses after the link text.

10. Smooth Scroll Behavior

By default, clicking an anchor link (like a table of contents or a “jump to section” link) snaps instantly to the target. CSS smooth scrolling replaces that jarring jump with a fluid glide animation. It transforms the entire scrolling experience site-wide with a single property.

The scroll-behavior: smooth property on the html element affects all anchor link navigation and scrollTo() JavaScript calls. It works on all modern browsers. For accessibility, always include the prefers-reduced-motion media query to respect users who have motion sensitivity enabled in their operating system settings.

If you have a fixed/sticky header, anchor links will scroll the target element behind the header. The :target selector with scroll-margin-top adds an offset so the content appears below the header instead of underneath it. Adjust the pixel value to match your header height.

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* Offset for fixed header */
:target {
  scroll-margin-top: 100px;
}

Result: All anchor link clicks and scroll-based navigation glide smoothly instead of jumping. Users who prefer reduced motion get instant scrolling. The 100px offset prevents content from being hidden behind a sticky header.

11. Disable Right Click

Photographers and artists often want to discourage casual image downloading from their portfolio sites. While disabling right-click isn't a true security measure — determined users can always bypass it — it stops the majority of casual right-click-save-as behavior from average visitors.

The JavaScript approach uses a contextmenu event listener to prevent the default right-click behavior. The optional CSS additions prevent image dragging and text selection on images specifically. Add the script to Code Injection → Footer and the CSS to Custom CSS.

Be aware that this affects all right-click functionality, including text selection menus and developer tools access. Some visitors find it annoying, so use it only on sites where image protection is genuinely important — like photography portfolios or artwork galleries.

JavaScript (Code Injection → Footer):

<script>
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});
</script>

CSS (Custom CSS — optional image protection):

/* Prevent drag on images */
img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

Result:Right-clicking anywhere on the site does nothing — the context menu simply doesn't appear. With the CSS addition, images can't be dragged to the desktop either. This discourages casual downloading while keeping the rest of the site functional.

12. Custom Cursor on Elements

The CSS cursor property lets you change what the mouse pointer looks like when hovering over specific elements. This goes beyond the standard pointer — you can use built-in cursor types like zoom-in, grab, and crosshair, or load a custom image for a fully branded cursor experience.

Built-in cursor types are the easiest to implement and look native across operating systems. Use zoom-in on gallery images to signal that clicking will enlarge them. Use grab on draggable elements. Use pointeron any interactive element that doesn't naturally show a hand cursor.

For custom image cursors, upload a small PNG or SVG (32x32px max recommended) to your Squarespace file manager and reference the URL. Always include a fallback cursor type after the URL in case the image fails to load.

/* Built-in cursor types */
.gallery-item:hover {
  cursor: zoom-in;
}
.sqs-block-image:hover {
  cursor: grab;
}
/* Custom image cursor */
[data-section-id="YOUR_SECTION_ID"] {
  cursor: url('YOUR_CURSOR_IMAGE_URL'), auto;
}
/* Pointer on interactive elements */
.sqs-block-button-element {
  cursor: pointer;
}

Result: Gallery images show a zoom-in magnifying glass on hover. Image blocks show a grab hand. Custom sections display your uploaded cursor image. Buttons always show the pointer hand for clear interactivity signals.

13. Text Truncation with Ellipsis

Blog grids, summary blocks, and card layouts look cleaner when text is trimmed to a consistent length. Instead of letting titles and excerpts run to varying lengths, CSS truncation cuts the text at a defined point and adds an ellipsis (…) to indicate there's more.

Single-line truncation uses text-overflow: ellipsis with white-space: nowrap — great for titles that should stay on one line. For multi-line truncation (like limiting a blog excerpt to 3 lines), the -webkit-line-clamp property does the job. Despite the -webkit prefix, it works in all modern browsers including Firefox.

This technique is particularly useful for blog summary blocks, product grids, and team member bios where you want visual consistency across cards regardless of how much content each one has.

/* Single line truncation */
.summary-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Multi-line truncation (3 lines) */
.summary-excerpt p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Result:Titles that are too long for one line get cut off with “...” instead of wrapping. Excerpts are limited to exactly 3 lines with an ellipsis at the end. All cards in a grid now have uniform text height.

14. Hide Elements on Specific Devices

Squarespace 7.1 has a built-in option to hide blocks on mobile in the editor, but it's limited to individual blocks and doesn't give you control over tablet breakpoints. CSS media queries let you precisely control what shows on mobile, tablet, and desktop independently.

Target elements by their section ID or block class and use display: nonewithin a media query breakpoint. Squarespace's mobile breakpoint is 767px, and tablet falls between 768px and 1024px. Anything above 1024px is treated as desktop. You can hide entire sections, individual blocks, or specific elements within blocks.

Common use cases include hiding a large hero image on mobile to improve load time, showing a simplified CTA on mobile instead of the desktop version, or removing decorative elements that don't translate well to small screens.

/* Hide on mobile only */
@media screen and (max-width: 767px) {
  [data-section-id="YOUR_SECTION_ID"] {
    display: none !important;
  }
}
/* Hide on desktop only (show only on mobile) */
@media screen and (min-width: 768px) {
  [data-section-id="YOUR_SECTION_ID"] {
    display: none !important;
  }
}
/* Hide on tablet only */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  [data-section-id="YOUR_SECTION_ID"] {
    display: none !important;
  }
}

Result:Elements appear or disappear based on the visitor's screen size. Mobile users see a streamlined version of the page. Desktop users see the full layout. Tablet gets its own treatment if needed. All controlled with clean CSS media queries.

15. Password Page Styling

Squarespace's default password page is functional but generic — a white background with a basic input field and submit button. If you're using password protection for client portals, membership areas, or launch-day holding pages, the lock screen should look as polished as the rest of your site.

The password page uses .sqs-password-pageas the main container class. The form, input field, and submit button all have specific selectors you can target for complete restyling. Change the background to a dark theme, style the input with a transparent look and branded border, and make the submit button match your site's button style.

This CSS goes in your Custom CSS panel and applies globally to all password-protected pages. The :focus state on the input provides clear visual feedback when visitors click into the password field. The submit button uses uppercase tracking for a premium feel that matches high-end lock screen designs.

.sqs-password-page {
  background: #111 !important;
  color: #fff;
}
.sqs-password-page .password-input {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 14px 20px;
  font-size: 16px;
  border-radius: 4px;
}
.sqs-password-page .password-input:focus {
  border-color: #fff;
  outline: none;
}
.sqs-password-page .password-submit {
  background: #e74c3c;
  color: #fff;
  border: none;
  padding: 14px 32px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}

Result: The password page becomes a dark, branded lock screen with a transparent input field that lights up on focus and a bold red submit button. It looks intentional and professional instead of like a default template placeholder.

Related Tools