Fonts play a vital role in making a web page attractive for users. The size, style, and color of fonts also have a great impact on the look of the websites. CSS permits us to customize these font attributes using various generic font families, such as Sans-serif, Monospace, Cursive, Serif, and Fantasy. More specifically, on these fonts, CSS allows three major styles “italic”, “normal”, and “oblique”.

This post will guide you about the HTML <i> tag. Let’s start!

What is HTML <i> Tag?

HTML “<i>” tag is used to transform the style of the normal text as “italic”. Most of the time, it is used in a paragraph or a sentence to indicate technical terms, other language phrases, and more.

Syntax

To utilize the HTML <i> tag, follow the given syntax:

In the above syntax:

• <i> is the starting tag.
• </i> is the ending tag.

 

Let’s implement an example to observe the behavior of <i> tag.

 

Example: How to Italicize Text in HTML?

In HTML, first, add a <div>. Inside this <div>, place a <i> tag and add the text that needs to appear in italic. After that, add the other required elements.

HTML

In CSS, we will apply several styles to the <div> element:

• First, the “background-color” of the div is set as “rgb(68, 68, 68)”.
• To give color to the text, the “color” property value is set as “rgb(251, 255, 0)”.
• The “font-size” property value is set as “60px”, “font-family” as “serif”, and “text-align” as “center”.
• After that, assign the “margin-top” property as “8px”.
• “width” as “90%”.
• “height” as “200px”.
• “padding” property value as “5px”.

You can set styling properties according to your requirements.

CSS

Output

So far, we have discussed how the HTML <i> tag works. In the next section, we will see how we can provide styles to text using CSS.

Font Styles in CSS

Besides using the HTML <i> tag, CSS also offers different font styles. Let’s move on to the next example that demonstrates the font-style property values of CSS.

Example: How to Use Font Styles in CSS?

Inside the body tag of the HTML file, add a <div>, and place three <p> tags, each having different class names as “italic”, “oblique”, and “normal” in it. Each <p> tag comprises some content on which the font styles need to be applied.

HTML

In CSS, access each class and style the font respectively. To do so, the “p.italic” is used to access the <p> tag having a class named italic. Similarly, the “p.oblique” and “p.normal” are utilized to access the p tags having classes oblique and normal respectively. After that, the related font style will be set as italic, oblique, and normal using the font-style property.

CSS

Now our web page will look like this:

We have explained the HTML <i> tag with some useful examples.

Conclusion

In HTML, the “<i>” tag is used to make the text italicized. You can also apply the font-style property to the text using CSS. The font-styles property values are italic, normal, and oblique. This blog discussed the HTML <i> tag with a practical example.