CSS Properties: How to set different font weight for the paragraphs?

Last update on February 23 2024 13:05:50 (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 different font weight for the paragraphs</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
.normal { /* Defines a CSS class named normal */
  font-weight: normal; /* Specifies normal font weight for elements with this class */
}
.light { /* Defines a CSS class named light */
  font-weight: lighter; /* Specifies a lighter font weight for elements with this class */
}
.thick { /* Defines a CSS class named thick */
  font-weight: bolder; /* Specifies a bolder font weight for elements with this class */
}
.thicker { /* Defines a CSS class named thicker */
  font-weight: 900; /* Specifies a custom font weight (900) 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="light"><!-- Paragraph element with class light -->
  CSS, stands for Cascading Style Sheet. <!-- Text content -->
</p><!-- Ends the paragraph element -->
<p class="thick"><!-- Paragraph element with class thick -->
  CSS, stands for Cascading Style Sheet. <!-- Text content -->
</p><!-- Ends the paragraph element -->
<p class="thicker"><!-- Paragraph element with class thicker -->
  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 set different font weights for paragraphs using CSS.
Comments are added to both HTML and CSS to explain each section of the code.
In the CSS <style> block, four CSS classes are defined: .normal, .light, .thick, and .thicker.
Each class specifies a different font weight using the font-weight property.
The HTML paragraphs <p> are assigned different classes to apply the specified font weights.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page