How To Change The Color Of Just One Word In Squarespace Headings

Squarespace has a lot of neat features built into the platform. But, sometimes, you just want to break free from the template and add a bit of visual appeal and interest. That’s exactly where CSS comes in — you can achieve a lot and really turn your Squarespace website into something special.

In this quick and easy Squarespace tutorial, I’ll show you two ways to use CSS to change the color of just one word in your Squarespace text — whether that’s headings or paragraph text. Watch the tutorial or read the transcript below.

Transcript: How to Change the Color of Just One Word in Squarespace Headings

Hey guys welcome back to my channel. Today, I have a super fun tutorial for you that actually came as a request from one of my subscribers so I'm going to show you how you can change the color of just one word in your Squarespace headings.

Now this— even though I'll show you the method for the heading but you can use the same principle to change the color of just one word or as many words as you want in like your paragraph text.

Method One: Change The Color Of One Word With Span Tags

So this is the look that we are going to be recreating today so let's get started. The first thing you're going to do is you're going to create a page or you're going to go to the page that you want to make this change on.

So I'm creating a new page and I'm going to name it testing color change— just keeping it simple here. So once you've created the page or you located the page where you want to make this change on — I'm going to click on add section and we're going to go with text— and I'm just going to use this combination of text that has a header and a little bit of body text.

So there are two ways to do this— and I'm going to show you both methods so that you can use whichever one you prefer.

So the first one — we're going to add a code block. And then, within the code block we're going to delete this text and we're going to put in a heading 2 and we're going to start typing it out.

So I'm going to say make it like this and then I'm going to add an extra tag called span and I'm going to give it a class of— let's say accent— and I'm going to close that tag.

And then, in between these angled brackets, I'm going to add the rest of my text — and stand out— like that.

Then to center this; I'm going to add— I'm going to put my mouse before the h2 tag and I'm going to open up another angled bracket. I'm going to type in center and then I'm going to add another angled bracket and then this is going to add the center tags but nothing is happening with the text.

So I'm just going to copy the closing center tag like so — delete it here and paste it after the closing h2 tag. And now this text is centered.

So now that we have that, now we have to make it our desired color by using this class, accent class is going to help us style the text.

So I'm going to click on done and then I'm going to go to Home > Design > Custom CSS and I'm going to type in the name of the class preceded by a dot because that's how you signify a class in CSS.

We're going to add accent then I'm going to open curly brackets and in between I'm going to add color, colon, and let's say… orange and then I'm going to add the semicolon.

Of course, you don't have to put in the words orange — you can put in the hex code for your brand color if you have it— I just used orange to make it easy to follow and it was the first color that popped up to be honest.

So that's the first way to do it, however the downside for this is that you're going to have to remember to add that span class or span tag with the class of accent to every single bit of code that you want to change.

So basically — and that can sometimes mess up your text. So let's say that you're adding text— so let's add another text block. Now, if you want to continue this paragraph— if you want to change the color of these words, you'd essentially have to remember to add a code block because you can't do it— you can't just add a dot and make this turn this into a span class.

So you'd essentially have to add a code block every time you want to make this change and then write everything in the code, and then you'd have to remember to add the p tag for the paragraph, or the h tag for the headings, and whatnot, and that can get complicated pretty quick.

So I want to show you a slightly easier method for achieving the same effect. So I'm going to delete this and I'm going to remove that.

Method Two: A Neat CSS Trick Using The Bold Font Weight

And now what I'm going to do is—Ii'm going to edit this text that I have and I'm going to highlight the word that I want to change the color for, and I'm going to make it bold.

And then I'm going to go back to my Custom CSS and now what I'm going to do is — I'm going to say h2 strong — which signifies that I only want to apply this change when a heading 2 is bolded— I'm going to open up another set of curly brackets and I'm going to say color red and add the semicolon.

So essentially, what this code does is it eliminates the need for you to write, to add the code block and remember to add all those html tags. But this basically means that whenever I change the color of the header to — or not the color— whenever I change the weight of the header 2— so whenever I make it bold I want it to be red.

And then, if you don't want the font to actually be bold, what you can do now is add another line of code that says font-weight: normal; and that will reset it back to normal and it'll be the same weight as the rest of your heading which looks nice.

Now, you can do this for any other heading. So for example, let's say you wanted to implement this change for heading one. You would simply replace h2 with h1. Now, because this is not an h1, nothing's happening— other than text being bold— but as soon as I change this to heading 1— as you can see now this part is red, as we have indicated in our CSS.

And you can do the same thing for the paragraph text. So let's say that whenever you want— whenever a paragraph is bolded— let's say that we want to bold this sentence and we want to change the color. So i'm going to bold that and now you have — you've changed the color of the paragraph.

So if you decide to do this in paragraphs — just remember that uh if you decide to make your paragraph bold — it'll automatically change the color, so keep that in mind when you're making these changes. But if it's— if you just want to make it work for headings, then you can definitely add this; you can you can definitely achieve it this way.

So let's change that back to h1 — the way we had it and that is how you can change the color of just one word or a few words in your heading — whether it's a heading 1, heading 2, heading 3 or whatever it is that you want.

That's it for this video. If you liked it, I'd appreciate it if you hit that subscribe button and give me a thumbs up so I know to create more videos like these. And if you're looking for a little help with your website, I have a free training that you can sign up to watch instantly below.

Final Thoughts

As you can see, with a just a bit of CSS, you can customize your Squarespace website and take it to the next level.

If you’re looking for a Squarespace designer that can help you take your website to the next level, look no further - you can check out my services below. I would love to chat with you about how we can work together and bring your vision to life!