• About
  • Contact
  • Cookie
  • Disclaimer
  • Privacy Policy
  • Change the purpose of use

Tnhelearning.edu.vn - Various useful general information portal

  • Photo
  • Bio
  • How To
  • Tech

How to Change Text Color in HTML

December 17, 2023 by admin Category: How To

You are viewing the article How to Change Text Color in HTML  at Tnhelearning.edu.vn you can quickly access the necessary information in the table of contents of the article below.

X

This article is co-authored by a team of editors and trained researchers who confirm the accuracy and completeness of the article.

The wikiHow Content Management team carefully monitors the work of editors to ensure that every article is up to a high standard of quality.

This article has been viewed 46,997 times.

Although you can change the text color using the <font> tag in HTML, this is no longer supported on HTML5. Instead, you should use basic CSS to define the colors that text should display in different elements on the web page. CSS will also make sure your site is cross-browser compatible.

Table of Contents

  • Steps
    • Using CSS
    • Using the inline style attribute
  • Advice

Steps

Using CSS

Image titled 157292 1

Image titled 157292 1

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/4a/157292-1.jpg/v4-728px-157292-1.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/4/4a/157292-1.jpg/v4-728px-157292-1.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Open the HTML file. The best way to change the color of text is to use CSS. The obsolete HTML <font> attribute is no longer supported on the HTML5 standard. A more available method is to use CSS to style the elements.

  • This also works quite well with separate stylesheets (CSS files embedded in HTML). The examples below are for HTML file with stylesheet insertion.
Image titled 157292 2

Image titled 157292 2

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/31/157292-2.jpg/v4-728px-157292-2.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/3/31/157292-2.jpg/v4-728px-157292-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Place the mouse pointer inside the <head> tag. If you are using a separate stylesheet, you will have to define the template style inside this tag.
Image titled 157292 3

Image titled 157292 3

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d1/157292-3.jpg/v4-728px-157292-3.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/d/d1/157292-3.jpg/v4-728px-157292-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Type <style> to create a separate stylesheet. When the <style> tag is inside the <head> tag, the CSS inside the <style> tag will be applied to any appropriate elements on the page. Once done, your HTML file header should look something like this: [1] X Research Source

 <!DOCTYPE html> < html > < head > < style > </ style > </ head > 
Image titled 157292 4

READ More:   How to Quit Selfishness

Image titled 157292 4

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/7a/157292-4.jpg/v4-728px-157292-4.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/7/7a/157292-4.jpg/v4-728px-157292-4.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Enter the text element for which you want to change the color. The <style> section will be used to define how the element will look differently on the page. For example, if you want to change the style of the entire content on the page, you would type the following:

 <!DOCTYPE html> < html > < head > < style > body { } </ style > </ head > 
Image titled 157292 5

Image titled 157292 5

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/0b/157292-5.jpg/v4-728px-157292-5.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/0/0b/157292-5.jpg/v4-728px-157292-5.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Enter the cpor: attribute in the element select. The cpor: attribute tells the web page what text color to apply to that element. In this example, we’ll change the default element for all text on the page, which is the entire main body of the page:

 <!DOCTYPE html> < html > < head > < style > body { cpor : } </ style > </ head > 
Image titled 157292 6

Image titled 157292 6

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/ed/157292-6.jpg/v4-728px-157292-6.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/e/ed/157292-6.jpg/v4-728px-157292-6.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Enter a color for the text. There are three ways to enter colors: by name, by hex value, and by RGB value. For example, to enter blue, you could type blue , rgb(0, 0, 255) or #0000FF .

 <!DOCTYPE html> < html > < head > < style > body { cpor : red ; } </style> < / head > _ 
Image titled 157292 7

