CSS - font-style Property

Quiz

CSS font-style property is used to specify the font style for the selected text. It is used to change the appearance or style of text.

Syntax

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

Property Values

Value	Description
normal	The text is displayed with normal font style. Default.
italic	The text appears in an italicized style, with a slight slant to the right.
oblique	The text appears similar to italic but with a more exaggerated slant or angularity.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS Font Style Property

The following examples explain the font-style property with different values.

Font Style Property with Normal Value

To display the text without applying any special styles to the text, we use the normal value of the font-style property. The text is displayed in the default upright style. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         text-align: center;
         padding: 25px;
         border: 2px solid #ccc;
         font-style: normal;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-style property
   </h2>
   <p>
      This text has "normal" font style.
   </p>
</body>

</html>

Font Style Property with Italic Value

To display the text with a slight slant, we use the italic value of the font-style property. The text is rendered with a slant compared to the default upright style. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         text-align: center;
         padding: 25px;
         border: 2px solid #ccc;
         font-style: italic;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-style property
   </h2>
   <p>
      This text has "italic" font style.
   </p>
</body>

</html>

Font Style Property with Oblique Value

To display the text with a greater slant, we use the oblique value of the font-style property. The text is rendered with a more pronounced slant compared to the italic style. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         text-align: center;
         padding: 25px;
         border: 2px solid #ccc;
         font-style: oblique;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-style property
   </h2>
   <p>
      This text has "oblique" font style.
   </p>
</body>

</html>

Supported Browsers

Property
font-style	1.0	4.0	1.0	1.0	7.0

css_reference.htm

Print Page