Italic Text Effect with HTML & CSS

John on March 05, 2021

In this tutorial we will learn two different ways of creating italic text on an HTML page.

Applying an Italic Effect with CSS

To make text italic with CSS, use the font-style property with the value of italic. Let's try this out in a few different examples to demonstrate how this works.

<span>Some text...</span>

span {
  font-style: italic;
}

Here is a different example, this time using a class name for applying an italic text effect to any HTML element.

<span class="italic">Some text...</span>

.italic {
  font-style: italic;
}

Yet another example using inline CSS:

<span style="font-style: italic;">Some text...</span>

Using an HTML Tag

If you don't want to apply an italic font-style CSS yourself, you can wrap the text that should be italic in the HTML i tag. Here is an example of how the i tag could be used inside a paragraph:

<p>This is a paragraph of text containing <i>some italic text.</i></p>