Skip to main content

CSS Font Family

We observe many different font types in word editors, email texts, web pages etc.

We can achieve the different font types using the font-family attribute in CSS.

Font-Family
The font-family names can be classified into two types:
  1. Generic family
  2. Font family
1. Generic family
     The generic family is the default fonts installed in the machine.

Why use generic?
They can be used as backup, if the font used by one is not installed in a particular machine.

2. Font Family
     These font family is all the rest of the fonts which can be used to design the font types in a webpage.


Here is a sample program showcasing the font-family attribute.

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:  }  
25:  p.blue  
26:  {  
27:  color:blue;  
28:  font-size:40px;  
29:  font-style:italic;  
30:  font-family:Lucida Console;  
31:  }  
32:  p.green  
33:  {  
34:  color:green;  
35:  font-size:60px;  
36:  font-weight:bolder;  
37:  font-family:Arial  
38:  }  
39:  </body>  
40:  </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