Cascading Style Sheet or CSS is used to change attributes of the HTML elements. We can change font size, color, shape, size, length, etc with CSS. In this tutorial, we will learn how to change the font color of different elements in HTML with CSS.
Font Color Syntax
Font color has very simple syntax where we use “ tag and color attributes with the color data in 3 different representation format name, hex number and RGB number.
<font color="color_name|hex_number|rgb_number">Change Font Color with Color Name
As stated previously we can specify the color with its human-friendly name like red, blue etc. This is the easiest way to describe the color. In this example, we will set the font color to the blue.
<p><font color="red">This is some red text!</font></p>
<p><font color="blue">This is some blue text!</font></p>
<p><font color="green">This is some green text!</font></p>
<p>This is a normal text without font color</p>
Change Font Color with Hex Number
Another way to specify the font color is by using hex numbers. Colors have high precision hexadecimal numbers where the color can be precisely defined. Hexadecimal numbers provide us the ability to select very detailed colors that can not be expressed with the color name. Before providing the hexadecimal number we need to put a # in order to specify the hexadecimal number. In this example, we will use the hexadecimal values of red,blue and green.
<p><font color="#ff0000">This is some red text!</font></p>
<p><font color="#0000ff">This is some blue text!</font></p>
<p><font color="#80ff00">This is some green text!</font></p>
<p>This is a normal text without font color</p>
Change Font Color with RGBA Number
RGB or Red, Green, Blue, Alpha is a very old coloring system that can be also used for font color specification. most of the colors consist of a mixture of main colors Red, Blue, and Green. We can express these colors with the weight of these main colors. We have to provide 4 values where we will prefix it with the RGB and surround it with parenthesis. The last alpha value is used to set opacity where 1 means opaque and 0 means transparent. We can also set floating numbers like 0.34 , 0.54, etc.
<p><font color="rgb(255, 0, 0,1)">This is some red text!</font></p>
<p><font color="rgb(0, 0, 255,1)">This is some blue text!</font></p>
<p><font color="rgb(0, 255, 0,1)">This is some green text!</font></p>
<p>This is a normal text without font color</p>Change Font Color with Inline CSS
CSS font colors can be set in two different ways where we can use set into the HTML tag directly or with an external CSS file. Actually, we have used inline CSS by setting an HTML CSS color attribute like below.
<p><font color="#ff0000">This is some red text!</font></p>
<p><font color="#0000ff">This is some blue text!</font></p>
<p><font color="#80ff00">This is some green text!</font></p>
<p>This is a normal text without font color</p>Change Font Color with External CSS
Another way is using an external CSS file where we have to specify it in the header of the HTML file. The external CSS file will contain the following CSS code which will change p or paragraph elements font color to the red.
p {
color:red;
}We can also use the hexadecimal or RGB presentation of the colors like below.
p {
color:rgb(255, 0, 0,1);
}
a {
color: #ff0000
}If the external CSS file has the name mysite.css it can be imported like below with link element.
<link rel="stylesheet" Type="text/css" href="http://www.example.com/mysite.css">ChangeFont Color with CSS Inside Head Tag
We can use <head> tag in order to specify a generic CSS code where we do not need to use an external CSS file. We will use <style> tag a put our font color changer CSS code. In this example, we will set the font color of p or paragraph tag to the blue.
<head>
<style>
.p {color:blue};
</style>
</head>Change Multiple Tag Font Color
If we want to change multiple types of tags font color with a single and simple CSS code we need to specify them like below. In this example, we will set the h1, h2, h3, h4 font colors to the blue with an external CSS code.
h1, h2, h3, h4, h5, h6 {
color: blue;
}