How to Change Text Color in HTML

Customize your web page with colorful text

Vector art image of a browser rendering a webpage in two different styles, separated by a slash across the middle of the page

filo/Getty Images

At a time when web development is more popular than ever, it pays to know how to bend HTML to your will. Changing text color is a simple trick you can manage in three ways.

3 Ways to Set Text Color

As a full-featured language, HTML gives you a variety of ways to customize a web page's look. Methods for changing text color include:

  • Alter the tag wrapping the text designated for color change. If you only need to colorize one or two sections of text, this is the simplest way.
  • Add a style section to the top of the HTML document. This may be best if your styling needs are more complicated but still restricted to a single HTML page.
  • Create a separate CSS stylesheet and link to it in the HTML document. This is ideal if you have exacting color needs, especially those that span multiple HTML documents.

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. If you want to adjust the shading on a standard color or know the exact value for the hue you want, this is for you.
  • 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 explicitly open it with your browser.

Method 1: Wrapping 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 <p> 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 a <p> element — you can wrap it in <span> and </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: Adding a Style Section in the HTML Document Header

In the <head> section of your HTML document (the area before the HTML the browser displays), add a <style> element encompassing HTML tag or class names and corresponding color setting consisting of the color keyword and the color specification.

HTML tag names here are the same as those specified within the <body> section but without the angle brackets. For example, the <p> specified under <style> is just p (not quoted). After each tag to be styled and a space is a subsection enclosed by curly braces holding the color keyword and the color specification.

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 you apply to select instances of a tag within the <body> section. For example, if you only want one particular <p> tag to be colorful, you can create a class with a custom period-prepended name in the <style> section and with the same color keyword and specification you use when styling a tag. Then set the target <p> tag with class as the attribute and that class name, without the period but in quotes, as the value.

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

Method 3: Creating and Linking 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 <head> section. This works just like the <style> section approach except that instead of making tag and class declarations within <style> inside the HTML document itself, it’s declared in a dedicated CSS document. This not only aggregates all the styles in one place but it also allows multiple HTML documents to incorporate the same style conventions without duplication.

Place your styles, formatted just as you would in a <style> section in the <head> section of your HTML in a separate document with a name ending in .css. Then, add a <link> stand-alone tag (no closing </link>) inside the <head> of the HTML document with an href attribute, whose quote-enclosed value is set to the name of the CSS document, and a rel attribute with value “stylesheet” (in quotes).

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