How to change font color in html

In web design, changing the font color can make the page more vivid and charming, and better attract the reader's attention. How to modify HTML font color is also one of the basic skills that every web designer must master. In this article, we will introduce some of the most common methods of modifying HTML font color and the code to implement them.

1. Use color names

The simplest way to change font color in HTML is to use color names. In HTML, you can set colors for fonts using predefined color names. Here are some of the most common color names:

• red
• black
• blue
• yellow (Yellow)
• green (Green)
• white (White)
• gray (Gray)

For each color name, there is The corresponding code value can be used to set the font color in HTML code. For example, to set the font color to red, the code is as follows:

<p style="color: red;">Hello World!</p>

2. Use hexadecimal color code

In addition to using predefined color names, you can also use hexadecimal color codes to change the font color. The hexadecimal color code is composed of three basic colors: red, green, and blue, each of which has a value from 0 to 255. In HTML, you can color fonts using a combination of these color values ​​as a hexadecimal color code.

The following is an example, set the font color to blue, the code is as follows:

<p style="color: #0000FF;">Hello World!</p>

3. Use RGB color values

In addition to using predefined color names and hexadecimal Custom color codes, you can also use RGB color values ​​to change the font color. RGB color values ​​are composed of three color values: red, green, and blue. These color values ​​are all integers from 0 to 255.

Here is an example, setting the font color to green, the code is as follows:

<p style="color: rgb(0, 128, 0);">Hello World!</p>

The RGB color value method is a flexible way to set the font color, because you can directly control the intensity of each color channel .

4. Use HSL and HSV color values

HSL and HSV are two more intuitive color representation methods than RGB. They are based on the hue (hue) and saturation (saturation) of the color respectively. and lightness/value. In HTML, you can use HSL and HSV color values ​​to achieve more specific and complex color adjustments.

The following is a sample code that uses HSL color values ​​to modify the font color:

<p style="color: hsl(0, 100%, 50%);">Hello World!</p>

This code sets the font color to red. The first parameter 0 represents the red hue. The two parameters 100% represent full saturation, and the third parameter 50% represents 50% brightness.

5. Use classes and IDs in CSS

In HTML, you can also use class and ID selectors to control the font color on the page. The benefit of using class and ID selectors is that you can change the color of multiple page elements through a CSS stylesheet without changing the color attribute of each HTML element.

Here is an example of using a CSS class selector to define a font color:

CSS code:

.myclass {
    color: red;
}

HTML code:

<p class="myclass">Hello World!</p>

This code sets a single paragraph The font color is red, and this color is applied by the .myclass class selector defined in the style sheet.

At the same time, if you want to change the color attributes of multiple page elements, you can use the ID selector:

CSS code:

#myid {
    color: red;
}

HTML code:

<p id="myid">Hello World!</p>

Summary

In HTML web design, changing the font color can make the page more eye-catching and eye-catching. This article introduces you to some of the most common and simplest ways to modify HTML font color, including through color names, hex arrays, RGB values, HSL and HSV schemes, and CSS classes and ID selectors. But at the same time, be careful to follow good web design principles when applying these methods.

The above is the detailed content of How to change font color in html. For more information, please follow other related articles on the PHP Chinese website!