CSS Properties: How to set a paragraph to a small-caps font?

Last update on February 23 2024 13:05:51 (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 set a paragraph to a small-caps font</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 */
}
.small { /* Defines a CSS class named small */
  font-variant: small-caps; /* Specifies small-caps font variant 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="small"><!-- Paragraph element with class small -->
 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-variant property to set a paragraph to a small-caps font.
Comments are added to both HTML and CSS to explain each section of the code.
In the CSS <style> block, two CSS classes are defined: .normal and .small.
The .normal class specifies a normal font style using the font-style property.
The .small class specifies a small-caps font variant using the font-variant property.
The HTML paragraphs <p> are assigned different classes to apply the specified font styles.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page