Skip to content
Related Articles

Related Articles

CSS font-style Property

View Discussion
Improve Article
Save Article
  • Last Updated : 11 Oct, 2021
View Discussion
Improve Article
Save Article

A font-style CSS property is used to style the given particular text in a normal, italic, or oblique face from its font-family. Using the font-style property, we can assign importance along with decorating the specific text. It helps to make a better user experience. In CSS, if we want to give designing to any type of text then we can make the use of CSS font-style property. 

Syntax:  

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

Property values: 

  • normal: This is the default value of the font-style for which the browser will display normal font text.
  • italic: This font-style is used to display the text as italic in the browser.
  • oblique: This font-style specifies an angle for the slant of the text. The displayed font-style is oblique in the browser.
  • initial: This font-style property is used to set the font to its default value.
  • inherit: This font-style property is used to inherit the current property from its parent element.

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

  • font-style: normal: 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>

Output:

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>

Output: 

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>

Output:

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>

Output:

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>

Output:

Supported Browsers: The browser supported by font-style Property are listed below: 

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Opera 7.0
  • Safari 1.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!