Squarespace CSS Cheat Sheet
Publish Date: 12/09/2021
Posted By: Tina
Squarespace CSS Cheat Sheet
1. Install a custom font
1 - COPY + PASTE
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.
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:
Inline:
Card:
Poster:
Overlap:
Stacked:
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
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.
One Response
Good post. I learn something new and challenging on blogs I stumbleupon on a daily basis. Its always useful to read content from other writers and use a little something from their sites.