This post may contain affiliate links. We may receive a commission for purchases made through these links (at no cost to you, of course! 🙂)

Squarespace does it’s best to make building a website easy and DIY friendly, and we totally stan that. Unfortunately sometimes that means giving us less customization options.

I totally understand where they’re going with this—as soon as you start offering DIYers all of the options, it’s so easy to get carried away and go overboard. Squarespace limits a lot of customization options for good reason, and that’s why it’s so easy to DIY a website that looks sleek and professional.

But sometimes there’s just an option that you really need—this happens quite a bit and with a variety of things, but today we’re talking about changing the color of your font or your text within just one text block.

Squarespace has the Global Design Styles—to keep things easy, of course—but it can be frustrating when you want to have light text on a dark background in one section, and the opposite on another section, but Squarespace only gives you one font color option for the whole site.

This is just an example of a time where you might want to change the color of just a single block of text, but there’s many situations where this pops up.

Maybe you just want one Block to really stand out from the rest, if that’s the case, then this tutorial will help you.

PS- if you’re looking for a tutorial on how to create a background color behind your text, check this one out.

Let me just preface this by saying, it’s important to know which version of Squarespace you are using. Although this tutorial basically the same either way, it will apply more to those using Squarespace 7.0, as 7.0 has far less Color options than 7.1.

The new version, Squarespace 7.1, has really upped their color settings game. You can create different 8 different color profiles with whatever colors you want to, ant then you can choose between these different color themes for each section of your page. This makes it A LOT easier to vary up your colors and have accent fonts.

So, if you are using Squarespace 7.1 and you haven’t looked into the colors yet, I would recommend checking those out before you jump into this tutorial. If you can use the native Squarespace features to create your desired effect, then that’s usually better then coding it in, which we’re going to dive into now.

The first method…

Using a Block Identifier and adding basic CSS

Step 1 : Identify your block

Each Block on your site (eg text blocks, image blocks etc) has a different identification number. Once you find the identification number of a certain block, you can easily make CSS changes to it over in the Squarespace CSS Editor.

How to find the Block ID Number:

If you’re using Google Chrome: Download this Squarespace Block Identifier extension for Chrome. This extension is designed to help you find the Block Identification Number of each Block on your Squarespace Site.

Open up the page with the block you want to identify, click on the Identifier Tool in your Chrome Extensions and it will instantly reveal the Block Identification Numbers (which will be something like #block-53c818fd6d3f39517aed or #block-yui_3_17_2_1_1556302617094_72323)

Click on the Block you want to use and it will automatically copy the Block number for you!

If you don’t use Google Chrome: Firstly, I recommend downloading it even if it’s just to use option one, as it will save you a bunch of time.

Otherwise, you can right click on the block and then click Inspect. Somewhere in the code for that certain object it will say ID=block etc. Though there are a lot of “ID’s” so make sure you look for the correct one, it needs to start with block.

TIP: Make sure the Block number starts with Block. If it starts with anything else, it’s not the correct ID.

Step 2: Add your CSS

Once you have found the correct Block ID, make sure you have it copied.
Then, head over to Design > Custom CSS.
I recommend having the page you’re planning to work on (with the said block) open while you are working on the CSS, because when you make the CSS changes you will be able to see them happening on the page!
Paste your Block ID into the CSS editor, then add a hash (#) at the beginning of it so it now looks like: #block-53c818fd6d3f39517aed
Copy and paste the code below into your CSS editor:

#block-53c818fd6d3f39517aed p,
#block-53c818fd6d3f39517aed h1,
#block-53c818fd6d3f39517aed h2,
#block-53c818fd6d3f39517aed h3,
#block-53c818fd6d3f39517aed h4 {
color: #ffffff !important;
}

Replace the Block Id with your unique ID
Replace the P/h1/h2/h3 with whatever style of text you are trying to target:
- If it’s regular Paragraph text it will be p
- If it’s Heading 1 text it will be h1
- If it’s Heading 2 text it will be h2 (and so on!)
- If you are wanting to target multiple styles (say H1 and H2) within one block, you’ll need to have each one separated by a comma, just in the example above.
- Remove any lines that you don’t need.
- The last line doesn’t need a comma after it.
Replace the color hex code with whatever color you want. Not sure what hex code you need? Use this website to create your own.
You should be able to see the changes happening while you adjust this in your CSS editor. If you can’t, it’s likely that you have the Block ID wrong (or maybe you have altered the code, compare it to the code above to make sure you haven’t accidentally deleted or changed something!)

Once you’re happy with how your CSS looks make sure to hit Save in the top left hand corner!

Opt-ins

The second method…

Using a Code Block and basic HTML

This method may be better or easier in some situations, and it works just as well.

Step 1: Add a code block

Just like you would add your text block, add a code block instead:

Step 2: Add your code

Instead of just adding CSS styles to a Text Block like we did above, this time we’re actually going to add our text and our CSS styles within the code box, so everything is contained in the one box.

Copy and paste the code below into your Code Block:

<div class="coloredtext">

<h2>Type your Heading 2 text in here</h2>
<h3>Type your Heading 3 text in here</h3>
<p>Type your Paragraph text in here</p>

</div>


<style>

.coloredtext h1, 
.coloredtext h2, 
.coloredtext h3, 
.coloredtext h4,
.coloredtext p 
{color: #ffffff !important;
}

</style>

The code within the <div> tags is the HTML part.

The <h2> <h3> and <p> tags indicate Heading 2, Heading 3 and Paragraph text. Type all your text within these tags. You can experiment with these to get the desired look you’re going for.
If you just want one style of text, remove the other text and tags.
Remember you can use H1 for Heading 1, H2 for Heading 2, etc.

The code within the <style> tags is the CSS

This is where you control the font color.
If it’s regular Paragraph text it will be p
If it’s Heading 1 text it will be h1
If it’s Heading 2 text it will be h2 (and so on!)
If you are wanting to target multiple styles (say H1 and H2) within one block, you’ll need to have each one separated by a comma, just in the example above.
Remove any lines that you don’t need.
The last line doesn’t need a comma after it.

The key here is to make sure that div class matches up with the CSS class. For example <div class=”coloredtext”> and the CSS class .coloredtext

You can change this class name to whatever you want, as long as they are the same they will be linked together.

You’ll also want to make sure your HTML matches with your Styles. For example if you are using <h1> and <h2> in your HTML, you will want to make sure you are using the h1 and h2 in your Styles.

When you’ve pasted the code into the block, make sure to hit save on the Code Block and then save again on the page section.

That’s it! Pretty simple right.

When you can master the basics of some simple HTML and CSS, your Squarespace site becomes WAY more customizable.

But remember to not go too overboard, while it’s awesome to play around with HTML and CSS, from a design perspective it’s best to keep your colors as consistent as possible, and from an SEO perspective, HTML and CSS can slow your site down or cause problems if not done correctly. So just be aware of that before you go adding bits of code all over your website :)

I hope you’ve enjoyed this post!

Make sure to check out some of our other quick code tricks for customizing your Squarespace site below! 👇

How to customize your Squarespace cookie banner design
How to animate your links on hover in Squarespace 7.0 & 7.1
How to create a sticky header nav in Squarespace
How to add a background color to a text block in Squarespace
6 fun code snippets for your Squarespace web design

If you liked this post, Pin it to Pinterest! 👇🏻

How to change the font color in one text block on Squarespace