Squarespace Cheat Sheet

Squarespace, being a website builder, may not expose raw CSS files for direct editing in the same way traditional web development would. Instead, Squarespace provides a CSS editor within its platform where you can add custom CSS code to modify the appearance of your site.

Here are some CSS snippets that you might find useful for common customization tasks on Squarespace:

General Styles

Change Font:

body {
    font-family: 'New Font', sans-serif;
}

Adjust Font Size:

h1 {
    font-size: 28px;
}

Header Styles

Change Header Background:

header {
    background-color: #333;
}

Remove Header Border:

header {
    border: none;
}

Navigation Styles

Change Navigation Link Color:

header a {
    color: #ff0000;
}

Bold Navigation Links:

header a {
    font-weight: bold;
}

Page Styles

Adjust Page Background:

.page {
    background-color: #f0f0f0;
}

Center Content:

.content {
    margin: 0 auto;
}

Footer Styles

Change Footer Background:

footer {
    background-color: #444;
}

Change Footer Text Color:

footer p {
    color: #fff;
}

Button Styles

Customize Button Color:

.sqs-block-button-element {
    background-color: #008080;
    color: #fff;
}

Round Corners of Buttons:

.sqs-block-button-element {
    border-radius: 5px;
}

Image Styles

Add Border to Images:

img {
    border: 2px solid #333;
}

Add Shadow to Images:

img {
    box-shadow: 3px 3px 5px #888888;
}

Custom CSS Editor in Squarespace

Access Custom CSS Editor:

• Go to Design > Custom CSS in your Squarespace dashboard.

Apply Custom CSS Site-Wide:

/* Applies to the entire site */
body {
    background-color: #f5f5f5;
}

Target Specific Pages or Sections:

/* Target a specific page by its unique identifier */
#collection-5f34a36d22776d49f95351c2 {
    background-color: #fff;
}

/* Target a specific section on a page */
#block-yui_3_17_2_1_1630401462042_4995 {
    padding: 20px;
}

Remember, these are just examples, and you should adjust the values according to your design preferences. Additionally, Squarespace regularly updates its platform, so the CSS structure might change. Always check the Squarespace documentation for the latest information.