Compare font-weight properties in HTML and CSS
Description
The following code shows how to compare font-weight properties.
Example
<html>
<!-- w ww . j a v a2 s. c o m-->
<head>
<style>
p.one {font-weight:normal;}
p.two {font-weight:bold;}
p.three {font-weight:normal;}
p.three span {font-weight:bolder;}
p.four {font-weight:bold;}
p.four span {font-weight:lighter;}
p.five {font-weight:100;}
p.six {font-weight:200;}
p.seven {font-weight:300;}
p.eight {font-weight:400;}
p.nine {font-weight:500;}
p.ten {font-weight:600;}
p.eleven {font-weight:700;}
p.twelve {font-weight:800;}
p.thirteen {font-weight:900;}
.column {width:150px;float:left;margin-right:30px;}
</style>
</head>
<body>
<h1>Font Weight</h1>
<div class="column">
<p class="one">normal</p>
<p class="two">bold</p>
<p class="three"><span>bolder</span>.</p>
<p class="four"><span>lighter</span>.</p>
</div>
<div class="column">
<p class="five">100</p>
<p class="six">200</p>
<p class="seven">300</p>
<p class="eight">400</p>
<p class="nine">500</p>
<p class="ten">600</p>
<p class="eleven">700</p>
<p class="twelve">800</p>
<p class="thirteen">900</p>
</div>
</body>
</html>
The code above generates the following result.
HTML CSS Tutorial Font Weight
Compare font-weight by number from 100 to 9...
Set font weight normal in HTML and CSS
Set font weight to bold for the first line ...
Set font weight to bolder in HTML and CSS
Set font-weight to lighter in HTML and CSS
Compare font-weight by number from 100 to 9...
Compare font-weight properties in HTML and ...
Set font-weight bolder in HTML and CSSSet font weight normal in HTML and CSS
Set font weight to bold for the first line ...
Set font weight to bolder in HTML and CSS
Set font-weight to lighter in HTML and CSS