TL Web Design Studio

Squarespace CSS Cheat Sheet

Squarespace CSS Cheat Sheet

So you’ve DIY’d your Squarespace site and it looks… well… like a Squarespace site? You’re probably looking at other Squarespace sites thinking it must’ve been complicated. You’d be surprised how much of a difference a little bit of CSS would make. Here are my top 5 favorite CSS cheats in a quick CSS cheat sheet for Squarespace.

1. Install a custom font

How to use custom fonts in Squarespace 7.1

1 - COPY + PASTE

Start by copy + pasting the code below into your Custom CSS – you can find this under Design > Custom CSS
 
Use this code snippet: @font-face @font-face {font-family: “”; src: url(“”) format(‘opentype’);}

2 - UPLOAD FILE

  • At the bottom of the CSS window, you’ll see ‘Manage Custom Files’. Click that and find your font file to upload it.

3 - FILL IN QUOTATIONS

  • Fill in the first set of quotation marks (after “font-family:”) and name your font. 

    Next, Click between the second set of quotation marks in the “url(”)” and then click on the file you uploaded and you should see the file name added in.

4 - Assign your font to text classes

  • Now that your font is uploaded you’ll have to assign it to specific text classes to start using it on your website.

  • Copy + paste a code snippet below where you’d like to use your custom font.

  • Insert the name you assigned to your font between the quotation marks.
  • // Heading 1
    h1 {font-family: ’FONT-NAME’;}

  • // Heading 2
    h2 {font-family: ’FONT-NAME’;}

  • // Heading 3
    h3 {font-family: ’FONT-NAME’;}

  • // Heading 4 
    h4 {font-family: ’FONT-NAME’;}

  • // paragraphs
    p {font-family: ’FONT-NAME’;}

I found this video that does a good job of explaining this process.

2. Use background banners to add dimension.

This doesn’t just happen with Squarespace. I see it happen with any platform. You know those solid bands of color that can get kind of repetitive as your scroll the page? An easy way to add visual interest within Squarespace is to use background banners.

Use half backgrounds.

I like creating these sort of graphics in Canva so my clients have access to edit them easily, and that is my goal to make your website as easy to manage as possible so you can focus on your business.

Here's how it looks

When you stack these two images on top of each other, it’ll create a section that has waves on the top and bottom. You can use this to highlight important sections of your website. You can also do split backgrounds, add in background graphics that align with your brand, or add fun patterns that will make your brand stand out. Check out my personal site for some examples or visit this client site in progress.

3. Create Custom Image Styles

Another way I like to create visual interest is through imagery. I personally like creating collages that align with a client’s brand in Canva so they can easily access and edit them for later use. Here are some other options for image styles built into Squarespace using a Squarespace template I’m designing.

Collage:

Brand and Web Design For Female Entrepreneurs In Service Based Businesses

Inline:

Brand and Web Design For Female Entrepreneurs In Service Based Businesses

Card:

Brand and Web Design For Female Entrepreneurs In Service Based Businesses

Poster:

Brand and Web Design For Female Entrepreneurs In Service Based Businesses

Overlap:

Brand and Web Design For Female Entrepreneurs In Service Based Businesses

Stacked:

Brand and Web Design For Female Entrepreneurs In Service Based Businesses

4. Add a background color to your headlines!

You may have noticed in some of the above photos that I have this bright green background/underline behind some of my headlines. I do this with some CSS to style any headlines I put in bold. Just copy and paste this code, change the hex code to one in your brand palette, and put your headline in bold to see your work.

// underline headlines
h1 strong, h2 strong, h3 strong, h4 strong {
text-transform:none;
font-weight:inherit;
background: linear-gradient(180deg,rgba(251,167,248,0) 50%, #dfde81 50%);} /* change #dfde81 to a hex code of one of your choice */

5. Add a marquee to highlight an important part of your site.

This is a really fun way to change up a basic Squarespace with a little bit of code. 

  • Add a code block to your Squarespace site where you want the marquee displayed.
  • Copy + paste this code into that code block. Edit “Snag a FREE Website Planner” to whatever you’d like displayed here.
 

//add to your code block
<div class=’marquee’>

<div class=’track’> <h3>

Snag a FREE Website Planner *Snag a FREE Website Planner * Snag a FREE Website Planner * Snag a FREE Website Planner * Snag a FREE Website Planner * </h3>

</div>

</div>

  •  Lastly, go into design>custom css, and add in this code:

 

//add to custom css

.marquee {

position: relative;

display: flex;

animation: moveLeft 14s linear infinite !important;

}

.track {

font-size: 36px;

white-space: nowrap;

min-width: 100%;

text-align: center;

padding-top: .5vh;

line-height: .9em;

color: #191c19;
}

.track a{

color: inherit;

text-decoration: none;

animation: text 10s infinite linear;

position:relative;

}

//to change directions change all left to right

@keyframes text{

0%{

left: 0%;

}

25%{

left:-10%;

}

50%{

left:-20%;

}

75%{

left:-30%;

}

100%{

left:-40%;

}

}

@media screen and (max-width: 600px) {
.track {
font-size: 20px !important;
}
}

The End

That’s it for my top 5 customization tips for Squarespace. I made a more thorough Squarespace CSS cheat sheet that details which CSS classes to target in Squarespace. It’s basically a really long list of CSS classes and IDs. I reference it often when I’m doing web design work and hope that it can be helpful for you too. You can download it below.
 
Otherwise, I hope this quick guide helps you in your Squarespace adventures. Thanks for coming to my Ted talk. Until next time!
 
XOXO,
-Tina

Get my free squarespace css cheat sheet

Looking for a quick and easy way to up your Squarespace CSS game? Look no further! Our free CSS cheat sheet has got you covered. With this handy reference, you’ll have access to essential CSS properties and values at your fingertips. 

Share this article :
Facebook
Twitter
LinkedIn

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *

WRITTEN BY
custom web design
Tina Henson
FOLLOW ON
Schedule a free consultation

Unlock the Secrets of SEO with Our Comprehensive Guide!

This guide is your key to unlocking the mystery of finding the right keywords, implementing them correctly, and creating content that consistently ranks on Google. Say goodbye to the stress of grappling with ever-changing IG algorithms!

This is the exact method I used to grow my own website traffic 240% in just 6 months. Get ready to see your traffic grow!