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

With CSS, it is easy to set the color of the text in a document. If you want paragraphs on your page to be rendered in a certain color, you simply specify that in your external style sheet and the browser will display your text in that chosen color. What happens then when you want to change the color of just one word (or perhaps just a few words) within a paragraph of text? For that, you will need to use an inline element like the tag.

Ultimately, changing the color of a single word or a small group of words within a sentence is easy using CSS, and the tags are valid HTML, so do not worry about this being some kind of hack. With this approach, you also avoid using deprecated tags and attributes like "font," which is a product of a bygone HTML era.

This article is for beginning web developers who are likely new to HTML and CSS. It will help you learn how to use the HTML tag and CSS to change the color of specific text on your pages. That being said, there are some drawbacks to this method, which we will cover at the end of this article. For now, read on to learn the steps to change this text color. It is very easy and should take about two minutes.

Step By Step Instruction

1. Open the web page you want to update in your favorite text HTML editor. This could be a program like Adobe Dreamweaver or a simple text editor like Notepad, Notepad++, TextEdit, etc.
2. In the document, locate the words you want to be displayed in a different color on the page. For the sake of this tutorial, let's use some words that are within a larger paragraph of text. That text will be contained within the tag pair. Find one of two words whose color you'd like to edit.
3. Place your cursor before the first letter in the word or group of words you want to change color. Remember, if you are using a WYSIWYG editor like Dreamweaver, you are working in "code view" right now.
4. 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.

5. We have just used an inline element, the , to 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. 
6. In our CSS file, let's add:

7. .focus-text {

8.  color: #F00;

9. }

10. 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?
11. Save your page.
12. Test the page in your favorite web browser to see the changes in effect.
13. 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.