RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/css-properties/font-family-answer.php below:

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

CSS Properties: How to specify the font for a paragraph?Last update on February 23 2024 13:05:08 (UTC/GMT +8 hours)

Go to Exercise page

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

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4