CSS fontstyle Property (original) (raw)

CSS font-style Property

Last Updated : 26 Aug, 2024

The CSS font-style property is used to style text in a normal, italic, or oblique face from its font family. This property helps to assign importance and decorate specific text, enhancing the overall user experience. The font-style property is an essential tool in CSS for designing and styling text effectively.

**Syntax:

font-style: normal|italic|oblique|initial|inherit;

**Property values:

• **normal: This is the default value for the font-style property, displaying normal font text.
• **italic: Displays the text in italics.
• **oblique: Specifies an angle for the slant of the text, displayed as oblique in the browser.
• **initial: Sets the font to its default value.
• **inherit: Inherits the current property value from its parent element.

We will discuss all the font-style properties through the examples. Let's begin with the **normal font-style property.

**1. font-style: normal:

The browser will display normal font text it is the default value.

**Syntax:

font-style: normal;

**Example: This example illustrates the **font-style whose value is set to normal.

HTML `

GeeksforGeeks

Normal font-style Property

GeeksforGeeks

`

**Output:

**2. font-style: italic:

This is used for making font in _italic.

**Syntax:

font-style: italic;

**Example: This example illustrates the **font-style whose value is set to italic.

HTML `

GeeksforGeeks

Italic font-style Property

GeeksforGeeks

`

**Output:

**3. font-style:oblique:

The browser displays an oblique font style.

**Syntax:

font-style: oblique;

**Example: This example illustrates the **font-style whose value is set to oblique.

HTML `

GeeksforGeeks

Oblique font-style Property

GeeksforGeeks

`

**Output:

**4. font-style:initial:

The browser displays an initial font style which is the default.

**Syntax:

font-style: initial;

**Example: This example illustrates the **font-style whose value is set to initial.

HTML `

GeeksforGeeks

Initial font-style Property

GeeksforGeeks

`

**Output:

**5. font-style:Inherit:

This inherits property from its parent element.

**Example: In this example, we have set the value of color as inherit that will be inheriting the color property from its parent element.

HTML `