The font-style property in CSS is used to set whether the font should be styled with normal, italic, or in the oblique face. It defines the type of font we want to display.
There are three values of the font-style property of CSS that are normal, italic , and oblique . The value italic of this CSS property used to italicize the text. This value selects the font, which is classified as italic. The oblique value makes the letters tilted (sloped), and the result will be slightly different from italics.
Italic v/s Oblique
Usually, italicized texts have a cursive style, while oblique fonts are simply a slanted version of the regular font. Therefore, when a font lacks specific oblique or italic variations, the distinction between italic and oblique is often minimal.
Syntax
The code snippet below demonstrates how to specify the font size for italicized text.
element { font-style: italic; }
}
Description:
- We can use elements to represent the HTML elements, class name, and ID name of the elements.
- We can use font style as the property and italics as the value of the CSS property.
- We can use inline, internal, and external CSS properties and values for the element.
Examples
The examples demonstrate the italic text formatting for the specified content. The italic property value within the font style attribute is visible within a CSS style block and an inline style declaration.
Example 1
In this instance, we are defining the formatting of the heading as italicized. The outcome could remain unchanged if the oblique property is applied instead.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
text-align: center;
}
h2 { font-style: italic; }
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
</body>
</html>
Output
The result displays the italicized style for the specified element.
Example 2:
We can observe the italic text formatting applied to the entirety of the webpage content. The CSS style tag can be utilized directly within the body element for this purpose.
<!DOCTYPE html>
<html>
<head>
<title> CSS font italic style </title>
<style>
body { font-style: italic; }
}
</style>
</head>
<body>
<h1> How to italicize text in CSS? </h1>
<p> We can see the italic font style for all sizes of the information. </p>
<b> The bold information is shown in italic style. </b>
</body>
</html>
Output:
The result displays the italic style for the specified element.
Example 3:
The illustration demonstrates the italicized properties of various HTML elements. It is possible to apply the italic font formatting to the h1, u, and b tags within the HTML document.
<!DOCTYPE html>
<html>
<head>
<title> CSS font italic style </title>
<style>
h1, b, u { font-style: italic; }
}
</style>
</head>
<body>
<h1> How to italicize text in CSS? </h1>
<u> CSS intalic font style </u>
<br> <br>
<b> The bold information is shown in italic style. </b>
<p> Usually, italic texts are cursive.
The value italic of this CSS property is used to italicize the text. <br> We can see the italic font style for all sizes of the information. </p>
</body>
</html>
Output:
The result displays the italic style for the specified element.
Example 4:
The illustration demonstrates the italicized values associated with various HTML elements. In this case, we have the option to apply the italic font style to the ID and class names of the HTML elements.
<!DOCTYPE html>
<html>
<head>
<title> CSS font italic style </title>
<style>
#para1, .un {
font-style: italic;
background-color: yellow;
}
</style>
</head>
<body>
<h1> How to italicize text in CSS? </h1>
<u class = "un"> CSS intalic font style </u>
<br> <br>
<b> The bold information is shown in italic style. </b>
<p id = "para1"> Usually, italic texts are cursive.
The value italic of this CSS property is used to italicize the text. </p>
<p> We can see the italic font style for all sizes of the information. </p>
</body>
</html>
Output:
The result displays the italicized style for the specified element.
Example 5:
The illustration demonstrates the italic properties of various HTML elements. It showcases the yellow background hue for the italicized text format and an alternative slanted font style.
<!DOCTYPE html>
<html>
<head>
<title> CSS font italic style </title>
<style>
#para1, .un {
font-style: italic;
background-color: yellow;
}
h1, #para2{
font-style:oblique;
}
</style>
</head>
<body>
<h1> How to italicize text in CSS? </h1>
<u class = "un"> CSS intalic and oblique font style </u>
<br> <br>
<b> The bold information is shown in italic style. </b>
<p id = "para1"> Usually, italic texts are cursive.
The value italic of this CSS property is used to italicize the text. </p>
<p id = "para2"> We can see the italic font style for all sizes of the information. </p>
</body>
</html>
Output:
The result displays the italicized typeface for the specified element.
Conclusion
The text styled in italics applies CSS attributes to draw attention and emphasize content. By utilizing italicized text, we can customize and style the content.