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:

normal: used to apply the normal font style. This is the default value.
italic: used to make the font italic
oblique: used to make the font oblique
initial: used to use the default value
inherit: used to use the value inherited by the parent element

Advantages of the font-style property in CSS

Developers have more control over how text appears thanks to the "font-style" property, which enables them to modify the font styles used within an HTML document.
It is simple to use the "font-style" property, which can be applied to specific elements or entire classes of elements.
All current web browsers support the "font-style" property, making it a dependable tool for generating various font styles.

Disadvantages of the font-style property in CSS

There are only three options for the "font-style" property: normal, italic, and oblique. This implies that it might not be appropriate for developing more intricate font styles.
People who have dyslexia or visual impairments may find it more difficult to read text when it is in italic or an oblique style.
An HTML document can look cluttered and uncoordinated if multiple font styles are used excessively.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!