7 Squarespace CSS Codes That I Use the Most
When it comes to creating a stunning Squarespace website, sometimes the smallest changes can make the biggest difference. Whether you're looking to customize your site’s appearance or enhance its functionality, a few simple CSS codes can go a long way. In this post, I'm sharing the seven CSS codes I use most often for my clients' Squarespace websites. These codes are easy to implement, practical, and designed to make a noticeable impact on your visitors' experience. Let’s dive in!
1. Remove hyphens on mobile
Go to Pages → Website Tools → Custom CSS
Paste the following CSS Snippet:
ALL TEXT
body {-webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; }
HEADING TEXT ONLY
h1, h2, h3, h4 {-webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; }
2. Add a vertical Line
Add a code block on the page where you want the vertical line
Paste this HTML Snippet into the code block. Make sure you delete the template text in the code block first.
<div class="vertical-line"></div>
Then go to Pages → Website Tools → Custom CSS
Paste the following CSS Snippet:
ALL DEVICES:
.vertical-line {
background: #000000;
width: 1px;
height: 200px;
margin: 0 auto;
}
DESKTOP AND TABLET ONLY:
@media screen and (min-width: 768px) {
.vertical-line {
background: #000000;
width: 1px;
height: 200px;
margin: 0 auto;
}
}
3. Change the dropdown menu color
Go to Pages → Website Tools → Custom CSS
Paste the following CSS Snippet:
.header-nav-folder-content {
background-color: #000000 !important;
}
.header-nav-folder-item a {
color: #FFFFFF !important;
}
Change the “#000000” and “#FFFFFF” to your desired HEX codes.
4. Change font sizes on mobile
Go to Pages → Website Tools → Custom CSS
Paste the following CSS Snippet:
@media only screen and (max-width: 640px) {
h1 { font-size: 40px !important; }
h2 { font-size: 30px !important; }
h3 { font-size: 25px !important; }
h4 { font-size: 20px !important; }
.sqsrte-large { font-size: 18px !important; }
p { font-size: 15px !important; }
.sqsrte-small { font-size: 12px !important; }
pre { font-size: 12px !important; }
}
Remove any heading or paragraph designations that don’t apply.
Change the “40px”, etc, to the desired font size.
5. Remove lines under links
Go to Pages → Website Tools → Custom CSS
Paste the following CSS Snippet:
a {
text-decoration: none !important;
}
6. Upload a custom font
Pages → Website Tools → Custom CSS → Custom Files → Upload your font file.
Paste the following code into your CSS field to embed your font into the site.
@font-face {
font-family: 'FontTitle';
src: url('FontURL');
}
Change ‘FontTitle’ to the name of your font. Change ‘FontURL’ to the url that appears when you open “Custom Files” again and select the font you want to embed.
Paste the following code into your CSS field to customize which header or paragraph text you want that font used for.
h1 {font-family: 'FontTitle';}
h2 {font-family: 'FontTitle';}
h3 {font-family: 'FontTitle';}
h4 {font-family: 'FontTitle';}
p {font-family: 'FontTitle';}
Remove any heading or paragraph designations that don’t apply.
Change “FontTitle” to the name of the font.
7. Use two different fonts on one line
After you’ve uploaded your font (above), add the following code into a markdown block wherever you want the text to go:
Add your first sentence part here and <span style="font-family:fontname;color:color;font-size:1em;">second part here</span>
Then change the text to reflect your actual sentence.
If you want to customize both halves of the sentence, use the following code in your markdown instead:
<span style="font-family:fontname;color:color;font-size:1em;"> Add your first sentence part here and <span style="font-family:fontname;color:color;font-size:1em;">second part here</span>
Add “<center>” at the beginning of the code snippet to center your text.
If you need help with branding, website design, or more advanced CSS customizations to make your Squarespace site truly stand out, our team is here to help. Reach out today, and let's create something amazing together!
