Internet, Networking, & Security Web Development How to Change the Color of a Word With the Span Tag and CSS by Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated on November 07, 2018 alvarez / Getty Images Web Development CSS & HTML Web Design SQL Tweet Share Email 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 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.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.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.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.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. 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?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. Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Email Address Sign up There was an error. Please try again. You're in! Thanks for signing up. There was an error. Please try again. Thank you for signing up. Tell us why! Other Not enough details Hard to understand Submit