CSS Properties: How to specify the font for a paragraph?

Last update on February 23 2024 13:05:53 (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 specify the font for a paragraph</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
.monospace { /* Defines a CSS class named monospace */
font-family: "Lucida Console", Courier, monospace; /* Specifies the font family for class monospace */
}
.cursive { /* Defines a CSS class named cursive */
    font-family: cursive; /* Specifies the font family for class cursive */
}
</style><!-- Ends CSS styling -->
</head>
<body>
<p><strong>w3resource Tutorial</strong></p><!-- Paragraph element with strong (bold) text -->
<p class="monospace"><!-- Paragraph element with class monospace -->
CSS, stands for Cascading Style Sheet is a computer language to describe presentation (for example width, height, color, background color, alignment etc.) of HTML and XML (and XML based languages like XHTML, SVG) web documents. In all the examples of our tutorials, we have used HTML for implementing CSS. <!-- Text content -->
</p><!-- Ends the paragraph element -->
<p class="cursive"><!-- Paragraph element with class cursive -->
CSS, stands for Cascading Style Sheet is a computer language to describe presentation (for example width, height, color, background color, alignment etc.) of HTML and XML (and XML based languages like XHTML, SVG) web documents. In all the examples of our tutorials, we have used HTML for implementing CSS. <!-- Text content -->
</p><!-- Ends the paragraph element -->
</body>
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to specify different fonts for paragraphs using CSS.
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: .monospace and .cursive.
The .monospace class sets the font family to "Lucida Console", Courier, and generic monospace fonts.
The .cursive class sets the font family to a generic cursive font.
Each paragraph element (<p>) in the HTML is assigned one of these CSS classes, resulting in different font styles being applied to each paragraph.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page