Internet, Networking, & Security Web Development How to Change Text Color in HTML Customize your web page with colorful text By Jonathan Terrasi Writer Jonathan Terrasi is a former Lifewire writer who specializes in security and digital privacy, Linux, and consumer technologies. our editorial process Twitter Jonathan Terrasi Updated November 03, 2019 filo / Getty Images Web Development CSS & HTML Web Design SQL Tweet Share Email 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 has 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. 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 <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. 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 — wrap it in <span> and </span> tags and add the style attribute with the color value keyword and specification as above. Method 2: Add a Style Section in the HTML Document Header In the <head> section of the 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. However, you can also style HTML by class, which is like a label that is applied to select instances of a tag within the <body> section. For example, if you only want one particular <p> tag to be colorful, 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. 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 <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).