CSS font-style Property

Last Updated : 31 Jul, 2026

The CSS font-style property is used to style text in a normal, italic, or oblique face from its font family. This property helps to assign importance and decorate specific text, enhancing the overall user experience and essential tool in CSS for designing and styling text effectively.

Syntax

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

Property values:

  • normal: This is the default value for the font-style property, displaying normal font text.
  • italic: Displays the text in italics.
  • oblique: Specifies an angle for the slant of the text, displayed as oblique in the browser.
  • initial: Sets the font to its default value.
  • inherit: Inherits the current property value from its parent element.

We will discuss all the font-style properties through the examples. Let's begin with the normal font-style property.

1. Font-style: normal

The browser will display normal font text it is the default value.

Syntax

font-style: normal;

Example: This example illustrates the font-style whose value is set to normal.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title> CSS | font-style Property </title>
    <style>
    p.a {
        font-style: normal;
    }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Normal font-style Property</h3>
    <p class="a">GeeksforGeeks</p>

</body>
</html>

2. Font-style: italic

This is used for making font in italic.

Syntax

font-style: italic;

Example: This example illustrates the font-style whose value is set to italic.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title> CSS | font-style Property </title>
    <style>
    p.a {
        font-style: italic;
    }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Italic font-style Property</h3>
    <p class="a">GeeksforGeeks</p>

</body>
</html>

3. Font-style: oblique

The browser displays an oblique font style.

Syntax

font-style: oblique;

Example: This example illustrates the font-style whose value is set to oblique.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title> CSS | font-style Property </title>
    <style>
    p.a {
        font-style: oblique;
    }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Oblique font-style Property</h3>
    <p class="a">GeeksforGeeks</p>

</body>
</html>

4. Font-style: initial

The browser displays an initial font style which is the default.

Syntax

font-style: initial;

Example: This example illustrates the font-style whose value is set to initial.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title> CSS | font-style Property </title>
    <style>
    p.a {
        font-style: initial;
    }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Initial font-style Property</h3>
    <p class="a">GeeksforGeeks</p>

</body>
</html>

5. Font-style: Inherit

This inherits property from its parent element.

Example: In this example, we have set the value of color as inherit that will be inheriting the color property from its parent element.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title> CSS | font-style Property </title>
    <style>
    span {
        color: blue;
        font-size: 70px;
    }
    
    .extra span {
        color: inherit;
    }
    </style>
</head>

<body>
    <div> 
        <span>GeeksforGeeks</span> 
    </div>
    <div class="extra" 
         style="color:green"> 
      <span>GeeksforGeeks</span> 
    </div>
    <div style="color:red"> 
        <span>GeeksforGeeks</span> 
    </div>
</body>
</html>
Comment

Explore