CSS, or Cascading Style Sheets, is a language used to style and layout web pages. One of the most frequently used styles in CSS is for changing the color of the font displayed on a web page. Here’s a detailed guide on how to use CSS to change font color.

Select the Element

The first step to changing the font color of a particular element on a web page is to select that element. The element could be anything from a paragraph of text to a heading or a link. To select an element, use either its HTML tag or its class, ID, or attribute selectors.

Syntax for Selecting Elements:

– By tag: tagname {}

– By class: .classname {}

– By ID: #idname {}

– By attribute: [attribute] {}

For example, to select all the paragraphs of text, use the tag selector “p{}”. To select a paragraph of text with a particular class, use the class selector “.classname{}”. To select an element with a particular ID, use the ID selector “#idname{}”. And to select an element with a particular attribute, use the attribute selector “[attribute]{}”.

Set the Color

Once the element has been selected, the next step is to set the color property in CSS. The color property is used to set the foreground color of an element, which is usually the color of the font.
Syntax for Setting the Color Property:

color: value;

The value of the color property can be specified in different formats, such as named colors, hexadecimal codes, RGB values, or HSL values.

Named Colors

Named colors are pre-defined color names that can be used directly in the color property. Some of the commonly used named colors are red, blue, green, yellow, black, white, gray, maroon, navy, olive, orange, purple, teal, and fuchsia.

Example:

p {

color: blue;
}

Hexadecimal Codes

Hexadecimal codes are six-digit codes that represent the intensity of red, green, and blue components of a color. These codes are preceded by a hash (#) symbol.

Example:

p {

color: #0000FF;

}

RGB Values

RGB values specify the red, green, and blue components of a color in decimal format. The values are separated by commas and enclosed in parentheses.

Example:

p {

color: rgb(0, 0, 255);

}

HSL Values

HSL values specify the hue, saturation, and lightness of a color in degrees, percentage, and percentage, respectively. The values are separated by commas and enclosed in parentheses.

Example:

p {

color: hsl(240, 100%, 50%);

}