How to italicize text in CSS ?

Last Updated : 05 May, 2023

In this article, we will see how to make a text italic using CSS. To italicize text in any webpage the CSS font-style property is used. We have a variety of options to set it to italic text.

normal: It is the normal font-style. It is the same as 400, the default numeric value for boldness.
bold: It is the bold font-style. It is the same as 700.
italic: It is the cursive font-style.

Approach: The font-style property in CSS has three values that are normal, italic, and bold. The CSS value italic is used to italicize the text.

Syntax:

font-style: italic;

Example: In this example, we are using the above-explained approach.

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 CSS-->
    <style>
        .gfg {
            font-style: italic;
            font-size: 24px;
            margin: 10px;
            padding: 2px;
            color: black;
        }
    </style>
</head>
<body>
    <h2>
        GeeksForGeeks | A Computer Science
        Portal for Geeks
    </h2>
 
    <p class="gfg">
        This platform has been designed for
        every geek wishing to expand their
        knowledge, share their knowledge and
        is ready to grab their dream job. We
        have millions of articles, live as
        well as online courses, thousands of
        tutorials and much more just for the
        geek inside you.
    </p>
 
    <p class="geeks">
        Thank You for choosing and supporting us!
    </p>
</body>
</html>

Note: When you will be using an external CSS file always use some default CSS for your webpage this default CSS is written in * { } selector. This will remove the default CSS from your webpage.

Output: Now, as you can see in the output, we have created an italicized text in our webpage using CSS, which will attract readers to read the content on the webpage.