September 8, 2022

How to Set Font Color in HTML using Inline CSS

In this tutorial, you will learn how to set font color in HTML using inline CSS. A good user interface and user experience depend greatly on the colors used in a website. Inline CSS is used to apply a unique style to a single HTML element.

If you want to apply styles using inline CSS, then you should use the style attribute to the relevant element. The attribute starts with style followed by an equal sign (=) and then double quotes (""). The syntax ends with a semi-colon (;), which contains the value of the attribute. To set the font color, we need to use the color property.

In the following example, we have a paragraph element and we will change its font color to blue using inline CSS. Please have a look over the code example and the steps given below.

HTML

We have one paragraph in the HTML file.
Within the paragraph element, we have a style attribute containing color property, which has a value of blue.
As a result, the text content within the paragraph element will be displayed in blue color.

<!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>Inline CSS</title>
</head>

<body>
    <p style="color: blue;">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, illo.
    </p>
</body>

</html>

You May Also Like: