Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/myscript/public_html/classes/classdb.php on line 42
Font Weight, Boldness Using Style Sheet - CSS (HTML) Tutorial

CSS Font Weight

To create bold or bolder or lighter weight font in html using style sheet.

Explanation

Property :

Font Weight

Usage:


font-weight: bold;
font-weight: bolder;
font-weight: light;
font-weight: lighter;
font-weight: 100;
font-weight: normal;

Definition:


This parameter controls the weight or boldness of the font. We can make the font look lighter or bolder using style sheet.
It takes the following values.
a) bold : It makes the font to look bold.
b) bolder : It makes the font to look bolder.
c) light : It makes the font to look light.
d) lighter : It makes the font to look lighter.
e) 100 to 900 : The fonts boldness can be set using values as 100 or 200 or 300 or 400 or 500 or 600 or 700 or 800 or 900.
f) normal : It sets the fonts as normal fonts.

Example 1:


<div style="font-weight: bold;">testing font weight </div>
Result:

testing font weight


Example 2:


<div style="font-weight: bolder;">testing font weight </div>
Result:

testing font weight


Example 3:


<div style="font-weight: light;">testing font weight </div>
Result:

testing font weight


Example 4:


<div style="font-weight: lighter;">testing font weight </div>
Result:

testing font weight


Example 5:


<div style="font-weight: 800;">testing font weight </div>
Result:

testing font weight


Example 6:
<div style="font-weight: normal;">testing font boldness </div>
Result:

testing font boldness


Ask Questions

Ask Question