We’re all aware that certain colors can impact feelings, behaviors and emotions. In fact, color choice can be so significant in web design that it can determine whether someone decides to make a purchase or move on to the next site. The use of colors on your website can help build trust, radiate positive energy, spark creativity and more.

This article talks about how to accomplish one of the biggest trends in web design right now - changing the color of one word in a sentence. Changing the color of one word can really elevate your site design and spark emotion amongst your audience. Below, I’m going to show you how to achieve this with some simple CSS. You’ll just need to copy and paste!

February 2023 Update:
This solution only applies to 7.0 sites. Squarespace 7.1 has gifted us with the wonderful ability to easily change the colors of individual words, directly in the editor.

How to change the color of one word with CSS

You can use this method for headings or paragraph text. We’ll be utilizing the ‘italicize’ option for this. Meaning, we’re going to add some CSS that changes the color of a word when we italicize it.

Get an HTML color code from a website such as htmlcolorcodes.com. The HEX code will look something like this: #FF5733. You can also use an RGB or HSL
Open up your site’s Custom CSS (Design > Custom CSS)
Copy & Paste the CSS below for the type of text you would like to alter (HEADING 1, HEADING 2, HEADING 3 or PARAGRAPH TEXT). **MAKE SURE TO REPLACE THE COLOR CODE WITH YOUR OWN
Once you’ve added your CSS, simply italicize the word you would like to change to color of

HEADING 1

h1 em {   color: #d4a7c4;   font-style: normal; }

HEADING 2

h2 em {   color: #d4a7c4;   font-style: normal; }

HEADING 3

h3 em {   color: #d4a7c4;   font-style: normal; }

PARAGRAPH/NORMAL TEXT

p em {   color: #d4a7c4;   font-style: normal; }

NOTE: If you want the colored word to remain italicized, simply remove this line from your code.

font-style: normal;

Questions?

Comment below and I’d love to help you out! Happy designing!

Browse Premium Squarespace Templates

My modern, service-based templates are designed for entrepreneurs and small businesses who are looking for a professional website design without breaking the bank. Each one of my templates include video tutorials for easy content upload / style tweaks. I also include my Advanced SEO Guide (a $500 value). This guide contains the exact techniques I use to help my SEO clients land on Google page 1.

Squarespace Template Shop