How to Change Text Color in HTML

Co-authored by wikiHow Staff

Last Updated: December 10, 2022 Tested

Creating Text Styles

|

Using Inline Styles

While you can change text color using the <font> tag in HTML, this method is no longer supported in HTML5. Instead, you'll use basic CSS to define what color the text will appear in various elements on your page. Using CSS will ensure that your web page is compatible with every possible browser.

Method 1

Method 1 of 2:

Creating Text Styles

1
Open your HTML file. The best way to change the color of your text is by using CSS. The old HTML <font> attribute is no longer supported in HTML5. The preferred method is to use CSS to define the style of your elements.
- This method will also work with external stylesheets (separate CSS files). The examples below are for an HTML file using an internal stylesheet.
2
Place your cursor inside the <head> tag. You'll be defining your styles inside this tag if you're using an internal stylesheet.

Advertisement
3
Type <style> to create an internal stylesheet. When the <style> tag is in the <head> tag, the CSS inside the <style> tag will be applied to any applicable elements on that page. When you're finished, the beginning of your HTML file should look something like this:^{[1]
X
Research source}
```
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
```
4
Type the element you want to change the text color for. You'll be using the <style> section to define the look of the different elements on your page. So for example, to change the style of all the body text on your page, type the following:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {

}
</style>
</head>
```
5
Type the color: attribute into the element selector. The color: attribute will tell the page what text color to use for that element. In this example, it will change the text color of all body text, which is the default element for all text on your page:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color:
}
</style>
</head>
```
6
Type in a color for the text. There are three ways you can enter a color: the name, the hex value, or the RGB value. For example, for the color blue you could type blue, rgb(0, 0, 255), or #0000FF.
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
</style>
</head>
```
7
Add other selectors to change the color of various elements. You can use the different selectors to change the color of your text for different parts of the page:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
h1 {
	color: #00FF00;
}
p {
	color: rgb(0,0,255)
}
</style>
</head>
<body>

<h1>This header will be green.</h1>

<p>This paragraph will be blue.</p>

This body text will be red.
</body>
</html>
```
8
Define a CSS class instead of changing an element. You can define a class and then apply it to any element you'd like throughout the page to instantly add the class style. For example, in the following file the ".redtext" class will make any element it's applied to use red text:
```
<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
	color: red;
}
</style>
</head>
<body>

<h1 class="redtext">This heading will be red</h1>
<p>This paragraph will be normal.</p>
<p class="redtext">This paragraph will be red</p>

</body>
</html>
```

Method 2

Method 2 of 2:

Using Inline Styles

1
Open your HTML file. You can use inline style attributes to change the style of a single element on your page. This can be useful for one or two quick changes to the style, but is not recommended for widespread use. For comprehensive style changes, use the previous method.^{[2]
X
Research source}
2
Find the element in the file that you want to change. You can use inline style attributes to change the text color of any of your elements. For example, if you want to change the text color of a specific header, find it in your file:
```
<!DOCTYPE html>
<html>
<body>

<h1>This is the header you want to change</h1>

</body>
</html>
```
3
Add the 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 header you want to change</h1>

</body>
</html>
```
4
Type the color: attribute inside the "". For example:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:">This is the header you want to change</h1>

</body>
</html>
```
5
Type the color you want to change the text to. There are three ways you can express a color. You can type the name of the color, you can enter the RGB value, or you can enter the hex value. For example, to change the color to yellow, you could type yellow;, rgb(255,255,0);, or #FFFF00;:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:#FFFF00;">This header is now yellow</h1>

</body>
</html>
```

Community Q&A

Question

How would I type bold font in html?

Community Answer

<b></b> is the code for bold text, so you would put your text within that, e.g. <b> hello world </b>.
Question

How do I change background colors in HTML?

Community Answer

Use the bgcolor attribute with body tag.
Question

How do I change the color of the background?

Community Answer

You will create a similar tag as you did to change the font color. After putting everything in the body tag, you will put the {} brackets and on the inside, type "background-color:(insert desired color)." In code, it should look like this: body { color: black; background-color:gold } This code gives you black text and a gold background.