A font-style CSS property is used to style the given particular text in a normal, italic, or oblique face from its font-family. Using the font-style property, we can assign importance along with decorating the specific text. It helps to make a better user experience. In CSS, if we want to give designing to any type of text then we can make the use of CSS font-style property.
Syntax:
font-style: normal|italic|oblique|initial|inherit;
Property values:
- normal: This is the default value of the font-style for which the browser will display normal font text.
- italic: This font-style is used to display the text as italic in the browser.
- oblique: This font-style specifies an angle for the slant of the text. The displayed font-style is oblique in the browser.
- initial: This font-style property is used to set the font to its default value.
- inherit: This font-style property is used to inherit the current property from its parent element.
We will discuss all the font-style properties through the examples. Let’s begin with the normal font-style property.
- font-style: normal: Browser will display normal font text it is the default value.
Syntax:
font-style: normal;
Example: This example illustrates the font-style whose value is set to normal.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
p.a {
font-style: normal;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Normal font-style Property</h3>
<p class="a">GeeksforGeeks</p>
</body>
</html>
|
Output:
font-style: italic: This is used for making font in italic.
Syntax:
font-style: italic;
Example: This example illustrates the font-style whose value is set to italic.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
p.a {
font-style: italic;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Italic font-style Property</h3>
<p class="a">GeeksforGeeks</p>
</body>
</html>
|
Output:
font-style:oblique: The browser displays an oblique font style.
Syntax:
font-style: oblique;
Example: This example illustrates the font-style whose value is set to oblique.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
p.a {
font-style: oblique;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Oblique font-style Property</h3>
<p class="a">GeeksforGeeks</p>
</body>
</html>
|
Output:
font-style:initial: The browser displays an initial font style which is the default.
Syntax:
font-style: initial;
Example: This example illustrates the font-style whose value is set to initial.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
p.a {
font-style: initial;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Initial font-style Property</h3>
<p class="a">GeeksforGeeks</p>
</body>
</html>
|
Output:
font-style:Inherit: This inherits property from its parent element.
Example: In this example, we have set the value of color as inherit that will be inheriting the color property from its parent element.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
span {
color: blue;
font-size: 70px;
}
.extra span {
color: inherit;
}
</style>
</head>
<body>
<div>
<span>GeeksforGeeks</span>
</div>
<div class="extra"
style="color:green">
<span>GeeksforGeeks</span>
</div>
<div style="color:red">
<span>GeeksforGeeks</span>
</div>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by font-style Property are listed below:
- Google Chrome 1.0
- Internet Explorer 4.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 7.0
- Safari 1.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
11 Oct, 2021
Like Article
Save Article