CSS Font Weight Property and Bold Style Text in HTML

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
You can leave a response, or trackback from your own site.

One Response to “CSS Font Weight Property and Bold Style Text in HTML”

  1. In this grand design of things you’ll receive an A for effort and hard work. Exactly where you misplaced me personally was in all the particulars. As they say, details make or break the argument.. And it couldn’t be more correct right here. Having said that, permit me tell you what exactly did deliver the results. Your article (parts of it) is really powerful and that is probably why I am taking the effort to opine. I do not really make it a regular habit of doing that. Second, even though I can certainly notice a leaps in reason you make, I am not certain of exactly how you seem to connect the points which make the actual conclusion. For the moment I will subscribe to your position however wish in the near future you connect your dots much better.

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!          Protected by Copyscape

VeChain