X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS font-style Property

The font-style property sets the font style for a text. We have three options by using this property: normal, italic and oblique.

Oblique is a roman font that has been skewed usually 8-12 degrees. Italic is created by the type designer with specific characters (notably lowercase a) drawn differently to create a more calligraphic, as well as slanted version. Oblique is less supported by the browsers.

Initial Value normal
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable No.
Version CSS1
DOM Syntax object.style.fontStyle = "oblique";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.normal { font-style: normal; }
      p.italic { font-style: italic; }
      p.oblique { font-style: oblique; }
    </style>
  </head>
  <body>
    <h2>Font-style property example</h2>
    <p class="normal">We wrote this text as normal.</p>
    <p class="italic">We wrote this text as italic.</p>
    <p class="oblique">We wrote this text as oblique.</p>
  </body>
</html>

Values

Value Description
normal Means that text characters will be normal. This is the default value of this property.
italic The text will be shown as italic.
oblique The text will be shown as oblique.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 7.0+


Do you find this helpful?

Related articles