How to Change Text Color in HTML

Customize your web page with colorful text

What To Know

  • Add a Style attribute to the tag: style="color: #FFFFFF"
  • Add a style section to the HTML.
  • Create a separate CSS stylesheet: color: #FFFFFF;

This article explains how to specify text colors in HTML using three different methods. It also explains the ways you can specify the colors you want for your text.

3 Ways to Specify Colors

In HTML, colors can be specified in a few ways:

  • The simplest is using an English color name such as green or cyan. If your task is straightforward, this may do the trick, but be aware that HTML’s vocabulary in this regard is limited.
  • Another approach is setting an RGB color value, where three magnitudes are given, one each for the composite color’s intensity of red, green, and blue, respectively. Use RGB color values to adjust the shading on a standard color or to use the exact value for the hue you want.
  • You can supply a hex color value, which is a pound sign followed by a six-digit hexadecimal number. If you want to get precise with your colors, go this route.

Programs You Need for Changing HTML Colors

The bare minimum toolkit for tweaking text color in HTML is a program for editing the HTML itself and a browser for testing it. You can edit HTML in a text editor, a simple program such as Notepad that writes pure text, or in a code editor optimized for processing programming syntax. You cannot use a word processor like Microsoft Word, LibreOffice, or Google Docs because these programs insert invisible formatting called control characters which are incompatible with HTML.

Any web browser can display the HTML file you want to examine. Go to the folder containing the HTML file and click on it, and your browser should render it. If not, right-click on the file and open it in a browser.

Method 1: Wrap the Text in Tags With Color Styling

The most straightforward technique for coloring text is to add the style attribute and desired value, comprised jointly of the color keyword and color specification (the hexadecimal code, RGB code, or name), to the HTML tag wrapping the target text.

If you want to adjust text that is already wrapped in a tag, such as a paragraph tag, go to the opening tag and insert the following before the closing angle-bracket: a space, the word style, an equals sign and then, all inside one set of quotes, the color keyword, colon, space and the color specification that you want.

Code editor with HTML and highlighted sections on the left and an HTML preview and highlighted results on the right

If the text you’re altering isn’t wedged between tags—maybe you only want to adjust some of the text inhabiting an element — wrap it in span tags and add the style attribute with the color value keyword and specification as above.

Code editor with HTML and highlighted sections on the left and an HTML preview and highlighted results on the right

Method 2: Add a Style Section in the HTML Document Header

In the

HTML tag names here are the same as those specified within the

section but without the angle brackets. For example, the

specified under

Code editor with HTML and highlighted sections on the left and an HTML preview and highlighted results on the right

However, you can also style HTML by class, which is like a label that is applied to select instances of a tag within the

section. For example, if you only want one particular

tag to be colorful, create a class with a custom period-prepended name in the

Code editor with HTML and highlighted sections on the left and an HTML preview and highlighted results on the right

Method 3: Create and Link a Separate CSS Document

The most organized way to set text color and an infinite range of other styles is to create a separate CSS stylesheet and link to it in the HTML document’s

Place your styles, formatted just as you would in a

Code editor with HTML and highlighted sections on the left and an HTML preview and highlighted results on the right, and a CSS editing panel with highlighted sections on the bottom
Format
mla apa chicago
Your Citation
Terrasi, Jonathan. "How to Change Text Color in HTML." ThoughtCo, Jun. 3, 2021, thoughtco.com/change-text-color-in-html-4174619. Terrasi, Jonathan. (2021, June 3). How to Change Text Color in HTML. Retrieved from https://www.thoughtco.com/change-text-color-in-html-4174619 Terrasi, Jonathan. "How to Change Text Color in HTML." ThoughtCo. https://www.thoughtco.com/change-text-color-in-html-4174619 (accessed June 16, 2021).