<html>
<head>
<title>Abakada CSS Demo: font Attribute</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<script language="JavaScript" src="fwiz.js"></script>
<style type="text/css">
<!--
#theDiv { width: 70%; margin-left: 30; margin-right: 30;
padding: 10; text-align: center;
background: ghostwhite; color: navy; border: 1px inset;
font: normal normal normal 10pt arial }
-->
</style>
</head>
<body>
<!-- #include virtual="~/shared/top.inc" -->
<div class="header"><h2>Abakada CSS Demo: font Attribute</h2></div>
<hr size=1 width=92%>
<center>
<h5>This example illustrates the various values an element's <b>font</b> style attribute can assume.<br>
Note the CSS declaration as you modify the object's composite font characteristics.</h5>
<br>
<div id="theDiv">
<p>The font properties must be defined in this order: <br>
font-style, font-variant, font-weight, font-size, font-family. </p>
<h5 id="theSyntax">Syntax { font: normal normal normal 10pt arial }</h5>
</div>
<p><b>Select from these options to modify the DIV's font properties</b></p>
<p><label for="fSize" id="labelSize">font-size</label>
<select id="fSize" onchange="chgFont ( )">
<option value="10" selected>10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value=16>16
<option value="18">18
</select>
<label for="fFamily" id="labelFamily">font-family</label>
<select id="fFamily" onchange="chgFont ( )">
<option value="arial" selected>Arial
<option value="book antiqua">Book Antiqua
<option value="comic sans ms">Comic Sans
<option value="times">Times
<option value="verdana">Verdana
</select>
</p>
<p><label for="fStyle" id="labelStyle">font-style</label>
<select id="fStyle" onchange="chgFont ( )">
<option value="normal" selected>normal
<option value="italic">italic
<option value="oblique">oblique
</select>
<label for="fWeight" id="labelWeight">font-weight</label>
<select id="fWeight" onchange="chgFont ( )">
<option value="normal" selected>normal
<option value="bold">bold
<option value="bolder">bolder
<option value="lighter">lighter
<option value="100">100
<option value="200">200
<option value="300">300
<option value="400">400
<option value="500">500
<option value="600">600
<option value="700">700
<option value="800">800
<option value="900">900
</select>
</p>
<p><label for="fVariant" id="labelVariant">font-variant</label>
<select id="fVariant" onchange="chgFont ( )">
<option value="normal" selected>normal
<option value="small-caps">small-caps
</select>
</p>
<div class="note">
<p><b>NOTES</b>: The <b>{ font: ... }</b> declaration block must be a combination of valid values for the component properties, with no more than one value per property. If the string does not contain a value for a component property, or is omitted, that property is set to its default. </p>
<p><b>Font-weight</b> relies on what are available for a particular font family. </p>
</div>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>