[go: up one dir, main page]

0% found this document useful (0 votes)
375 views1 page

SQUARESPACE CSSCheatSheet - V2

This document provides a cheat sheet of common CSS selectors and properties for Squarespace templates. It includes selectors for elements like headings, links, buttons, as well as common classes for things like navigation menus, banners, forms, and more. It also lists some common CSS properties and example values for styling elements with properties like color, size, spacing, and opacity.

Uploaded by

Brandon Olvera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
375 views1 page

SQUARESPACE CSSCheatSheet - V2

This document provides a cheat sheet of common CSS selectors and properties for Squarespace templates. It includes selectors for elements like headings, links, buttons, as well as common classes for things like navigation menus, banners, forms, and more. It also lists some common CSS properties and example values for styling elements with properties like color, size, spacing, and opacity.

Uploaded by

Brandon Olvera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Squarespace CSS Cheat Sheet

Common Element Selectors

Hyperlinks a

Italic Copy em
TEXT

Bold Copy b, strong

Headings h1, h2, h3, h4

Body Copy p

Common Class Selectors

Header #header

Navigation Menu .header-nav-list

Navigation Menu Item .header-nav-item

Navigation Folder .header-nav-item--folder

Folder Item .header-nav-folder-item


HEADER

Social Icons .header-actions .icon--fill svg

Folder Menu .header-nav-item--folder

Folder Menu Items .header-nav-folder-item

Logo .header-title-logo

Button .header-actions

Announcement Bar .sqs-announcement-bar

Announcement Bar X .sqs-announcement-bar-close

All Buttons .sqs-block-button-element

Primary Button .sqs-block-button-element--medium


BUTTONS

Secondary Button .sqs-block-button-element--large

Tertiary Button .sqs-block-button-element--small

All Button Hover .sqs-block-button-element:hover

Product Block .sqs-block-product

Product Block Price span.sqs-money-native

Product Block Title a.product-title


ECOMMERCE

Shopping Cart Icon .header-actions-action--cart .icon

Shopping Cart Page body#cart

Shopping Cart Page Title .cart-title

Nothing In Cart Text .empty-message

Product Price .product-price

Purchase Confirmed Page #confirmed-page

Newsletter Block .newsletter-block


NEWSLETTER BLOCK

Title .newsletter-form-header-title

Description .newsletter-form-header-description

Form Fields .newsletter-form-field-element

Button .newsletter-form-button

Footnote .newsletter-form-footnote

Form .form-wrapper

Form Fields .field-list


FORMS

Form Title .title

Captions .captions

Form Field Text .field-element

Lightbox .lightbox-content
LIGHTBOX FORM

Form Fields .field-list

Form Title .form-title

Form Field Titles .title

Button input.button

Entire Pop-Up .sqs-slide-layer-content


POP-UP

Pop-Up X .sqs-popup-overlay-close

Pop-Up Overlay .sqs-slide-layer


BANNER SLIDESHOW

Title h2.list-item-content__title

Description .list-item-content__description

a.list-item-content__button.
Button
sqs-block-button-element

Entire Footer #footer-sections

Lines .sqs-block-horizontalrule hr

Archive Block .archive-block


MISC

Accordion Title .accordion-item__title

Accordion Description .accordion-item__description

List Cards Item .list-item

Summary Block .summary-item-list

Common Properties + Example Values

Description Property Example Value

Text color color: blue;

Font size font-size: 24px;

Typeface font-family: Helvetica;

Font boldness font-weight: 600;

Text alignment text-align: left;

Background color background-color: #000000;

Corner curvature border-radius: 10px;

Opacity opacity: 0.5;

Case of text text-transform: uppercase;

Space around element margin: 20px;

Space with element padding: 10px;

You might also like