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>

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>

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>

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.

Browser support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Practice Your Knowledge

How can the font-style property be used in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?