How To Change Text Color In Html - Javatpoint

Trang chủ » Html Color Text Style » How To Change Text Color In Html - Javatpoint

Có thể bạn quan tâm

next → ← prevHow to Change Text Color in Html

In HTML, we can change the color of any text using different ways. Following are the easy and popular ways to change the text color. 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:

  1. HTML Tags
  2. Inline Styles
  3. CSS IDs
  4. CSS Classes
  5. CSS Selectors
  6. CSS Pseudo-classes and Pseudo-elements

Steps:

  • Make or Open a HTML Document:

Begin by making another HTML document or opening a current one that you need to modify. You can utilize a plain text supervisor like Notepad (Windows) or any code proofreader of your decision.

  • Add the Fitting HTML Elements:

Inside your HTML document, distinguish the particular text or component that you need to change the color of. For instance, you can utilize a section (<p>), heading (<h1>, <h2>, and so on), or some other HTML component containing text.

  • Compose CSS for Text Color:

Then, you'll have to compose CSS code to change the text color. You can do this in one of the accompanying ways:

  • Indicate the Ideal Color:

In your CSS code, determine the ideal color utilizing a color name (e.g., " red ," " blue, " " green "), a hexadecimal color code (e.g., #FF0000 for red and others), or a RGB esteem (e.g., rgb(0, 0, 255) for blue). You can likewise utilize other CSS color documentations.

  • Save and View Your HTML Document:

Save your HTML document and open it in an internet browser to see the changes. The text inside the predetermined HTML element(s) ought to now show in the color you characterized in your CSS.

1. Using HTML tag

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.

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

<font> 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.

<font> Single Line text and statements </font>

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 <font> 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.

Code

<!Doctype Html> <Html> <Head> <Title> Change the text or font color Using HTML tag </Title> </Head> <Body> <font color = "red"> JavaTpoint <br> </font> <font color = "green"> Html Tutorial <br> How to Change the Text Color in Html </font> </Body> </Html>

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:

How to Change Text Color in Html

2. Using Inline Style Attribute

If we want to change the color of a text using an inline style attribute 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 style attribute for changing the color of a text.

Step 2: Now, move the cursor at the starting of that text whose color we want to change. And then, type the inline style attribute within any element. Here, we use the <p> (paragraph) tag:

<p style = " color: ; "> Any Text your choice

Step 3: In this step, we have to give a name of color as a value. We can give the color name in three forms:

  • We can type the name of a color as per our choice
  • We can also enter the RGB value of a color for better readability
  • We can also enter the hexadecimal value of a color according to css colors.

Step 4: Then, we have to close the element at the end of the text whose color we want to change.

<p style = " color :red; "> Any Text of your choice </p>

Step 5: And, at last, save the Html code which changes the text color using the CSS style attribute.

<!Doctype Html> <Html> <Head> <Title> Change color using style attribute </Title> </Head> <Body> <p style = "color :red;"> This page helps you to understand how to change the color of a text. </p> <p style = "color :yellow; "> And, this section helps you to understand how to change text color using style attribute. </p> </Body> </Html>

Output:

How to Change Text Color in Html

3. Using CSS Classes:

CSS classes are portrayed in CSS documents and can be applied to express HTML elements using the class property. Classes grant you to bundle elements with similar styles, making your code more organized and suitable.

Syntax:

CSS File:

.red-text { color: red; }

HTML Document:

<p class = "red-text"> This is red coloured text. </p>

Example:

Code

CSS File:

.red-text { color: red; }

HTML Document:

<!DOCTYPE html> <html> <head> <title> CSS Classes </title> <link rel = "stylesheet" type = "text/css" href = "style.css"> </head> <body> <p> Javatpoint Company </p> <p class = "red-text"> Technical Articles for Students </p> </body> </html>

Output:

How to Change Text Color in Html

4. Using CSS IDs:

CSS IDs are utilized to target explicit HTML elements with exceptional styles. IDs are characterized in CSS and applied to elements utilizing the id attribute. They are commonly utilized for individual and unmistakable elements.

Syntax:

CSS File:

#blue-heading { color: blue; }

HTML Document:

<h1 id = "blue-heading"> This is a blue colour heading </h1>

Example:

Code

<!DOCTYPE html> <html> <head> <title> CSS Class and ID Examples </title> <style> /* CSS class */ .red-text { color: red; } .blue-text { color: blue; } /* CSS ID */ #green-heading { color: green; } #purple-paragraph { color: purple; } </style> </head> <body> <h1 class = "red-text"> This is a Web Development using HTML class. </h1> <p class = "blue-text"> This is Javatpoint article to change text color. </p> <h2 id = "green-heading"> This is a HTML Example with Class ID. </h2> <p id = "purple-paragraph"> This is purple text with a class ID. </p> </body> </html>

Output:

How to Change Text Color in Html

5. Using CSS Selectors:

CSS selectors give flexible ways of targeting and style HTML elements in light of their attributes, construction, or associations with different elements. Selectors offer fine-grained command over text color and different styles all through your page. CSS offers different selectors to target explicit elements in view of their construction or traits. This empowers progressed text color control.

Syntax:

CSS File:

/* Example using attribute selector */ [data-color = "orange"] { color: orange; } /* Example using descendant selector */ div p { color: brown; }

HTML Document:

<div> <p data-color = "orange"> This is of the colour orange text. </p> </div> <div> <p> This is a brown colour text. </p> </div>

6. Using CSS Pseudo-classes and Pseudo-elements:

CSS pseudo-classes and pseudo-elements permit you to target elements in light of explicit states or parts. For instance, you can utilize :float to change the color of connections when a client drifts over them.

Syntax:

a:hover { color: purple; }

Conclusion

In conclusion, changing text color in HTML is a fundamental expertise for website specialists. Whether you're stressing key substance, lining up with your image, upgrading lucidness, or further developing feel, the strategies framed in this article furnish you with the apparatuses you really want to make outwardly engaging web content.

One basic yet successful method for upgrading the visual allure of your web content is by changing text color. In this article, we investigated different techniques and best practices for adjusting text color in HTML. Explore different avenues regarding these strategies to make a site that looks perfect as well as really conveys your message to your audience.

Next TopicHow to Change Background Color in Html← prev next →

Từ khóa » Html Color Text Style