Open In App

How to set text color & font style in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.

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">
</head>
<body>
        <h1 style="font-size:medium; color: rgb(0, 34, 128);">
              Welcome to GFG
          </h1>
        <p style="color: green;">
            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>
</body>
</html>


Output:

 



Last Updated : 17 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads