1. Home
  2. Computing & Technology
  3. Web Design / HTML

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

By , About.com Guide

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 will help you learn how to use the 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. Find the words you want in a different color on the page. If you already have a 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.
  4. To change the color to red, type:
  5. Move your cursor to the end of the text that you want colored.
  6. Type:
  7. Delete any tags you have around the colored words.
  8. Save your page.
  9. Test it in your favorite 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 color to any color you would like. Use a color chart to find the codes.
What You Need:
  • Text Editor
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >