HOLLA TECH - LEARN

The font-weight Property
 

The font-weight controls the boldness or thickness of the text. The values can be set as normal (default size), bold, bolder, and lighter.

The HTML: 

<p class=“light”>This is a font with a “lighter” weight.</p>
<p class=“bold”>This is a font with a “bold” weight.</p>
<p class=“bolder”>This is a font with a “bolder” weight.</p>

 

The CSS:

p.light {  
   font-weight: lighter;
}
p.bold {  
   font-weight: bold;
}
p.bolder {
   font-weight: bolder;
}

 

Result:

Holla Tech - Learn CSS


The font-weight Property
 

You can also define the font weight with a number from 100 (thin) to 900 (thick), according to how thick you want the text to be.
400 is the same as normal, and 700 is the same as bold.

The HTML:

<p class=“light”>This is a font with a “lighter” weight.</p>
<p class=“thick”>This is a font with a “bold” weight.</p>
<p class=“thicker”>This is a font with a “700” weight.</p>

 

The CSS: 

p.light {
   font-weight: lighter;
}
p.thick {
   font-weight: bold;
}
p.thicker {
   font-weight: 700;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
The HTML <strong> tag also makes the text bold.
 


BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT