Set Different Styles for Each Section or Page on Squarespace

How Do Section Themes Work on Squarespace 7.1?

Section themes are the easiest way to style individual sections differently on Squarespace 7.1. Each section on a page can have its own theme applied, changing the color palette for that section only.

What Section Themes Control

A section theme changes the background color, text color, button color, and overall contrast of that section. Squarespace provides preset themes (Light, Dark, Bright, etc.) that you configure globally in Site Styles, then apply per section. Every section that uses the "Dark" theme gets the same dark color palette - but different sections can use different themes on the same page.

How to Apply a Section Theme

Click Edit on any page. Click the pencil icon on the section you want to style. In the section editor panel, find the Theme dropdown. Select a theme - the section updates immediately. Save. That section now has its own color scheme independent of the sections above and below it.

Customizing Theme Colors

Go to Design > Site Styles > Colors. Each theme (Light 1, Light 2, Dark 1, Dark 2, Bright) has its own color palette. Customize the background, text, accent, and button colors for each theme. Every section using that theme updates simultaneously. This system gives you up to 5 distinct color palettes across your site without any CSS.

How to Style Individual Pages with Custom CSS

For changes beyond color palettes - different fonts, unique spacing, custom layouts per page - you need Custom CSS targeting specific pages.

Finding Your Page's Collection ID

Every Squarespace page has a unique collection ID. Right-click on the page, select Inspect (or View Page Source), and look for a data-collection-id attribute on the body or a main content div. Copy this ID. You can also find it in the page URL in the Squarespace editor.

Writing Page-Specific CSS

Use the collection ID to target only that page. Go to Design > Custom CSS and add rules like:

h2 {
  font-family: 'Playfair Display', serif;
  color: #2c3e50;
}

.sqs-block-content {
  padding: 40px 0;
}

These styles apply only to the page with that collection ID. Every other page remains unchanged. For CSS techniques, our guide to Squarespace custom CSS covers targeting and syntax in detail.

How to Style Individual Sections with CSS

You can target individual sections within a page the same way - using section IDs.

Finding Section IDs

In the page editor, click the section's settings (pencil icon). Look at the browser's URL bar - the section ID appears in the URL. Alternatively, use browser DevTools to inspect the section element and find its data-section-id.

Writing Section-Specific CSS

{
  background-color: #f5f5f5;
  padding: 80px 0;
}

h2 {
  font-size: 36px;
  text-transform: uppercase;
}

This targets one specific section on one specific page. Combine section themes (for color) with section-specific CSS (for typography and layout) for maximum control.

Using the Advanced Tab for Page-Level Code Injection

Each page has an Advanced tab in its settings where you can inject CSS and JavaScript that applies only to that page. Click the gear icon next to the page name in the Pages panel, then select Advanced. Add a <style> block with your CSS. This CSS only loads on that page - it does not affect the rest of your site.

This method is cleaner than putting everything in the global Custom CSS editor because page-specific code stays organized with the page it affects. For broader design approaches, our Squarespace design tips guide covers creating visual variety while maintaining brand consistency.

When Should You Use Different Styles Per Page?

Different page styles make sense in specific scenarios - but not everywhere. Using too many different styles creates a disjointed experience that confuses visitors and weakens your brand.

Good use cases: Landing pages that need a unique feel for specific campaigns. Event pages that differ from your main site aesthetic. Sales or promotional pages with distinct visual emphasis. Portfolio sections where each project has its own color treatment.

Avoid when: Every page looks completely different - visitors feel lost. Style differences are purely decorative with no functional purpose. Maintaining consistency across your site already communicates professionalism. For branding consistency, our guide to site creation and branding on Squarespace covers building a unified visual identity.

Squarespace 7.0 vs 7.1 Styling Differences

The approach differs significantly between versions.

7.1: Section themes built in. Color palette control per section without code. CSS targeting works with data-section-id and data-collection-id. Fluid Engine allows different layouts per section natively.

7.0: No section themes. All per-section or per-page styling requires Custom CSS. Different templates have different CSS class structures, so targeting selectors vary by template. Template-specific features like index pages and banners offer some visual variety. For advanced customization and features on Squarespace, the platform's built-in capabilities continue to expand with each update. You can also explore the Squarespace Extensions marketplace for additional design and functionality tools.

Style Sections and Pages Your Way

Squarespace 7.1 section themes handle most per-section color styling without code. For fonts, spacing, and layout differences, use Custom CSS targeting page collection IDs or section IDs. Keep visual variety purposeful - different styles should serve your audience, not confuse them.