1. Technology

How To Change the Color of a Word With the SPAN Tag and CSS

By

Changing the color of a word using CSS and a <span> tag is easy. And once you've colored your text in this fashion, you'll know that it is valid XHTML. Plus, you avoid using deprecated tags and attributes like font. This article for beginning web developers who are new to HTML and CSS. It will help you learn how to use the HTML <span> tag and CSS to change the color of text on your pages.

Difficulty: Easy
Time Required: 2 minutes

Here's How:

  1. Open the web page you want to update in your favorite text HTML editor.
  2. In the document, find the words you want to be in a different color on the page. If you already have a <font color=""> tag in the document, start there.
  3. Place your cursor before the first letter in the word or group of words you want to change color. If you are replacing the <font> tag, select the entire tag, for example: <font color="blue">
  4. To change the text color to red, type:
    <span style="color: #f00;">
  5. Move your cursor to the end of the text that you want colored. If you are converting a <font> tag, select the entire closing tag, for example: </font>
  6. Type:
    </span>
  7. Delete any <font> tags you have left around the colored words. But they should have been overwritten by the new <span> tags with CSS.
  8. Save your page.
  9. Test the page in your favorite web browser.

Tips:

  1. You can put your style in the span tag itself, or in a class in the head of the document.
  2. You can change the text color to any color you would like. Use a color chart to find some codes.

What You Need

  • HTML Text Editor

©2014 About.com. All rights reserved.