CSS Font Style

Please Share On:

Definition:

CSS font-style is used to style the text. It can be normal, italic and oblique.

Syntax:

font-style: normal | italic | oblique

Property Value:

- Normal
- Italic
- Oblique

1. font-style: normal

Definition:

font-style: normal specify the normal text. This is the default font. This font is used if you have previously defined font-style in italic or oblique and want to change back to normal font-style.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .italic{
      border: 3px solid black;
      background-color: pink;  
      font-style: italic;
    }

    .normal{
      border: 3px solid black;
      background-color: pink;  
      font-style: normal;
    }
    </style>
  </head>

  <body>
    <p class="italic">Previously, the font is defined in italic.</p>
    <p class="normal">Here, the font is in normal style.</p>
  </body>
</html>

Output:

font-style:normal;

2. font-style: italic

Definition:

font-style: italic specify the italic text.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .italic{
      border: 3px solid black;
      background-color: pink;  
      font-style: italic;
    }
    </style>
  </head>

  <body>
  	<p class="italic">Here, the font is defined in italic.</p>
  </body>
</html>

Output:

font-sytle:italic;



3. font-style: oblique

Definition:

font-style: oblique specified the leaning text, which is pretty much similar to italic text. See the below source code and output.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .oblique{
      border: 3px solid black;
      background-color: pink;  
      font-style: oblique;
    }
    </style>
  </head>

  <body>
  	<p class="oblique">Here, the font is defined in oblique.</p>
  </body>
</html>

Output:

font-style: oblique;


Donate to support writers


You may be interested in the following topics:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial