How to change font color in CSS

Changing the font color in CSS is a fundamental skill in web development that allows you to customize the appearance of text on your website. This can enhance readability, emphasize important content, and align with your site's design aesthetic. In this article, we'll explore different methods to change font color in CSS, including using the color property, class selectors, and inline styles.

Using the color Property

The most straightforward way to change the font color is by using the color property in your CSS. Here’s how you can do it:

The color property is used to specify the color of the text.
In this example, the text inside the p element is set to red.

This is a red text.

HTML

        
            
        <p style="color: red;">This is a red text.</p>

Using Inline Styles

Inline styles allow you to change the font color directly within the HTML element, providing quick and specific customization.

The style attribute allows you to apply CSS properties directly to an HTML element.
Setting color: DodgerBlue; changes the font color of this specific p element to DodgerBlue.

This text is blue.

This is also blue text.

HTML
CSS

        
            
        <p class="text-blue">This text is blue.</p>
        <p class="text-blue">This is also blue text.</p>

        
            
        .text-blue {
          color: DodgerBlue;
        }

Using RGB, HEX, and HSL Values

CSS allows you to specify colors using RGB, HEX, and HSL values for more precise control.

RGB values specify colors using the Red, Green, and Blue color model. For example, rgb(255, 0, 0) represents red.
HEX values are a hexadecimal representation of RGB values. For example, #00FF00 represents green.
HSL values specify colors using the Hue, Saturation, and Lightness model. For example, hsl(51, 100%, 50%) represents gold.

This is red text using RGB.

This is green text using HEX.

This is gold text using HSL.

HTML

        
            
      <p style="color: rgb(255, 0, 0);">This is red text using RGB.</p>
      <p style="color: #00FF00;">This is green text using HEX.</p>
      <p style="color: hsl(51, 100%, 50%);">This is gold text using HSL.</p>