font weight settings : font weight « CSS « HTML / CSS
- HTML / CSS
- CSS
- font weight
font weight settings
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Example</title>
<style type='text/css'>
/* Style sheet for ch07_eg04.html */
body {
color:#000000;
background-color:#ffffff;
font-family:arial, verdana, sans-serif;
font-size:12px;}
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">This paragraph is normal but the following one word will be <span>bolder</span> than the words surrounding it.</p>
<p class="four">This paragraph is bold but the following one word will be <span>lighter</span> than the words surrounding it.</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>
Related examples in the same category