CSS font-style

The CSS font-style property is used to style the font of text. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .one{font-style: normal;}
      .two{font-style: italic;}
      .three{font-style: oblique;}
   </style>
</head>
<body>

   <h2 class="one">font-style: normal</h2>
   <h2 class="two">font-style: italic</h2>
   <h2 class="three">font-style: oblique</h2>
   
</body>
</html>
Output

font-style: normal

font-style: italic

font-style: oblique

In the above example, "one", "two", and "three" are three CSS classes that are applied to different headings within the HTML document. The first class, .one, is applied to the first h2 element, the second class, .two, is applied to the second h2 element, and the third class, .three, is applied to the third h2 element.

The font-style property specifies the font style within an element. Three different font styles are used in this case: normal, italic, and oblique.

Because it has the class .one, the first h2 element will have a normal font style when this code is executed in a web browser. Because it has the class .two, the second h2 element will have an italic font style. Because it has the class.three, the third h2 element will have an oblique font style.

CSS font-style syntax

The syntax of the font-style property in CSS is:

font-style: x;

The value of x should be any of the following:

Advantages of the font-style property in CSS

Disadvantages of the font-style property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!