CSS

CSS – How to Make Text Italic?

Spread the love

In this blog, we are looking into your query: “How to Make Text Italic with CSS”.

CSS property font-style is used to make the text display in italics format.

The content text that is displayed on a web page can be given various unique designs.

Making the text display in italics makes the text stand unique from the rest of the content.

This unique design for a particular text attracts the user to watch this text with focus.

Italic design is usually given to that part of the page content that highlights some important content text.

How to Make Text Italic with CSS?

Text can be displayed in italic format using the font-style: italic;.

By applying this style the text will be displayed in cursive italics format on the browser.

The default value for this property is normal. Text is displayed in normal format by default in the browser.

Let’s see the practical demonstration for a clear understanding:

CSS :-

    .style1 {
      font-style: italic;
    }

HTML :-

    <p class="style1">
       This is the text that is displayed in Italics format.
    </p>
    <p>
       This is a normal text displayed in normal format by default.
    </p>

Result :-

How to make text italic with CSS

In the CSS section, we have created a class the font-style property is applied with italic.

In the HTML section, we have created two paragraphs one has been given the class style1 whereas the other paragraph has no CSS style applied to it.

In the resulting image, the first paragraph is displayed in italics because we have applied the font-style: italic to it, and the second paragraph is displayed in normal format.

The class that is created is just for demonstration purposes, you can give any class name or you can even use this property inline to HTML element.

Italic style can be applied not just to paragraphs but it can also be applied to different HTML elements like div, span, anchor, input, etc.