CSS | font-style Property

In CSS, if we want to give designing to any type of text then we can make the use of CSS font style attribute. 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output

  • font-style:italic : This is use for making forn in italic

    Syntax:

    font-style: italic;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output

  • font-style:oblique : The browser displays an oblique font style

    Syntax:

    font-style: oblique;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output

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

    Syntax:

    font-style: initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output

  • Supported Browsers: The browser supported by 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

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.