In this section, we will learn what the font-style property is and how to use it in CSS.

CSS font-style Property Definition and Usage

Although not much but, we can style a text content using the CSS `font-style` property in order to bring more attention to that content!

Example:

See the Pen Untitled by Enjoy Tutorials (@enjoytutorials) on CodePen.

CSS font-style Property Syntax

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

CSS font-style Property Value

Browsers can style a font in two ways:

1. Italicizing, using “italic” keyword as the value for `font-style` property.
2. Oblique, using “oblique” keyword as the value of `font-style` property. (Although, browsers by default treat this value as if it was italic)

There are 3 more values we can set for this property, but these 3 values are global (which means they are not limited only to this property:

1. normal: When we want to remove the style of a font we can set the value of font-style to “normal”.
2. initial: this is pretty much does the same job as “normal” which is removing style of a font and bring it back to the normal face that it had before styling it.
3. Inherit: By default, font-style inherits its value from its parent, but for any reason if it didn’t, we can force this using “inherit” keyword as the value for this property.

Example: font-style in CSS

See the Pen font-style in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS italic text

See the Pen CSS italic text by Enjoy Tutorials (@enjoytutorials) on CodePen.