totn CSS

CSS: font-style property

This CSS tutorial explains how to use the CSS property called font-style with syntax and examples.

Description

The CSS font-style property defines the style of the font such as italic, olique or normal.

Syntax

The syntax for the font-style CSS property is:

font-style: value;

Parameters or Arguments

value

The style of a font. It can be one of the following:

Value Description
normal Normal font-style
p { font-style: normal; }
italic Italic font-style (if italic is not available, oblique is displayed instead)
p { font-style: italic; }
oblique Oblique font-style
p { font-style: oblique; }
inherit Element will inherit the font-style from its parent element
p { font-style: inherit; }

Note

  • Italic font-styles are cursive versions of the font.
  • Oblique font-styles are sloped versions of the font.

Browser Compatibility

The CSS font-style property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the font-style property below, exploring examples of how to use this property in CSS.

Using Italic

Let's look at a CSS font-style example where we set the font-style to italic.

span { font-style: italic; }

In this CSS font-style example, we have set the font-style of the text within the <span> tag to italic.

Using Oblique

Next, let's look at a CSS font-style example where we set the font-style to oblique.

span { font-style: oblique; }

In this CSS font-style example, we have set the font-style of the text within the <span> tag to oblique.