CSS font-style Property

The font-style property defines the font style for a text. The property has three values: normal, italic and oblique.

Oblique is a roman font that has been skewed 8-12 degrees. Italic is another value that is created by the type designer with specific characters particularly lowercase "a" for creating a calligraphic and a slanted version. Oblique is less supported by browsers. Oblique is less supported by 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 of the font-style property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3.normal {
        font-style: normal;
      }
    </style>
  </head>
  <body>
    <h2>Font-style property example</h2>
    <h3 class="normal">We wrote this text as italic.</h3>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
  </body>
</html>

Try it Yourself »

The difference between italic and oblique font-styles

Italic is considered to be a cursive font-style in character, but the oblique is sloping versions of the standard face. However, there is a very small difference between these two font-styles. The example below will show the usage of both italic and oblique font-styles:

Example of the font-style property with the "italic" and "oblique" values:

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

Try it Yourself »

Example of the font-style property with all the values:

<!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>

Try it Yourself »

Values

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