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