>> 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-weight:bold}
div.B {font-weight:lighter}
div.C {font-weight:lighter}
div.D {font-weight:100}
div.E {font-weight:bolder}
div.F {font-weight:bolder}
div.G {font-weight:900}

Browser output