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.
Steps
Using CSS
{“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.
{“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.
{“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 >
{“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 >
{“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 >
{“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 > _
{“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 > _
{“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
{“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
{“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 >
{“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 >
{“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 >
{“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: