How to Change Text Color in HTML

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

At a time when web development is more popular than ever, it pays to know how to bend HTML to your will. In this tutorial, you’ll learn a simple trick from that skillset: changing text color.

3 Ways to Set Which Color Displays

As a full-featured language, HTML gives you a variety of ways for infusing your HTML with practically any look. For setting text color, this guide will cover the three main styling methods.

The first is directly altering the tag wrapping the text designated for color change. If you only need to colorize one or two chunks of text, this is probably how you want to go about it.

The second is adding a style section to the top of your HTML document. This may be best if your styling needs are a bit more complicated, but still restricted to a single HTML page.

Finally, there’s creating a separate CSS stylesheet and linking 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, any of which you can provide paired with the “color” keyword in the directions below.

The simplest is using an English color name like “green” or “cyan.” Again, if your task is straightforward enough, this may do the trick, but just know 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.

Lastly, you can supply a hex color value, which is a pound sign separated by a six digit hexadecimal number. If you want to get precise with your colors, go this route.

Programs You'll Need for Setting HTML Colors

The bare minimum toolkit for tweaking word color in HTML is a program for editing the HTML itself, and a browser for testing them. You can either edit HTML in a text editor, a simple program like Notepad that writes pure text, or 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 will display the HTML file you want to examine. For checking your work, any web browser will do – just go to the folder containing your 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 easiest 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, like a <p> tag, just to go the opening tag and insert the following before the closing angle-bracket (i.e. the “less than” sign): a space, the word “style” (without quotes), 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 simply wrap it in a <span> and </span> tag 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 (i.e. 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 sub-section 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 can apply to select instances of a tag within the <body> section. For instance, 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, with the same color keyword and specification you would use when styling a tag, and then set the target <p> tag with “class” (no quotes) 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 your styles in one place, but it allows multiple HTML documents to incorporate the same style conventions without duplication.

Simply put your styles, formatted just as you would in a <style> section nestled in the <head> section of your HTML, in a separate document with a name ending in “.css”. Then, add a <link> standalone tag (it is self-closing, with no counterpart </link>) inside the <head> of your HTML document with a quote-less “href” attribute whose quote-enclosed value is set to the name of your CSS document, and a “rel” attribute (again, no quotes) with value “stylesheet” (yes, 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