TB Web Design

Squarespace CSS Cheat Sheet

Squarespace CSS Cheat Sheet

Publish Date: 12/09/2021
Posted By: Tina

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

Download The CSS Cheat Sheet!

Check out my website templates

I focus on creating designs that are simple for users to navigate and easy for my clients to maintain. My goal is to make your website creation or redesign a smooth and positive experience and ensuring that you will be able to manage your own website after launch. I’ve been creating templates designed for online business owners. They are perfect for new businesses or for those that aren’t ready for the price tag that comes with custom web design and branding. 

I’ll be adding more designs and platforms as I finish passion projects between clients so if you can’t find something you love now, just subscribe to the blog to get notified when I release something new.

Ready to upgrade to something more customized to your unique small business needs? Check out my services for affordable custom website design for your small business.

Piter Bowman
Piter Bowman

Adipiscing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua enim.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments