CSS font-style Property
The CSS font-style property is used to style text in a normal, italic, or oblique face from its font-family. This property helps to assign importance and decorate specific text, enhancing the overall user experience. The font-style property is an essential tool in CSS for designing and styling text effectively.
Syntax:
font-style: normal|italic|oblique|initial|inherit;
Property values:
- normal: This is the default value for the font-style property, displaying normal font text.
- italic: Displays the text in italic.
- oblique: Specifies an angle for the slant of the text, displayed as oblique in the browser.
- initial: Sets the font to its default value.
- inherit: Inherits the current property value from its parent element.
We will discuss all the font-style properties through the examples. Let’s begin with the normal font-style property.
1. 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.
<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
p.a {
font-style: normal;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>Normal font-style Property</h3>
<p class="a">w3wiki</p>
</body>
</html>
Output:
2. 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.
<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
p.a {
font-style: italic;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>Italic font-style Property</h3>
<p class="a">w3wiki</p>
</body>
</html>
Output:
3. 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.
<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
p.a {
font-style: oblique;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>Oblique font-style Property</h3>
<p class="a">w3wiki</p>
</body>
</html>
Output:
4. 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.
<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
p.a {
font-style: initial;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>Initial font-style Property</h3>
<p class="a">w3wiki</p>
</body>
</html>
Output:
5. 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.
<!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>w3wiki</span>
</div>
<div class="extra"
style="color:green">
<span>w3wiki</span>
</div>
<div style="color:red">
<span>w3wiki</span>
</div>
</body>
</html>
Output:
Conclusion
The CSS font-style property is a fundamental aspect of web design, allowing developers to control the appearance of text on their webpages. Whether you need to emphasize text with italic or oblique styles, or simply maintain a normal font appearance, understanding and utilizing the font-style property is crucial. By mastering this property, you can enhance the visual appeal and readability of your web content. For more information and examples, refer to our comprehensive CSS tutorial and explore additional CSS properties to elevate your web design skills.
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
Contact Us