How to set the text-color for different elements in CSS ?

Last Updated : 31 Mar, 2021

Colors are very important to give a good look to the website and engage the users. So, different colored text elements are added to enhance the visuals of the webpage. The CSS color property defines the text color for an HTML element.

For setting text-color for different elements in CSS, add the appropriate CSS selector and define the color property with the required color value.

Syntax :

color:value;

Note: There are different ways to specify the color values in CSS, for example using color keywords, RGB color values, Hexadecimal color values, and many more.

Example: In the following example, the heading is in green color as specified in <h3> styling tag, “content” class have grey color text while the text in ordinary <p> tag have black text color which is default text-color for the page as defined in the body selector.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
      body { 
        text-align: center; 
        font-size: 15px; 
        color: black; 
      } 
  
      h3 { 
        text-align: center; 
        font-size: 60px; 
        color: green; 
      } 
  
      p.content { 
        color: grey; 
      } 
    </style> 
  </head> 
  <body> 
    <h3>GeeksforGeeks</h3> 
  
    <p>A Computer Science portal for geeks</p> 
  
    <p class="content"> 
      It is a one-stop destination for all  
      Computer Science students!! It is a 
      platform that fulfill all their needs  
      such as- Tutorials & Courses, 
      Placement preparation, Interview  
      Experiences, and various others. 
    </p> 
  </body> 
</html> 