![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS font-style Property
![CSS font-style Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-font-style.webp)
Photo Credit to CodeToFun
🙋 Introduction
The font-style
property in CSS is used to specify the style of the font for an element.
This property allows you to make text italic, oblique, or normal, providing a way to emphasize or differentiate text content within your web pages. It's a fundamental property for styling text in web design.
💡 Syntax
The syntax for the font-style
property is simple and can be applied to any text element.
element {
font-style: value;
}
Here, value can be one of the predefined keywords: normal, italic, or oblique.
🎛️ Default Value
The default value of the font-style
property is normal. This means that if no font-style
is specified, the text will appear in its normal, upright form.
🏠 Property Values
Value | Description |
---|---|
normal | The text is shown in a normal, upright font style. |
italic | The text is shown in an italic font style. |
oblique | The text is shown in an oblique font style, which is a slanted version of the normal font. |
📄 Example
In this example, we'll apply different font styles to paragraphs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS font-style Example</title>
<style>
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1>CSS font-style Property</h1>
<p class="normal">This is normal text.</p>
<p class="italic">This is italic text.</p>
<p class="oblique">This is oblique text.</p>
</body>
</html>
🖥️ Browser Compatibility
The font-style
property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a well-established property in CSS and can be reliably used across different browsers and devices.
🎉 Conclusion
The font-style
property is an essential tool for web developers to style text and enhance the readability and aesthetic appeal of their content.
By using font-style
, you can create emphasis and distinguish different sections of text in your web pages. Experiment with the different values of this property to see how it can improve the look and feel of your text content.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS font-style Property), please comment here. I will help you immediately.