Skip to main content

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>
Labels:

Comments

Post a Comment

Popular posts from this blog

JavaScript Variables-Storage & Declaration

Now we have understood how simple scripting in JavaScript is written. Let us take in some input from the user using the prompt(); function. prompt(); function: The prompt function prompts the user to input data into it by providing a textbox.You also get two buttons to input your reaction.Hence the interactivity. Now the website has asked the input data, now let it process it and act upon it. You have entered the data asked by the webpage prompt, now let us store it in a variable. STORING OF VARIABLES USING prompt(); Storing the data directly upon entering is done using the variable declaration along with the prompt input function separated by a "=" sign. var num = prompt("Enter a number"); DECLARING OF VARIABLES In JavaScript variables are declared using the "var" keyword. Any variable can be created using this keyword, irrespective of the type of data it stores viz.textual,numerical,symbolical,patterns. Sample variable...
Post a Comment
Read more

CSS Font Weight

In the earlier post, we looked at the font-style attribute. It gives some styles like italic,normal,oblique. But what about the bold. The bold style is defined under the font-weight attribute. The font weight attribute can be defined in many different ways, let us have a look at some basic ways like normal,bold,bolder,lighter. 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: ...
Post a Comment
Read more

Simple XHTML 1.0 Strict program with 5 tags (html,head,title,body,p)

This program below shows the usage of basic 5 tags/XHTML elements html | head | title | body | p 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> This is the title of the page</title> 6: </head> 7: <body> 8: <p> 9: Hello Web! 10: </p> 11: </body> 12: </html>
Post a Comment
Read more