html

CSS Font Style Property | Explained

In Cascading Style Sheets (CSS), there are various aspects involved in styling a font, such as setting a font style and size. The font-style property ensures the text stands out and enriches the sheet with a visual hierarchy and possesses great importance.

The CSS font-style property is utilized for styling fonts in italic, normal, and oblique formats. Using the font-style property, we can also customize the style of the text and make it attractive.

In this article, we will learn about the CSS font-style properties with the help of suitable examples.

CSS font-style property values

In CSS, the font-style property comprises these three values:

We will briefly discuss each of the specified CSS font-style properties in the next sections.

How to italicize a font in HTML

In typography, italic font is used to write text in a cursive font style. The CSS italic font-style property slants the text element from left to right. These types of elements usually take less horizontal space than unstyled elements.

You can also set the “italic bold” font style at once by using the following syntax.

font-style: italic bold;

Example: CSS Italic font-style property

In the following example, we have defined two font styles for the paragraphs elements: “p.x” and “p.y”. The “p.x” font style will italicize the specific paragraph text, whereas the “p.y” font style applies both the “italic” and “bold” font-style property values to the text element:

<!DOCTYPE html><html>

<head>

    <style>

        p.x {

            font-style: Italic;

        }

        p.y {

            font-style: italic;

            font-weight: bold;

        }

    </style>

</head>

<body>

    <p class="x">This is a paragraph, normal.</p>

    <p class="y">This is a paragraph, italic and bold.</p>

</body>

As you can see from the output, the font-style property of the first paragraph’s text is only set to italicize, while the text of the second paragraph is bold and italicized:

How to Oblique a font in HTML

CSS Oblique font-style property is used to write cursive text; however, it differs from the italic font style in a way that it utilizes degrees to slant the text. Also, the text is slightly slanted from left to right in oblique font style.

All browsers do not support oblique font style, but if you want to use it, then artificially stimulate it in the normal font style.

Syntax of CSS Oblique font-style property

font-style: oblique angle;

Here, “angle” sets the angle of slanting text, and this feature distinguishes oblique from the italic font-style property.

Note: CSS Oblique font-style property uses a 14-degree angle by default, and its valid degree values lie between -90 degrees to 90 degrees.

Example: CSS Italic font-style property

In the following example, we will set the angle of “oblique” font-style property as “10deg”:

<p style="font-style:oblique;">Oblique font style.</p><p style="font-style: oblique 10deg;">Oblique font style with degree.</p>

Save the added code and open the HTML file in the browser. Upon doing so, you will see that oblique font style is applied to the paragraph text at 10 degrees angle:

How to Normalize a font in HTML

The default font style is set as “normal” in CSS. Now, you may question why we use the normal font-style property if it is already set as the default font-style value?

The normal CSS font-style property is utilized to normalize the font back to its original state if changed using italic or oblique values.

Check out the following example to understand the stated concept.

Example: CSS normal font-style property

In the below-given example, the font is first italicized using font-style property:

<p style="font-style: italic">Italic font style.</p>

Now, to revert the font back to normal, the normal value of font-style property will be used:

<p style="font-style: normal">Normal font style.</p>

The output signifies that we have successfully set the font style to Normal:

That was all essential information related to CSS font-style property. You can further explore it on your own.

Conclusion

CSS font-style property specifies the font style of the text elements. It is used to style text in normal, italic, bold, and oblique formats. By utilizing different CSS font-style properties, we can customize the style of a text and can make it visually appealing. This write-up discussed CSS font-style property with the help of suitable examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.