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 has very simple syntax where we use “ tag and
color attributes with the color data in 3 different representation format
hex number and
Change Font Color with Color Name
As stated previously we can specify the color with its human-friendly name like
blue etc. This is the easiest way to describe the color. In this example, we will set the font color to the
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
Change Font Color with RGBA Number
Red, Green, Blue, Alpha is a very old coloring system which 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 with parenthesis. Last alpha value is used to set opacity where
opaque and means transparent. We can also set floating numbers like 0.34 , 0.54 etc.
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 HTML CSS color attribute like below.
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
paragraph elements font color to the red.
We can also use the hexadecimal or RGB presentation of the colors like below.
If the external CSS file has the name
mysite.css it can be imported like below with
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
paragraph tag to the blue.
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
h4 font colors to the
blue with an external CSS code.