Squarespace CSS Cheat Sheet - Updated 2026.

Navigation CSS Selectors

All navigation links: .header-nav-item a { }

Active page link: .header-nav-item--active a { }

Navigation hover state: .header-nav-item a:hover { }

Site title/logo text: .header-title-text { }

Mobile hamburger icon: .header-burger { }

Mobile menu overlay: .header-menu { }

Mobile menu links: .header-menu-nav-list a { }

Dropdown menu container: .header-nav-folder-content { }

Dropdown menu items: .header-nav-folder-item a { }

Make last nav item a button: .header-nav-item:last-child a { background-color: #333; color: #fff !important; padding: 10px 20px; border-radius: 4px; }

Typography CSS Selectors

All headings: h1, h2, h3, h4 { }

Body text: p, .sqs-block-content p { }

All links: a { }

Block quotes: blockquote { }

Custom font size for headings: h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 24px; }

Improved body text readability: p { font-size: 17px; line-height: 1.7; }

Button CSS Selectors

All buttons: .sqs-block-button-element { }

Primary buttons: .sqs-block-button-element--small { } or .sqs-block-button-element--medium { }

Button hover: .sqs-block-button-element:hover { }

Custom button with hover lift: .sqs-block-button-element { transition: all 0.3s ease; } .sqs-block-button-element:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

Full-width button on mobile: @media screen and (max-width: 768px) { .sqs-block-button-element { width: 100%; text-align: center; } }

For detailed button customization, our guide to changing button colors in Squarespace covers every styling option.

Section and Layout CSS Selectors

All page sections: .page-section { }

Specific section by ID: .page-section { }

First section (hero): .page-section:first-child { }

Content wrapper: .content-wrapper { }

Custom section padding: .page-section { padding-top: 80px; padding-bottom: 80px; }

Full-width section override: .page-section .content-wrapper { max-width: 100% !important; padding: 0 !important; }

Section background overlay: .page-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 1; }

Image and Gallery CSS Selectors

All images: .sqs-block-image img { }

Gallery grid items: .gallery-grid-item { }

Gallery image hover: .gallery-grid-item img { transition: transform 0.3s ease; } .gallery-grid-item:hover img { transform: scale(1.05); }

Image rounded corners: .sqs-block-image img { border-radius: 12px; }

Image shadow: .sqs-block-image img { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

For gallery-specific customization, our guide to Squarespace custom galleries covers layout and lightbox styling.

Form CSS Selectors

Form wrapper: .form-wrapper { }

Form input fields: .form-wrapper .field-element { }

Form field focus state: .form-wrapper .field-element:focus { }

Form labels: .form-wrapper .field .caption { }

Form submit button: .form-wrapper .form-button-wrapper .sqs-system-button { }

Styled form fields: .form-wrapper .field-element { border: 2px solid #e0e0e0; border-radius: 8px; padding: 12px 16px; font-size: 16px; } .form-wrapper .field-element:focus { border-color: #333; outline: none; }

Footer CSS Selectors

Footer section: footer, .footer-section { }

Footer links: footer a { }

Hide footer credit: .footer-block .sqs-block-content p:last-child { display: none; }

Footer background: footer { background-color: #1a1a1a; color: #ffffff; }

Utility CSS Patterns

Smooth Scrolling

html { scroll-behavior: smooth; }

Hide Any Element

.your-selector { display: none; }

Center Any Block

.your-selector { margin: 0 auto; text-align: center; }

Custom Link Underline Animation

a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 2px; background-repeat: no-repeat; background-position: left bottom; transition: background-size 0.3s ease; } a:hover { background-size: 100% 2px; }

CSS Variables for Brand Colors

:root { --brand-primary: #2d3436; --brand-accent: #e17055; --brand-light: #f5f5f5; } .sqs-block-button-element { background-color: var(--brand-accent); } h1, h2, h3 { color: var(--brand-primary); }

Responsive CSS Patterns

Mobile Breakpoint Template

@media screen and (max-width: 768px) { h1 { font-size: 28px; } .page-section { padding: 40px 15px; } .sqs-block-button-element { width: 100%; } }

Tablet Breakpoint

@media screen and (max-width: 1024px) { .content-wrapper { padding: 0 30px; } }

Hide on Mobile Only

@media screen and (max-width: 768px) { .desktop-only { display: none; } }

Show on Mobile Only

.mobile-only { display: none; } @media screen and (max-width: 768px) { .mobile-only { display: block; } }

For responsive design techniques, our guide to Squarespace mobile optimization covers breakpoints and mobile-specific styling. For broader CSS techniques, our guide to Squarespace custom CSS covers selectors, properties, and advanced patterns.

How to Use This Cheat Sheet

1. Identify the element. Right-click the element you want to style and select Inspect. Note the CSS class name.

2. Find the matching selector above. Look through the cheat sheet sections for the selector that matches your element.

3. Copy the code to Custom CSS. Go to Design > Custom CSS, paste the selector and properties, and modify the values (colors, sizes, spacing) to match your brand.

4. Preview and test. Check the live preview, then test on mobile. Adjust values as needed.

5. Comment your code. Add a comment above each rule: /* Custom button hover effect - March 2026 */. For design strategies that complement CSS customization, our Squarespace design tips guide covers visual hierarchy and consistency.

Keep This Cheat Sheet Handy

This CSS cheat sheet covers the selectors and patterns you will reach for most often when customizing your Squarespace site. Bookmark it, reference it every time you open Custom CSS, and build on it as you discover selectors specific to your template.

Start with the changes that have the biggest visual impact - heading sizes, button colors, section padding - and work your way into more specific customizations as your confidence with CSS grows.