CHAPTER 10 ■ STYLING TEXT
Font
HTML
<h1>Font</h1><p><code>font-family:</code><span class="family1" >sans serif</span>
<span class="family2">serif</span> <span class="family3" >monospace</span></p><p><code>font-size:</code><span class="size1">small</span>
<span class="size2">medium</span><span class="size3">large</span></p><p><code>color:</code><span class="color1">black</span>
<span class="color2">gold</span></p>
<p><code>font-style:</code><span class="style1">normal</span>
<span class="style2">italic</span></p>
<p><code>font-weight:</code><span class="weight1">normal</span>
<span class="weight2">bold</span></p>
<p><code>font-variant:</code><span class="variant1">normal</span>
<span class="variant2">smallcaps</span></p>
<p><code>text-transform:</code><span class="trans1">none</span>
<span class="trans2">lowercase</span><span class="trans3">uppercase</span>
<span class="trans4">capitalize</span></p>CSS
.family1 { font-family:sans-serif; } .family2 { font-family:serif; }
.family3 { font-family:monospace; }
.size1 { font-size:small; } .size2 { font-size:medium; }
.size3 { font-size:large; }
.style1 { font-style:normal; } .style2 { font-style:italic; }
.weight1 { font-weight:normal; } .weight2 { font-weight:bold; }
.variant1 { font-variant:normal; } .variant2 { font-variant:small-caps; }
.color1 { color:black; } .color2 { color:gold; }
.trans1 { text-transform:none; } .trans2 { text-transform:lowercase; }
.trans3 { text-transform:uppercase; } .trans4 { text-transform:capitalize; }