font-weight

Description

This property sets the font weight. The numeric value 400 is equivalent to the keyword normal, and 700 is equivalent to bold.

ItemValue
Initial value normal
Inherited Yes.
Version CSS1
JavaScript syntax object.style.fontWeight="900"
Applies to All elements.

Syntax and Property Values


/*ww  w  .  j  a  va 2  s. co m*/
font-weight: normal | 
             bold | 
             bolder | 
             lighter | 
             100 | 
             200 | 
             300 | 
             400 | 
             500 |   
             600 | 
             700 | 
             800 | 
             900 |  
             inherit

The property values are listed in the following table.

Value Description
normal normal characters. Default value
bold Defines thick characters
bolder Defines thicker characters
lighter Defines lighter characters
100 Defines from thin to thick characters. normal equals 400 , 700 is bold
200 Defines from thin to thick characters. normal equals 400 , 700 is bold
300 Defines from thin to thick characters. normal equals 400 , 700 is bold
400 Defines from thin to thick characters. normal equals 400 , 700 is bold
500 Defines from thin to thick characters. normal equals 400 , 700 is bold
600 Defines from thin to thick characters. normal equals 400 , 700 is bold
700 Defines from thin to thick characters. normal equals 400 , 700 is bold
800 Defines from thin to thick characters. normal equals 400 , 700 is bold
900 Defines from thin to thick characters. normal equals 400 , 700 is bold
inherit Inherit the font weight from the parent element

Example

The following uses different font weight value to set font-weight.


b {font-weight: 700;} 
strong {font-weight: bold;} 
.delicate {font-weight: lighter;}

<!DOCTYPE HTML>
<html>
<head>
<style>
a:link {<!--from   w ww .j  av  a2 s .  c  o m-->
 font-weight: bold;
 text-decoration: none;
 color: red;
}
a:visited {
 font-weight: bold;
 text-decoration: line-through;  
 color: black;
}
</style>
</head>
<body>
  <ul>
    <li><a href=" ">A</a></li> 
    <li><a href=" ">B</a></li>
    <li><a href=" ">C</a></li> 
    <li><a href=" ">java2s.com</a></li> 
  </ul>
</body>
</html>

Click to view the demo

The code above generates the following result.

font-weight




















Home »
  HTML CSS »
    HTML CSS Reference »




HTML Tag Reference
CSS Reference
CSS Selector Reference
Encoding Reference