CSS font-style Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 14 - Views

⏳ 4 mins

💬 1 Comment

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.

Syntax

Copied

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.

index.html

Copied

<!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.