CSS Properties: How to the font-style property specify the font style for a text?

Last update on February 23 2024 13:05:06 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to the font-style property specify the font style for a text</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
.normal { /* Defines a CSS class named normal */
  font-style: normal; /* Specifies normal font style for elements with this class */
}
.oblique { /* Defines a CSS class named oblique */
  font-style: oblique; /* Specifies oblique font style for elements with this class */
}
.italic { /* Defines a CSS class named italic */
  font-style: italic; /* Specifies italic font style for elements with this class */
}
</style><!-- Ends CSS styling -->
</head>
<body>
<p><strong>w3resource Tutorial</strong></p><!-- Paragraph element with strong (bold) text -->
<p class="normal"><!-- Paragraph element with class normal -->
 CSS, stands for Cascading Style Sheet. <!-- Text content -->
</p><!-- Ends the paragraph element -->
<p class="oblique"><!-- Paragraph element with class oblique -->
 CSS, stands for Cascading Style Sheet. <!-- Text content -->
</p><!-- Ends the paragraph element -->
<p class="italic"><!-- Paragraph element with class italic -->
 CSS, stands for Cascading Style Sheet. <!-- Text content -->
</p><!-- Ends the paragraph element -->
</body>
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to use the font-style property to specify different font styles for text.
Comments are added to both HTML and CSS to explain each section of the code.
In the CSS <style> block, three CSS classes are defined: .normal, .oblique, and .italic.
Each class specifies a different font style using the font-style property.
The HTML paragraphs <p> are assigned different classes to apply the specified font styles.

Live Demo:

See the Pen font-style-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page