How To Change Font Color with CSS in HTML? – POFTUT

How To Change Font Color with CSS in HTML?

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.

Syntax

Font color has very simple syntax where we use <font> tag and color attributes with the color data in 3 different representation format name, hex number and 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.

Change Color with Color Name

Change Color with Color Name

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 which 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 hexadecimal values of red,blue and green.

Change Font Color with Hex Number

Change Font Color with Hex Number

Change Font Color with RGBA Number

RGB or 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 1 means 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 p or 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 link element.

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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Enjoy this blog? Please spread the word :)