Now that we have learned how to change the font size, let’s now discuss how to change the font color. In changing the font color, we’re still going to use the style attribute. We then give the style attribute a value of “color”, followed by a colon symbol “:”, and then the color that you want the font to have. Let’s take a look at an example of this below:
1<!DOCTYPE html>
2<html>
3<head>
4<title>Changing the font colors!</title>
5</head>
6<body>
7<p style="color: green">This is a green paragraph</h1>
8<p style="color: violet">This is a violet paragraph.</p>
9<p style="color: red">This is a red paragraph.</p>
10</body>
11</html>
As you can see in lines 7 through 8 of our code, different color values are assigned to the style attributes of each paragraph. One thing to take note of is that defining color names can be done in two ways. It can be defined using the name of the color itself, which is what we did in our example, or using a color’s hexadecimal equivalent. For example:
1<!DOCTYPE html>
2<html>
3<head>
4<title>Changing the font colors!</title>
5</head>
6<body>
7<p style="color: #00008B">This is a dark blue paragraph</h1>
8<p style="color: #FF00FF">This is a magenta paragraph.</p>
9<p style="color: #FFFF00">This is a yellow paragraph.</p>
10</body>
11</html>
Notice how hexadecimal values are used to define color in our example above instead of color names. A color’s hexadecimal value is used whenever a web designer wants use a combination of hue as font color.