September 3, 2022

How to Change Text Color in HTML and CSS

In this tutorial, you will learn how to change text color in HTML and CSS. Colors are very important for a good user interface and user experience. You must keep in mind that using too many colors on a website can lead to a bad user experience because it will make your entire website look like a painting.

The CSS color property is used to change the color of the text. Most commonly, a color name, hexadecimal, and RGB values are used with color property.

In the following example, we will demonstrate how you can change the color of text using the color property. Please have a look over the code example and the steps given below.

HTML

In the body, we have 3 elements, one h3 and two paragraphs.
Both paragraphs have different class names, which we will use in the stylesheet to change the text color.
The first paragraph has a class name of .color1 and the second paragraph has a class name of .color2.
In the head element, we have added a stylesheet (style.css) using the link element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text color</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h3>Welcome to HTML</h3>
    <p class="color1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, deserunt!</p>
    <p class="color2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam vitae quia commodi? Non, repellat tenetur.</p>
    
</body>
</html>

CSS

The color of the h3 element is set to green.
The color of the first paragraph element is set to red using the hex value #ff0000.
The color of the second paragraph element is set to blue using the RGB value rgb(0, 0, 255) .

h3{
    color: green;
}
.color1{
    color: #ff0000;
}
.color2{
    color: rgb(0, 0, 255);
}

You May Also Like: