How to customize any text color in Squarespace

content block

Apr 15

Ever stared at your website thinking, "If only I could make THAT word pop in bright red!" or "Why does ALL my text have to be the same boring color?" Well, guess what? You're about to discover some seriously cool tricks to jazz up your text!

In this tutorial, I'll walk you through everything from the super easy built-in options (that you might not even know about!) to my favorite "asterisk trick" that'll make you feel like a web design wizard! Don't worry if you've never touched code before - I promise to make this fun, simple, and totally doable, even if you're just getting started with Squarespace.

Ready to make your website text POP with personality? Let's dive in! ✨ You’ll find a step-by-step tutorial video below, and a detailed explination under the video with some examples and pro tips.

The Magic of the Site Styles Menu (My Secret Time-Saving Trick!)

First stop on our color adventure: the Site Styles menu! This is where the easy magic happens.

On the top right of your Squarespace editor, click the "Design" option and choose "Site Styles." Then head over to "Colors" and select whichever color theme you're using. (I usually stick with 2-3 main themes to keep things looking professional - in my example, I'm using "Lightest One" and "Dark One").

Now here comes my FAVORITE Squarespace hack that hardly anyone knows about: 🌟 Instead of scrolling through that looooong list of color options, just click directly on the section you want to customize! BAM! Squarespace will filter all the options to just show you the color settings for that specific section. Life-changing, right?!

For example, when I click on my list section, Squarespace shows me I can change the section title color, list item title color, and description color. Want your descriptions to be bright yellow? Just a couple of clicks and you're there!

But wait... do you see those bold words in the middle of the text? The built-in options won't let us change just those. That's when it's time to level up our code skills game!

Getting Creative with Custom Code

When the built-in options aren't enough and you want to get really creative, we can use some super simple custom code. No - custom CSS will not break your site. And no - it’s not nearly as complicated as some people make it seem. Trust me, I taught myself, and now I teach Squarespacers like you how easy it is to code, too!

Understanding Section IDs vs. Content Block IDs

Here's where the magic really starts! Every part of your Squarespace site has a unique identifier - think of it like a name tag. There are two main types:

Section IDs: These identify entire page sections (like a gallery section, a list section, etc.). When you use a section ID in your custom code, you're telling Squarespace: "Make changes to everything in THIS specific section only!"

Content Block IDs: These are even more specific - they identify individual content blocks within a section (like a single text block, a single quote block, etc.). Using a block ID lets you say: "Just change THIS specific block and nothing else!"

I use a free Chrome extension called the Squarespace ID Finder that reveals these "secret name tags" for any part of your page. It's a game changer and it’s free 🙌

Once you have the ID you want to use, open up your custom code panel by navigating to Pages → Website Tools → Custom CSS.
This magical little box is where all the fun happens!

Two code tricks I love to use

Want to make just your bold text stand out? That's where the "strong" trick comes in! In code language, "strong" is just another way of saying "bold text.” In this code example, only the bold text in #block-1234 would be red.

#block-1234 strong {
color:red!important
}

Okay, this next one is my ABSOLUTE FAVORITE CSS trick ever! Let's say you have two quote blocks side by side, and you want one to be blue and the other to stay in your brand color. Use the block id and then use an asterisk before your first curl bracket. This tell the computer browser to change the color of anything inside that content block that could have a font color