Skip to content
Related Articles

Related Articles

Improve Article

CSS | font-style Property

  • Last Updated : 16 Feb, 2021

In CSS, if we want to give designing to any type of text then we can make the use of CSS font-style property. It helps to make a better user experience.
Syntax: 
 

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

Property values: 
 

  • font-style:Normal : Browser will display normal font text it is default value.
    Syntax: 
     
font-style: normal;
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | font-style Property
    </title>
    <style>
        p.a {
            font-style: normal;
        }
    </style>
</head>
 
<body>
    <h1>Normal font-style Property</h1>
 
    <p class="a">GeeksforGeeks</p>
 
</body>
 
</html>
  • Output 
     

  •  

 

  • font-style:italic : This is used for making font in italic
    Syntax: 
     
font-style: italic;
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | font-style Property
    </title>
    <style>
        p.a {
            font-style: italic;
        }
    </style>
</head>
 
<body>
    <h1>Italic font-style Property</h1>
 
    <p class="a">GeeksforGeeks</p>
 
</body>
 
</html>
  • Output 
     



  •  

 

  • font-style:oblique : The browser displays an oblique font style
    Syntax: 
     
font-style: oblique;
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | font-style Property
    </title>
    <style>
        p.a {
            font-style: oblique;
        }
    </style>
</head>
 
<body>
    <h1>Oblique font-style Property</h1>
 
    <p class="a">GeeksforGeeks</p>
 
</body>
 
</html>
  • Output 
     

  •  

 

  • font-style:initial : The browser displays an initial font style which is default.
    Syntax: 
     
font-style: initial;
  • Example: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | font-style Property
    </title>
    <style>
        p.a {
            font-style: initial;
        }
    </style>
</head>
 
<body>
    <h1>Initial font-style Property</h1>
 
    <p class="a">GeeksforGeeks</p>
 
</body>
 
</html>
  • Output 
     

  •  

 

  • font-style:Inherit : this inherit property from it’s parent element.
    Example:
     

html




<!-- Write HTML code here -->
<!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
  • Firefox 1.0
  • Opera 7.0
  • Safari 1.0

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :