CSS font-style Property

February 10, 2021 12:37 pm IST

You are Here:

CSS font-style Property

CSS font-style property specifies the font style for a text.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p{ font-style: italic; } </style> </head> <body> <h1>CSS font-style Property</h1> <p>font-style of this paragraph is italic.</p> </body> </html>

Run

Syntax

Using CSS

element{ font-style: italic; }

Using Javascript

object.style.fontStyle="italic";

Animatable

No, font-style property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS font-style property is normal.

Property Value

The following table provides a list of values for CSS font-style property.

Value	Explanation
normal	Sets a font that is classified as normal within a font-family.
italic	Sets a font that is classified as italic. If no italic version of the face is available, one classified as oblique is used instead.
oblique	Sets a font that is classified as oblique. If no oblique version of the face is available, one classified as italic is used instead.
oblique <angle>	Sets a font classified as oblique, and additionally specifies an angle for the slant of the text.

All in One

In the following example, we will demonstrate all values of CSS font-style property.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #point{ font-style: normal; } #point1{ font-style: italic; } #point2{ font-style: oblique; } #point3{ font-style: oblique 45deg; } </style> </head> <body> <h1>CSS font-style Property</h1> <p id="point">font-style of this paragraph is normal.</p> <p id="point1">font-style of this paragraph is italic.</p> <p id="point2">font-style of this paragraph is oblique.</p> <p id="point3">font-style of this paragraph is oblique 45deg.</p> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS font-style property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS font-style Property</h1> <p>font-style of this paragraph is italic.</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ x.style.fontStyle = "italic"; } </script> </body> </html>

Run