CSS Font
Syntax:
font-property:value;
Property includes=>>family,size,style etc.
Example:
font-family:verdana;
font-style:italic;
font-size:20px;
Properties of font are:
font
font-family
font-size
font-style
font-variant
font-weight
Font Family
Font family is a collection of different fonts and are used to apply these fonts on text.
Syntax:
font-family:value;
Value includes =>>different fonts like serif,sans-serif,Times New Roman etc
Example:
font-family:arial;
How to use this property?
<html>
<head>
<style>
p{
text-color:lightgrey;
font-family:serif,Times;
}
</style>
</head>
<body>
<p>
This is a paragraph
</p>
</body>
</html>
Outcome:
This program will show you paragraph in lightgrey color with serif font family style.
Font Style
Font style are use to set style of written text.
Syntax:
font-style:value;
Value includes =>>italic,bold,oblique etc.
Example:
font-style:italic;
How to use this property?
<html>
<head>
<style>
p{
text-color:lightgrey;
font-family:serif,Times;
font-style:oblique;
}
</style>
</head>
<body>
<p>
This is a paragraph
</p>
</body>
</html>
Outcome:
This program will show you paragraph in lightgrey color with serif font family and oblique font style.
Font Size
Font size property is used to set the size of written text.
Syntax:
font-size:value+unit;
Value includes==>numbers
Unit includes==>pixel,em,percentage etc
Example:
font-size:23px;
font-size:13%;
font-size:3em;
How to use this property?
<html>
<head>
<style>
p{
text-color:lightgrey;
font-family:serif,Times;
font-style:oblique;
font-size:25px;
}
</style>
</head>
<body>
<p>
This is a paragraph
</p>
</body>
</html>
Outcome:
This program will show you paragraph in lightgrey color with serif font family 25px font size and oblique font style.
Some Extra Properties of Font
Font Variant
It is also used to apply different style on text.
Syntax:
font-variant:value;
Value include==>> initial,small-caps,normal,inherit etc
Example:
font-variant:small-caps;
Font Weight
It is used to set the weight of text.
Syntax:
font-weight:value;
Value includes==>>numbers or bold,bolder,lighter,normal etc
Example
font-weight:100;
font-weight:bolder;
