CSS font-weight Property

The CSS font-weight property settles how thick or thin characters in the text are displayed.

Demo:

Syntax:

font-weight: normal|bold|bolder|lighter|number;

normal (default) – specifies normal characters.

bold – specifies thick characters.

bolder – specifies thicker characters.

lighter – specifies lighter characters.

100, 200, 300, 400, 500, 600, 700, 800, 900 – specifies from thin to thick characters (400 is the same as normal, and 700 is the same as bold).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.normal {
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

.number {
  font-weight: 900;
}

</style>
</head>
<body>

<p class="normal">This is a paragraph.</p>
<p class="bold">This is a paragraph.</p>
<p class="number">This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Enjoy coding!

Share this: