CSS Color Property to Change the Font or Text Color

Ad Banner Image

CSS Color Property

CSS color property is used to change the color of an HTML element. You can specify the color of text by name, HEX Code and RGB Values.

Example 1 – Color Property Example to Change the Text Color of p HTML element

<!DOCTYPE html>
<html>
  <head>
    <style>
		p
		{
		 color: blue;
		}
    </style>
  </head>
  <body>
    <p>Lorem ipsum lvinar mattis nunc sed blan dit libero. Turpis massa sed eleme. Lentesque id nibh tortor id aliq ueted risus pretium quam.</p> 
  </body>
</html>

In the above code, we specify the text color of an HTML Element.

Here, we apply the color by the name of color.

CSS Color Property to Change the Font or Text Color of p HTML tag
Fig.1 – CSS Color Property to Change the Font or Text Color of p HTML element

You also specify different colors to different HTML Elements.

Example 2 – Another example of Color Property for p, body and h1 HTML tag

<!DOCTYPE html>
<html>
  <head>
    <style>
		p
		{
		 color: blue;
		}
		body
		{
		 color: green;
		}
		h1
		{
		 color: red;
		}
    </style>
  </head>
  <body>
	<h1>This is a main heading.</h1>
	<h2>This is a sub heading.</h2>
    <p>Lorem ipsum lvinar mattis nunc sed blan dit libero. Turpis massa sed eleme. Lentesque id nibh tortor id aliq ueted risus pretium quam.</p> 
  </body>
</html>

In the above code, we specify the text color of different HTML Element.

Here, we apply the different colors to different HTML Elements.

We did not define the color for <h2> element so it will change color according to defining the color body. So all the undefined HTML Elements will change their color accordingly to body defined color.

Example of Color Property
Fig.2 – Another example of Color Property

You can specify Font or Text Color by 3 different ways in CSS

  • name – you can define or set color by name, such as”red”
  • RGB – you can define or set color by RGB value, such as “rgb(0,120,0)”
  • Hex – you can define or set color by the Hex value, such as “#ff336e ”

Note: You have to specify RGB Values with RGB Function, like rgb(211,241,93); and HEX Code with # symbol, like #b3efcc. Without using this syntax than color functions will not work as expected.

Specify the CSS Text Color using HEX Code Value

Example 3 – Another example of CSS Color Specification using HEX Code Format.

<!DOCTYPE html>
<html>
  <head>
    <style>
		p
		{
		 color: #f797b3;
		}
		body
		{
		 color: #6dafc7;
		}
		h1
		{
		 color: #f18e5d;
		}
    </style>
  </head>
  <body>
	<h1>This is a main heading.</h1>
	<h2>This is a sub heading.</h2>
    <p>Lorem ipsum lvinar mattis nunc sed blan dit libero. Turpis massa sed eleme. Lentesque id nibh tortor id aliq ueted risus pretium quam.</p> 
  </body>
</html>

In the above code, we define the text color of different HTML Element using HEX Code.

Here, we apply the different colors to different HTML Elements.

Color Property Example with Hex Code Values
Fig.3 – Color Property Example with Hex Code Values

Caution:The benefits of the HEX Code and RGB Value are that you can define a customized color to HTML Elements. The color names are limited if you want to define more detailed color than you can use HEX Code Color Or RGB Values.

Color using RGB Values

Example 4 – Another example of Color using RGB Values.

<!DOCTYPE html>
<html>
  <head>
    <style>
		p
		{
		 color:  rgb(241,210,93);
		}
		body
		{
		 color: rgb(211,241,93);
		}
		h1
		{
		 color: rgb(179,239,204);
		}
    </style>
  </head>
  <body>
	<h1>This is a main heading.</h1>
	<h2>This is a sub heading.</h2>
    <p>Lorem ipsum lvinar mattis nunc eleme. Lent esq ueus pre tium qua midnibh tortor id aliq ueted ris.</p> 
  </body>
</html>

In the above code, we define the text color of different HTML Element using RGB Values.

Text Color Specification with RGB Function
Fig.4 – Text Color Specification with RGB Function
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress