Due to this property we can change the font shape, size, color, and style etc. of the text.
Here are many properties by which we can change the font styling, and these are listed as follows :-
font-family
font-size
font-style
font-variant
font-weight
font
font-family
The font family of a text is manage by this font-family property. We can select multiple
font-family here so that if the browser is not supporting that particular font-family than in that place
the second value it takes as the alternate one.
Let's understand this by a small program :-
<!DOCTYPE html>
<html>
<head>
<style>
h1{
font-family:Arial, Times;
}
</style>
</head>
<body>
<div>
<p> I am Manish </p>
<h1> Hey I love India </h1>
</div>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get our desired font here by using font-family property.
font-style
The font style is use to specify text in italic manner or in oblique manner (leaning manner).
This property is having three values :-
normal
italic
oblique
Let's understand this by a small program :-
<!DOCTYPE html>
<html>
<head>
<style>
h1{
font-style:italic;
}
p{
font-style:oblique;
}
</style>
</head>
<body>
<div>
<p> I am Manish </p>
<h1> Hey I love India </h1>
</div>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get our desired font style here by using font-style property.
font-size
The font size is use to sets the text size, means it gives us the reliability by which we can also sets our
text size. And this size we can define with px , % , em etc.
By default the size of font will be 16px (=1 em).
Let's understand this by a small program :-
<!DOCTYPE html>
<html>
<head>
<style>
. main{
font-size:50px;
}
</style>
</head>
<body>
<div>
<p> I am Manish </p>
<p class="main"> Hey I love India </p>
</div>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get our desired font size here by using font-size property.
font-weight
It just use to specify the weightness of the font.
Let's understand this by a small program :-
<!DOCTYPE html>
<html>
<head>
<style>
p{
font-weight:normal;
}
.main{
font-weight:bold;
}
</style>
</head>
<body>
<div>
<p> I am Manish </p>
<p class="main"> Hey I love India </p>
</div>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get our desired font weight here by using font-weight property.
font-variant
It just use to specify whether text should be displayed in small-caps font or not .
Let's understand this by a small program :-
<!DOCTYPE html>
<html>
<head>
<style>
p{
font-variant:normal;
}
.main{
font-variant:small-caps;
}
</style>
</head>
<body>
<div>
<p> I am Manish </p>
<p class="main"> Hey I love India </p>
</div>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get our desired small-caps font variant here by using font-variant property.
font
It is just the shorthand of using the above font-style, font-family, font-weight, font-variant propert in
single line.
Let's understand this by a small program :-
<!DOCTYPE html>
<html>
<head>
<style>
.main{
font:italic small-caps bold 15px arial;
}
</style>
</head>
<body>
<div>
<p> I am Manish </p>
<p class="main"> Hey I love India </p>
</div>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get our desired all font properties in single line here by using font property.
CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute
