CSS Font Weight Property and Bold Style Text in HTML

Ad Banner Image

CSS Font Weight Property

To specify the darkness or boldness of the fonts, font weight property is used. Basically you can bold, light and normal weight is applied to the text. The range of the darkness very from 100 to 1000.

Example 1 – Font Weight Property Code for Making HTML Text Bold

<!DOCTYPE html>
<html>
  <head>
	<style>
		.a 
		{
		  font-Weight: bold;
		}
	</style>
  </head>
  <body>
	<p>This is a default font-style of paragraph element.</p>
	<p class="a">Lorem ipsum urna condimentum pellentesque id nibh tortor id aliquet. Ut pharetra sit amet aliquam id diam maecenas ultricies mattis.</p>
  </body>
</html>

In the above code we apply the bold font-weight to an HTML paragraph element.

CSS Font Weight Property Example to Show Text in Bold or Strong Style
Fig.1 – Font Weight Property Example to Show Text in Bold or Strong

How to Show Text in HTML in Bold Style with CSS Font Weight Property

You also set the darkness of the fonts as your requirment. The range of the darkness vairy from 100 to 1000. 100 is lighter weight for fonts and 1000 is darker weight for fonts. If you want bold fonts than you have to set the value from 600 to 1000 or you also set { font-Weight: bold; }.

Example 2 – Font Weight Property with Numeric Value to Set Bold Text in HTML

<!DOCTYPE html>
<html>
  <head>
	<style>
		.a 
		{
		  font-Weight: bold;
		}
		.b 
		{
		  font-Weight: 800;
		}
	</style>
  </head>
  <body>
	<p>This is a default font-style of paragraph element.</p>
	<p class="a">Lorem ipsum d nibh tortd aliquet. Ut phare tra sit amet aliquam id di urna con dime ntum pel nibh tortd aliquet.</p>
	<p class="b">Lorem ipsum d amet aliquam id di urna con dime nibh tortd aliquet. Ut phare tra sit ce ultri cies mat tis.</p>
  </body>
</html>

In the above code we apply the bold font-weight by two different ways to an HTML paragraph element.

Bold Style HTML Text Example
Fig.2 – Bold Style HTML Text Example

Font Weight Property with lighter or Small Number Value

You also set the lighter darkness of the fonts as your requirment. The range of the lighter darkness vairy from 100 to 500. If you want light fonts than you have to set the value from 100 to 500 or you also set { font-Weight: normal; } { font-Weight: light; }.

Example 3 – Font Weight Property to Set the Text to Normal Look and Feel

<!DOCTYPE html>
<html>
  <head>
	<style>
		.a 
		{
		  font-Weight: lighter;
		}
		.b 
		{
		  font-Weight: 300;
		}
	</style>
  </head>
  <body>
	<p>This is a default font-style of paragraph element.</p>
	<p class="a">Lorem ipsum et phare tra. Ut phare tra amet ali quam ult um d amm ul sum d nib d nibh tortd aliqu.</p>
	<p class="b">Lorem ipsum d amet Lorem ipsum d nibh tortd aliquet. Ut phare tra sit amet ali quam ultri cies mat tis.</p>
  </body>
</html>

In the above code we apply the light font-weight by two different ways to an HTML paragraph element.

Font Weight Lighter Example
Fig.3 – Font Weight Property with lighter or Small Number Value Example
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress