>> English << | Português | По-русскиZVON > Tutorials > CSS tutorial
Intro / Search / ZVON
>> Example 13 << | Prev | Next | Contents

Description

Properties "font-style" [normal | italic | oblique], "font-variant" [normal | small-caps], and "font-weight" [normal | bold | bolder | lighter | 100 | 200 | 300| ... | 900] specify shape and boldness of the character. Larger number in "font-weight" means bolder character, "bold" is synonymous to "700", "normal" value is "400". Case 1 compares styles and variants, Case 2 weights.

>> Case 1 << | Case 2
HTML SourceCSS stylesheet

<p>Default</p>
<div class = "A"> aaa - AAA
<div class = "B"> bbb - BBB
     <div class = "C"> ccc - CCC
          <div class = "D"> ddd - DDD
               <div class = "E"> eee - EEE
                    <div class = "F"> fff - FFF
                         <div class = "G"> ggg - GGG </div>
                    </div>
               </div>
          </div>
     </div>
</div>
</div>		body {color:black; background-color: white}

div.A {font-style:normal}
div.B {font-style:italic}
div.C {font-style:oblique}
div.D {font-style:normal; font-variant:normal}
div.E {font-style:normal; font-variant:small-caps}
div.F {font-style:italic; font-variant:small-caps}
div.G {font-style:oblique; font-variant:small-caps}

Browser output