Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS font-style Property

CSS font-style property is used for a font that should be styled with an italic or normal or oblique face from the font family. The font-style property is known to be specified as a single keyword that is selected from a list of the values like normal, italic, or oblique, where the oblique value may include an angle.

The Italic font is cursive in nature. Normal value selects the font which is specified as normal in a font family.

Syntax for font-style property:

Following is the syntax for the font-style property.

font-style: normal|italic|oblique|initial|inherit;

Example: CSS font-style Property

Here in the example below, we are using the font-style property with different border styles, colors, and different values. In this case, we have given the font-style property value as italic.

<!DOCTYPE html>
<html>
<head>
	<title>The font-style property in CSS</title>
	<style type="text/css">
		@font-face {
		  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
		  font-family:'AmstelvarAlpha';
		  font-style: italic;
		}				
		.container {
		  max-height: 150px;
		  overflow: scroll;
		  font-style: italic;
		}		
		.sample {
		  font: 2rem 'AmstelvarAlpha', sans-serif;
		  color: green;
		  font-style: italic;
		}
	</style>
</head>
<body>
	<div class="container">
		<p class="sample">...Study Tonight is the best platform to learn digital courses in a simplified way!</p>
	</div>
</body>
</html>

Output:

Example: CSS font-style Property

Here in the example below, we are using the font-style property with different border styles, colors, and different values. In this case, we have given the font-style property value as oblique 50deg.

<!DOCTYPE html>
<html>
<head>
	<title>The font-style property in CSS</title>
	<style type="text/css">
		@font-face {
		  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
		  font-family:'AmstelvarAlpha';
		  font-style: oblique 50deg;
		}				
		.container {
		  max-height: 150px;
		  overflow: scroll;
		  font-style: oblique 50deg;
		}		
		.sample {
		  font: 2rem 'AmstelvarAlpha', sans-serif;
		  color: red;
		  font-style: oblique 50deg;
		}
	</style>
</head>
<body>
	<div class="container">
		<p class="sample">...Study Tonight is the best platform to learn digital courses in a simplified way!</p>
	</div>
</body>
</html>

Output:

Live Example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

Browser Compatibility

There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome 1 1
Edge 12 12
Firefox 1 1
Internet Explorer 4 4
Opera 7 7
Safari 1 1
Webview Android 1 1
Chrome Android 18 18
Firefox Android 4 4
Opera Android 10.1 10.1
IOS Safari 1 1
Samsung Internet 1.0 1.0

Conclusion

The initial value for the font-style property in CSS is normal. This property is applicable to all elements. It is also applicable to the ::first-letter and ::first-line. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.