CSS FONTS PAGE 7

CSS FONTS

Css-fonts
In css, we have two types of font-families.
1.generic family:a group of font families with 
same look.
Ex:serief, monoscope.
2.font family: a specific font family like "Times New
 Roman" or "Arial"Font Family
It  is set with the font-family property for a text.
The font-family property should hold several font names as a 
"fallback" system. If the browser does not support the first 
font, it tries the next font.Start with the font you want, 
and end with a generic family, to let the browser pick a 
similar font in the generic family, if no other fonts 
are available.
Note: If the name of a font family is more than one word, it 
must be in quotation marks, like: "Times New Roman".
More than one font family is specified in a comma-separated list.
1.font-style property: It is used to make a font italic or oblique.
This property has three values:
a)normal - The text is shown normally
b)italic - The text is shown in italics
c)oblique - The text is "leaning" (oblique is very similar to 
italic, but less supported)
2.The font-variant property: It is used to create a small-caps effect.
3.The font-weight property:It is used to increase or decrease how bold 
or light a font appears. Possible values could benormal, bold, bolder, 
lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
4. font-size property:It is used to increase or decrease the size of
 a font.It is in three types:
px(pixels),em and percent(ex:30%).
1em=16pixels.
5. font property:It is used as shorthand to specify a number of other
 font properties.
Example:19
<html><head>
<style>
p.serif{font-family:"Times New Roman",Times,serif;font-style:normal;font-size:100%;font-weight:bold;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;font-style:italic;font-size:2.5em; font-weight:lighter;font-variant:small-caps;}
p.monospace{font-family:"Courier new":,Lucida console;font-style:oblique;font-size:10px;font-weight:normal;}
</style></head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is in  Times New Roman font and style with normal.</p>
<p class="sansserif">This line in  Arial font and style with italilc.</p>
<p class="oblique">This is a line with oblique style.</p>
</body></html>