How to Change the Color of a Word With the Span Tag and CSS

You can specify font colors, sizes, and other parameters in an external CSS stylesheet. If you want to change the color of just one word or phrase, however, the easiest, simplest way is to use the tag inline. Inline CSS is just the way it sounds: It is added in the page's HTML, rather than an external stylesheet.

Here's how to change the color of a word using the tag:

1. Using your preferred text or HTML editor in code view mode, place your cursor before the first letter of the word or group of words you want to color.

2. Let wrap the text whose color we want to change with a tag, including a class attribute. The entire paragraph may look like this: This is text that is focused upon in a sentence.

3. Give that specific text a "hook" that we can use in CSS. Our next step is to jump to our external CSS file to add a new rule. 

   In our CSS file, let's add:

   .focus-text {

    color: #F00;

   }

   This rule would set that inline element, the , to display in the color red. If we had a previous style that set the text of our document to black, this inline style would cause the span text to be focused upon and stand out with the different color. We could also add other styles to this rule, perhaps making the text italics or bold to emphasize it even more?

4. Save your page.

   Test the page in your favorite web browser to see the changes in effect.

   Note that in addition to the , some web professionals choose to use other elements like the or tag pairs. These tags used to be for bold and italics specifically, but were deprecated and replaced with and . The tags still work in modern browsers, however, so many web developers use them as inline styling hooks. This is not the worst approach, but if you want to avoid any deprecated elements, we suggest sticking with the tag for these kinds of styling needs.

Tips and Things to Watch Out For

While this approach works fine for small styling needs like if you need to change just one small piece of text in a document, it can quickly get out of control. If you find that your page is littered with inline elements, all of which have unique classes that you are using in your CSS file, you may be doing it wrong, Remember, the more of these tags that are in your page, the harder it is likely to be to maintain that page going forward. Additionally, good web typography rarely has that many variants of color, etc. throughout the page.