Squarespace CSS Cheat Sheet
Every CSS selector you need for Squarespace 7.0 and 7.1
Why this matters
Want to customize your Squarespace site with CSS but don't know what to target? Squarespace uses specific class names and IDs for every element — headers, buttons, blog posts, forms. This cheat sheet is your decoder ring. Find the selector, write the CSS, see the change.
117Selectors
11Categories
2Versions Covered
🌐 Site-Wide
10 selectors
SelectorDescriptionVersion
bodyRoot element — set global font, color, background7.0 + 7.1#siteWrapperOutermost content wrapper around all page content7.0 + 7.1.sqs-layoutLayout container wrapping each section's block grid7.0 + 7.1.content-wrapperPrimary content container inside sections7.0 + 7.1.contentInner content region within the wrapper7.0.Index-pageTargets index pages (stacked page layouts)7.0.collection-type-pageTargets standard collection pages7.0 + 7.1.sqs-is-first-sectionFirst section on any page — useful for hero spacing7.1.fe-blockFluid Engine block wrapper (7.1 drag-and-drop grid)7.1[data-section-theme]Section theme attribute — target light/dark sections7.1📌 Header
15 selectors
SelectorDescriptionVersion
.headerTop-level header container element7.0 + 7.1.header-innerInner wrapper — controls max-width and padding7.1.header-titleSite title wrapper in the header7.0 + 7.1.header-title-textThe actual text element of the site title7.0 + 7.1.header-navPrimary navigation container7.0 + 7.1.header-nav-listThe <ul> list of navigation links7.1.header-nav-itemIndividual nav link <li> element7.1.header-actionsRight-side actions area (buttons, cart, account)7.1.header-actions .btnCTA button inside header actions7.1.header-burgerHamburger menu icon for mobile/overlay nav7.1.header-menuMobile/overlay menu panel7.1.header-announcement-bar-wrapperAnnouncement bar above the header7.1#headerHeader by ID — used in 7.0 templates7.0.header-nav-folder-contentDropdown folder submenu container7.1.header-nav-folder-itemIndividual link inside a dropdown folder7.1🧱 Sections & Blocks
15 selectors
SelectorDescriptionVersion
.page-sectionFull-width page section wrapper (each stripe)7.1.section-backgroundBackground layer of a section (for overlays)7.1.sqs-blockIndividual content block wrapper7.0 + 7.1.sqs-block-contentInner content area of any block7.0 + 7.1.sqs-block-htmlText / Markdown block7.0 + 7.1.sqs-block-imageImage block wrapper7.0 + 7.1.sqs-block-buttonButton block wrapper7.0 + 7.1.sqs-block-formForm block wrapper7.0 + 7.1.sqs-block-videoVideo block wrapper7.0 + 7.1.sqs-block-spacerSpacer block — empty vertical space7.0 + 7.1.sqs-block-lineHorizontal line / divider block7.0 + 7.1.sqs-block-codeCode block — custom HTML/CSS/JS injection point7.0 + 7.1.sqs-block-quoteQuote / pull-quote block7.0 + 7.1.sqs-gallery-block-gridGallery block in grid layout mode7.0 + 7.1.sqs-gallery-block-slideshowGallery block in slideshow mode7.0 + 7.1🔤 Typography
13 selectors
SelectorDescriptionVersion
h1Heading level 1 — mapped to Heading 1 in site styles7.0 + 7.1h2Heading level 2 — section titles7.0 + 7.1h3Heading level 3 — subsection titles7.0 + 7.1h4Heading level 4 — small headings7.0 + 7.1pParagraph text — inherits body font settings7.0 + 7.1.sqsrte-largeLarge text style applied via the text editor7.0 + 7.1.sqsrte-smallSmall text style applied via the text editor7.0 + 7.1.sqs-block-html h1H1 inside a text block specifically7.0 + 7.1.sqs-block-html h2H2 inside a text block specifically7.0 + 7.1.sqs-block-html h3H3 inside a text block specifically7.0 + 7.1.preFlexPre-flexbox layout text container (legacy)7.0blockquoteBlockquote element in rich text7.0 + 7.1.sqs-block-quote .sqs-block-contentContent inside a standalone quote block7.0 + 7.1🖼️ Images
9 selectors
SelectorDescriptionVersion
.sqs-imageSquarespace image wrapper (legacy loader class)7.0.image-blockImage block top-level container7.0 + 7.1.sqs-block-image .image-block-wrapperInner wrapper that handles aspect ratio and cropping7.0 + 7.1img[data-src]Lazy-loaded image before it loads (has data-src, not src)7.0 + 7.1img.loadedImage after lazy-load completes — now visible7.0 + 7.1.image-block-outer-wrapperOutermost image wrapper — margin and alignment7.0 + 7.1.sqs-image-contentImage content area (inside the wrapper)7.0.design-layout-posterPoster-style image layout with text overlay7.1.section-background imgBackground image of a section7.1📝 Blog
12 selectors
SelectorDescriptionVersion
.blog-itemIndividual blog post wrapper (on list/grid pages)7.0 + 7.1.blog-item-titleBlog post title element7.0 + 7.1.blog-item-contentBlog post body content area7.0 + 7.1.blog-item-metaPost metadata: date, author, categories7.0 + 7.1.blog-listBlog listing page in list layout7.0 + 7.1.blog-gridBlog listing page in grid layout7.0 + 7.1.blog-item-wrapperWrapper around each blog item in listing views7.0 + 7.1.blog-item-top-wrapperTop section of a blog item (thumbnail area)7.0 + 7.1.blog-item-excerptExcerpt text shown in listing views7.0 + 7.1.blog-more-linkRead More link at end of excerpts7.0 + 7.1.blog-item-categoryCategory label on blog posts7.0 + 7.1.blog-item-authorAuthor name on blog posts7.0 + 7.1📋 Forms
10 selectors
SelectorDescriptionVersion
.form-wrapperOuter wrapper for the entire form7.0 + 7.1.field-listContainer for all form fields (<fieldset>)7.0 + 7.1.form-itemIndividual form field wrapper (label + input)7.0 + 7.1.field-elementThe actual input, textarea, or select element7.0 + 7.1.form-button-wrapperContainer for the submit button7.0 + 7.1.form-submission-textSuccess message shown after form submit7.0 + 7.1.form-item .titleField label text7.0 + 7.1.form-item .descriptionHelper text below a form field7.0 + 7.1.form-item.required .title::afterAsterisk indicator on required fields7.0 + 7.1.field-errorValidation error message on a field7.0 + 7.1📦 Summary Blocks
10 selectors
SelectorDescriptionVersion
.summary-block-wrapperOuter wrapper for the entire summary block7.0 + 7.1.summary-itemIndividual item in a summary block7.0 + 7.1.summary-thumbnailThumbnail image for a summary item7.0 + 7.1.summary-titleTitle text of a summary item7.0 + 7.1.summary-excerptExcerpt text under a summary item7.0 + 7.1.summary-metadata-containerMetadata area (date, author) on summary items7.0 + 7.1.summary-read-more-linkRead More link on summary items7.0 + 7.1.summary-block-setting-design-listSummary block in list layout mode7.0 + 7.1.summary-block-setting-design-gridSummary block in grid layout mode7.0 + 7.1.summary-block-setting-design-carouselSummary block in carousel layout mode7.0 + 7.1📱 Mobile / Responsive
9 selectors
SelectorDescriptionVersion
@media screen and (max-width: 768px)Standard mobile breakpoint — tablets and below7.0 + 7.1@media screen and (max-width: 640px)Small mobile breakpoint — phones only7.0 + 7.1.header-menu-nav-wrapperMobile menu navigation wrapper7.1.header-burgerHamburger menu toggle icon7.1.header-menu-nav-itemNav item inside the mobile overlay menu7.1.sqs-block-content imgImages inside blocks — often need max-width: 100% on mobile7.0 + 7.1@media screen and (max-width: 1024px)Tablet breakpoint — useful for two-column to one-column shifts7.0 + 7.1.header-display-desktopElements shown only on desktop header7.1.header-display-mobileElements shown only on mobile header7.1A little over your head?
No shame — this stuff is hard. Let the pros handle it.