Tuesday, 26 November 2013

CSS Font Variant

Next we have font variant.

The font variant does two things mainly like.
  1. It changes the smaller case letters to upper case.
  2. It adjusts the upper case letter in the previous case to adjust the size of all the letters.

Here is a showcase of font variant property in CSS.
1:  <?xml version = "1.0" encoding="utf-8"?>   
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
3:  <html xmlns = "http://www.w3.org/1999/xhtml">   
4:  <head>  
5:  <title>CSS Styling</title>  
6:  </head>  
7:  <body>  
8:  <p class="red">  
9:  Red  
10:  </p>  
11:  <p class="blue">  
12:  Blue  
13:  </p>  
14:  <p class="green">  
15:  Green  
16:  </p>  
17:  <style>  
18:  p.red  
19:  {  
20:  color:red;  
21:  font-size:20px;  
22:  font-weight:normal;  
23:  font-family:cursive;  
24:  font-variant:normal;  
25:  }  
26:  p.blue  
27:  {  
28:  color:blue;  
29:  font-size:40px;  
30:  font-style:italic;  
31:  font-family:Lucida Console;  
32:  font-variant:small-caps;  
33:  }  
34:  p.green  
35:  {  
36:  color:green;  
37:  font-size:60px;  
38:  font-weight:bolder;  
39:  font-family:Arial;  
40:  font-variant:small-caps;  
41:  }  
42:  </body>  
43:  </html>  
Post a Comment