Image titled 157292 7

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/0e/157292-7.jpg/v4-728px-157292-7.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/0/0e/157292-7.jpg/v4-728px-157292-7.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Add more selectors to change the color of multiple elements. You can use different selectors to change the text color for other parts of the page:

 <!DOCTYPE html> < html > < head > < style > body { cpor : red ; } h1 { cpor : #00FF00 ; } p { cpor : rgb ( 0 , 0 , 255 ) } </ style > </ head > < body > < h1 > This heading will be green. </ h1 > < p > This paragraph will be blue. </ p >

This content will be red.
</body> < / html > _ 
Image titled 157292 8

READ More:   How to Open a .DOCX . File

Image titled 157292 8

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/ab/157292-8.jpg/v4-728px-157292-8.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/a/ab/157292-8.jpg/v4-728px-157292-8.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Define a CSS class instead of changing an element. You can define a class, then apply that definition to any element, anywhere on the page, to add a layer of visibility. For example, in the following file, the “.redtext” class will make each element it applies to display as a red text pattern:

 <!DOCTYPE html> < html > < head > < style > . redtext { cpor : red ; } </ style > </ head > < body > < h1 class = "redtext" > This heading will be red </ h1 > < p > This paragraph will display normally. </ p > < p class = " redtext" > This paragraph will be red </ p > </body> </ html > 

Using the inline style attribute

Image titled 157292 9

Image titled 157292 9

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/9/94/157292-9.jpg/v4-728px-157292-9.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/9/94/157292-9.jpg/v4-728px-157292-9.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Open the HTML file. You can use the inline style attribute to change a single element in the page. This can be useful if you want to quickly style one or two elements, but it’s not recommended for widespread use. For comprehensive style changes, you should use the former. [2] X Research Source
Image titled 157292 10

Image titled 157292 10

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/0c/157292-10.jpg/v4-728px-157292-10.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/0/0c/157292-10.jpg/v4-728px-157292-10.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Find the element you want to change in the file. You can use the inline style property to change the text color of any element. For example, if you want to change the color of a specific heading, locate the heading:

 <!DOCTYPE html> < html > < body > < h1 > This is the heading you want to change color </ h1 > </ body > </ html > 
Image titled 157292 11

Image titled 157292 11

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/5c/157292-11.jpg/v4-728px-157292-11.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/5/5c/157292-11.jpg/v4-728px-157292-11.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Add a style attribute to the element. Type style="" inside the opening tag for the element you want to change:

 <!DOCTYPE html> < html > < body > < h1 style = "" > This is the heading you want to change color </ h1 > </ body > </ html > 
Image titled 157292 12

READ More:   How to Reset a PS3

Image titled 157292 12

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/ea/157292-12.jpg/v4-728px-157292-12.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/e/ea/157292-12.jpg/v4-728px-157292-12.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Enter the attribute cpor: inside the "" sign. For example:

 <!DOCTYPE html> < html > < body > < h1 style = "cpor:" > This is the heading you want to change color </ h1 > </ body > </ html > 
  • Image titled 157292 13

    Image titled 157292 13

    {“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/76/157292-13.jpg/v4-728px-157292-13.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/7/76/157292-13.jpg/v4-728px-157292-13.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
    Type the color you want to assign to the text. There are three ways of expressing color. You can type the color name in English, enter the RGB value or the hex value. For example, to change the text to yellow, you could type yellow; , rgb(255,255,0); or #FFFF00; :

     <!DOCTYPE html> < html > < body > < h1 style = "cpor:#FFFF00;" > This heading will now be yellow </ h1 > </ body > </ html > 
  • Advice

    • You can see a list of supported color names and hex values at http://www.w3schops.com/cpors/cpors_names.asp
    X

    This article is co-authored by a team of editors and trained researchers who confirm the accuracy and completeness of the article.

    The wikiHow Content Management team carefully monitors the work of editors to ensure that every article is up to a high standard of quality.

    This article has been viewed 46,997 times.

    Although you can change the text color using the <font> tag in HTML, this is no longer supported on HTML5. Instead, you should use basic CSS to define the colors that text should display in different elements on the web page. CSS will also make sure your site is cross-browser compatible.

    Thank you for reading this post How to Change Text Color in HTML at Tnhelearning.edu.vn You can comment, see more related articles below and hope to help you with interesting information.

    Related Search:

    Related Posts

    How to Create Curved Text in Photoshop
    How to fall asleep faster
    How to Install FBReader to Read eBooks

    Category: How To

    Previous Post: « Top 999+ rs images – Amazing Collection rs images Full 4K
    Next Post: Top 999+ panda images hd – Amazing Collection panda images hd Full 4K »

    Copyright © 2025 · Tnhelearning.edu.vn - Useful Knowledge