Section-Level Styling on Squarespace 7.1
Color Themes Per Section
On 7.1, each section can use a different color theme. Click on a section, open section settings, and look for the color theme selector. Squarespace 7.1 provides several pre-configured themes (light, dark, accent) that change the background, text, button, and link colors for that specific section. This is the fastest way to create visual contrast between sections - alternating light and dark backgrounds, for example.
Background Per Section
Each section can have its own background - solid color, gradient, image, or video. Set the background in the section settings. This is independent of the global background color in Site Styles. Sections with different backgrounds automatically create visual separation and rhythm on the page.
Spacing Per Section
Section padding (top and bottom) can be configured individually. Click the section, open settings, and adjust the padding. Some sections need generous spacing (hero sections, testimonials). Others need tight spacing (footer, navigation bars). Per-section padding control lets you fine-tune the rhythm of your page. For design principles, our Squarespace design tips guide covers spacing and visual rhythm.
Page-Level Styling with Custom CSS
Using Page Collection IDs
Squarespace assigns each page a unique collection ID that appears in the page's HTML body class. You can use this ID as a CSS selector to apply styles only to that page. Find the collection ID: open the page in your browser, right-click > Inspect, and look at the <body> tag for a class like collection-abc123. Use it in CSS: .collection-abc123 h1 { color: red; }. This rule only affects H1 headings on that specific page.
Using Section IDs
Each section in Squarespace has a data-section-id attribute. Find it through browser DevTools (Inspect the section element). Use it in CSS: .page-section { background-color: #1a1a1a; color: white; }. This targets one specific section on one specific page, leaving all other sections unaffected. For CSS selectors, our guide to Squarespace custom CSS covers finding and using section-specific selectors.
Common Use Cases for Different Section Styles
Alternating Section Backgrounds
Create visual rhythm by alternating between light and dark section backgrounds down the page. On 7.1, switch color themes per section. On 7.0, use CSS to target alternating sections: .page-section:nth-child(even) { background-color: #f5f5f5; }.
Dark Hero Section with Light Content Below
Set the first section (hero) to a dark color theme with a background image, and all following sections to a light theme. This creates a dramatic entrance that transitions into clean, readable content. On 7.1, configure in section settings. On 7.0, use CSS targeting the first section: .page-section:first-child { background-color: #1a1a1a; color: white; }.
Different Fonts on Specific Pages
Use a display font on your homepage headings and a clean sans-serif on your blog pages. Target by page collection ID: .collection-homepage h1 { font-family: 'Playfair Display', serif; } .collection-blog h1 { font-family: 'Inter', sans-serif; }.
Unique CTA Section Styling
Style your CTA sections (typically at the bottom of pages) differently from content sections - bolder background color, larger text, more padding. Target the specific CTA section by its section ID to apply unique styling without affecting other sections.
Blog Post Specific Styles
Style individual blog posts differently - for example, give sponsored posts a different background or add a border to featured posts. Each blog post has its own URL slug that can be used as a CSS identifier. For blog layout options, our guide to changing blog layout in Squarespace covers blog-specific customization.
Section-Level Styling Techniques with CSS
Custom Typography Per Section
.page-section h1 { font-size: 56px; font-weight: 800; letter-spacing: -1px; }
This sets a unique heading style for only the hero section while all other sections use the global Site Styles heading.
Custom Button Colors Per Section
.page-section .sqs-block-button-element { background-color: #ff6600; color: white; }
This gives buttons in the CTA section a different color from buttons elsewhere on the site.
Custom Link Colors Per Section
.page-section a { color: #88ccff; } .page-section a:hover { color: #ffffff; }
This sets link colors appropriate for a dark background section without affecting links on light sections. For CSS implementation, our guide to adding custom CSS to Squarespace covers section-targeting techniques.
Best Practices for Section-Level Styling
Use section settings first. On 7.1, the built-in color themes and section settings handle most per-section styling without CSS. Only use CSS for adjustments the settings do not cover.
Maintain brand consistency. Different section styles should feel like variations of the same brand - not completely different designs. Use your brand's color palette for all sections, just in different combinations (dark background with light text, light background with dark text).
Do not overdo it. Two or three section style variations is enough for most sites. Every section looking completely different creates visual chaos rather than interest. Consistency with strategic contrast is the goal.
Test on mobile. Section styles that look great on desktop may need adjustment for mobile screens. Colors, fonts, and spacing that work on wide screens may not translate to narrow viewports. Add CSS media queries for mobile-specific adjustments. For mobile optimization, our guide to Squarespace mobile optimization covers responsive section styling.
Comment your CSS. Section-specific CSS can become complex. Label every rule with which section and page it targets: /* Homepage hero section - dark background with white text */. For Site Styles interactions, our guide to Squarespace Site Styles not working covers how section-level overrides interact with global settings. For broader customization, our guide to customizing your Squarespace website covers the full design workflow.
Frequently Asked Questions
Can I set different styles for each section on Squarespace?
Can I style individual pages differently on Squarespace?
How do I find a section ID on Squarespace?
How do I alternate background colors between sections?
Do section-level styles override Site Styles?
Can I have different fonts on different pages?
How many different section styles should I use?
Design with Variety and Consistency
Section-level and page-level styling gives you the visual variety that keeps visitors engaged while maintaining the brand consistency that builds recognition. Use 7.1's built-in section settings for color themes and backgrounds. Use Custom CSS for fine-grained control over typography, buttons, and spacing per section or page.
The key is strategic contrast - not random variation. Every section style should feel like a deliberate design choice within a unified brand, not a different website stitched together.
* Read the rest of the post and open up an offer