How to set text color & font style in HTML ?

Last Updated : 17 May, 2023

In this article, we will learn how to set text color & font style in HTML. The <style> tag in HTML helps us to set the text color & font style in HTML. This modification includes changing font size, font family, font color, etc. Not only the text but also we can change the style of a body or part of a page. We can add style in different ways. Now let’s look at various attributes of style and what else the tag supports.

Syntax:

style="property: value;"

Example: In this example, we will change the text color and font style of the first div i.e. class name container using <style> tag.

HTML

<!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">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            font-size: 1.8rem;
        }

        p {
            font-size: 1rem;
            padding: 1rem 0;
        }

        .container {
            color: blue;
            font-family: cursive;
        }
    </style>
</head>
<body>
    <!-- Section using styles -->
    <div class="container">
        <h1>Welcome to GFG</h1>
        <p>
            Coding is the New Literacy and no one
            can deny this fact! And especially,
            when it comes to young ones or school
            students, investing the time & efforts
            in learning programming skill become
            more & more advantageous and rewarding.
        </p>
    </div>
    <!-- Section without styles -->
    <div>
        <h1>Welcome to GFG</h1>
        <p>
            Coding is the New Literacy and no one
            can deny this fact! And especially,
            when it comes to young ones or school
            students, investing the time & efforts
            in learning programming skill become
            more & more advantageous and rewarding.
        </p>
    </div>
</body>
</html>

Output

Example 2: In this example, we will use the style in the inline style attribute.