How to Change Text Color in HTML: Simple Steps

HTML Text Color. Photo: POFTUT

Most of the HTML web pages contain text in order to provide information. HTML Text may contains instructions, explanation etc. But in order to make the reading experience better, the HTML text is generally formatted with different styling techniques, and coloring or changing text color is one of them. In this tutorial, we will explain how to change the HTML Text color in different ways.

What is HTML?

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as and directly introduce content into the page. Other tags such as

surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.

HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.

Why Change HTML Text Color?

Before starting to explain how to change HTML Text color, we will list some use cases and benefits changing text color.

* Express an important part of the text or information.

* Mark important keywords in a text and made it easier to find.

* Style notes to differentiate from normal text.

* Make warnings more visible and readable.

How to Change Text Color in HTML

Method 1: Change HTML Color With Style Attribute

The most popular and easy way to change HTML text color is to use the style attribute of different HTML tags. In this example, we will change the

tag style attribute with the color value by setting the color we want to set.

Photo: Screenshot

Photo: Screenshot

Photo: Screenshot

Method 2: Using HTML tag

Note: HTML 5 does not support the color attribute of font, so we have to use the inline style attribute and internal CSS options for changing the color of a text.

If we want to change the color of a text using Html tag which is to be displayed on a web page, we have to follow the steps which are given below. Using these steps, we can easily change the color of any text:

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the Html tag

Photo: Screenshot

Step 2: Now, move the cursor at the starting of that text whose color we want to change. And then, type the empty Html tag at that position.

Single Line text and statements

Step 3: Then, we have to close the font tag at the end of the text whose color we want to change.

Single Line text and statements

Step 4: Now, we have to add the attribute of the font tag whose name is "color". So, type the color attribute within the starting tag. And, then we have to give the color which we want to use on the text. So, type the name of color in the color attribute as described in the following block.

Photo: Screenshot

Step 5: And, at last, we have to save the Html code in the text editor and run the code. After execution, we will see the output in the browser. The following screenshot shows the output of the above Html Code:

Photo: javatpoint

Method 3: Using Internal CSS

If we want to change the color of a text using an internal cascading stylesheet which is to be displayed on a web page, we have to follow the steps which are given below. Using these steps, we can easily change the color of text.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the internal CSS for changing the color of a text.

Photo: Screenshot

Step 2: Now, we have to place the cursor in the head tag of the Html document and then define the styles inside the tag as shown in the following block. And, then type the color attribute into the element selector.

Photo: Screenshot

Step 3: Now, we have to type the defined element selector before the text whose color we want to change.

Photo: Screenshot

The output of the above Html code is shown in the following screenshot:

Photo: javatpoint

Method 4: Change HTML Color With Hex Color Codes

We can change the HTML text color by using Hex color code. We will just use previously defined techniques to set color.

Photo: Screenshot

Method 5: Change HTML Color With HSL Color Values

Even not so popular HSL Color Values can be used to set HTML Text color. HSL looks similar to the RGB where some values are provided to define a color with more dark or light.

Photo: Screenshot

How to Change Email Address on Facebook With Easy Steps Facebook allows you to maximize experience including changing your primary email address. If you haven't known how to change, don't miss this article.

How To Change Your Location and Local Stations In YouTube TV There are many ways to change your location and local stations in Youtube TV. Follow our simple guides!

How To Change Your Region On Netflix With Simple Steps What should we do if Netflix in our region is restricted. We have several ways to change Netflix region with VPNs and without VPNs.