How to Add Custom CSS to Squarespace 7.1

Where to Add Custom CSS in Squarespace 7.1

Squarespace 7.1 gives you three places to add custom CSS. Each one works a little differently, and knowing which to use will save you a lot of headaches.

• Custom CSS panel — sitewide styles that apply to every page
• Code Injection — add CSS (and JavaScript) to the header or footer of your site, or to individual pages
• Code Blocks — drop CSS directly into a specific section of a specific page

Most of the time, the Custom CSS panel is what you want. Use Code Injection when you need CSS on only one page, and Code Blocks when you need something hyper-specific to one section.

The Custom CSS Panel

This is the main place for custom styles on Squarespace 7.1. To find it:

1. Open your Squarespace dashboard
2. Click Design in the left sidebar
3. Click Custom CSS

You will see a code editor where you can type CSS directly. Everything you add here applies to your entire site. As you type, a live preview updates on the right side of the screen so you can see changes instantly.

Code Injection: Header vs Footer

Code Injection is a separate feature that lets you add code snippets to your site. You can find it under Settings → Advanced → Code Injection.

There are two slots: Header and Footer. For CSS, you almost always want the Header because CSS needs to load before the page renders. If you put CSS in the Footer, visitors will briefly see unstyled content before your styles kick in.

To add CSS through Code Injection, wrap it in a <style> tag:

<style>
  .header-title {
    font-size: 48px;
    letter-spacing: -1px;
  }
</style>

You can also use Code Injection on individual pages. Open any page in the editor, click the gear icon for Page Settings, then scroll down to the Advanced tab. This is perfect for CSS that should only apply to one page.

Code Blocks for Page-Specific CSS

Code Blocks are content blocks you can drop into any section of a page. Click the +button to add a block, search for "Code", and select the Code block.

Inside the Code block, you can write HTML, CSS (inside <style> tags), or JavaScript. This is useful when you want to style something very specific on one page and you do not want to clutter your Custom CSS panel.

Finding the Right CSS Selectors

The hardest part of custom CSS is knowing what to target. Squarespace generates class names automatically, so you need to inspect the page to find them. Here is how:

Using Inspect Element

1. Open your site in Chrome, Safari, or Firefox
2. Right-click the element you want to change
3. Click Inspect (or Inspect Element)
4. The browser will highlight the HTML for that element and show its CSS on the right
5. Look at the class names on the highlighted element — those are your selectors

For example, if you right-click a heading and see <h1 class="header-title">, you would target it with:

.header-title {
  color: #2c3e50;
  font-size: 42px;
}

Common CSS Tweaks

Change Font Sizes

Squarespace lets you adjust fonts through the Design panel, but sometimes you need more control. Use font-sizewith the element's class:

/* Make all h1 headings larger */
h1 {
  font-size: 56px;
}

/* Target a specific section heading */
.section-title {
  font-size: 36px;
  line-height: 1.2;
}

Adjust Spacing and Padding

Squarespace sections often have more padding than you want. You can tighten things up:

/* Reduce top and bottom padding on all sections */
.page-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Add more space below a specific element */
.header-title-text {
  margin-bottom: 32px;
}

Hide Elements

Sometimes you want to hide something Squarespace shows by default, like the site title or a specific section on mobile:

/* Hide the site title in the header */
.header-title {
  display: none;
}

/* Hide something only on mobile */
@media (max-width: 767px) {
  .hide-on-mobile {
    display: none;
  }
}

Change Colors

/* Change header background */
.header {
  background-color: #1a1a2e;
}

/* Change link colors */
a {
  color: #e94560;
}

/* Change button background */
.sqs-block-button-element {
  background-color: #0f3460 !important;
  border: none !important;
}

Best Practices

• Avoid !important unless you have to. Squarespace uses some inline styles that can only be overridden with !important, but try a more specific selector first. Overusing !important makes your CSS hard to maintain.
• Organize your CSS with comments. Group related styles together and label each section. Future-you will be grateful.
• Be specific with selectors. Instead of styling every h2 on the site, target the section you care about: .about-section h2.
• Test on mobile. Use Chrome DevTools to toggle device mode (the phone/tablet icon) and check your changes at different screen widths.
• Keep a backup. Copy your Custom CSS into a text file on your computer before making big changes. There is no undo button in the CSS panel.

/* =========================
   HEADER STYLES
   ========================= */
.header {
  background: #1a1a2e;
}

/* =========================
   HOMEPAGE HERO
   ========================= */
.homepage .page-section:first-child {
  padding-top: 100px;
  padding-bottom: 100px;
}

Debugging: Why Your CSS Is Not Working

If you added CSS but nothing changed, here are the most common reasons:

1. Wrong Selector

This is the most common issue. The class name you are targeting does not match what is actually on the page. Go back to Inspect Element and double-check the exact class name. Squarespace class names are case-sensitive.

2. Specificity Too Low

Squarespace's built-in styles might be more specific than yours. If .header-title is not working, try a more specific selector like .header .header-title. As a last resort, add !important.

3. Browser Cache

Your browser might be showing a cached version of the page. Do a hard refresh: Ctrl + Shift + R on Windows, Cmd + Shift + R on Mac. Or open an incognito window to see the latest version.

4. CSS Syntax Error

A missing semicolon, extra bracket, or typo can break all the CSS that comes after it. Check your code carefully. The Custom CSS editor does not highlight errors, so a single typo can silently break things.

Related Tools