Which property is used to create a small-caps effect ?
In this article, we will discuss the property that is used to create the small caps effect.
The font-variant property is used to convert all lowercase letters into uppercase letters. But the converted upper letters appear too small font-size than the original uppercase letters.
small-caps: It is used to convert all the lowercase letters into uppercase letters.
Syntax:
font-variant: small-caps;
Let’s see some examples to know how small-caps property works.
Example 1: In this example, we will add the small-caps effect on the <p> tag.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
h1 {
color: green;
}
p.geeks {
font-variant: small-caps;
}
.gfg {
font-variant: small-caps;
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksForGeeks</ h1 >
< h2 >font-variant:small-caps;</ h2 >
< p class = "geeks" >GeeksForGeeks.</ p >
< p class = "gfg" >
It is a computer science
portal for geeks.
</ p >
</ center >
</ body >
</ html >
|
Output:
Example 2: In this example, we will add the small-caps effect on the <h4> tag.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
h1 {
color: green;
}
h4.geeks {
font-variant: small-caps;
}
.gfg {
font-variant: small-caps;
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksForGeeks</ h1 >
< h2 >font-variant:small-caps;</ h2 >
< p class = "geeks" >GeeksForGeeks.</ p >
< h4 class = "gfg" >
It is a computer science
portal for geeks.
</ h4 >
</ center >
</ body >
</ html >
|
Output:
Last Updated :
01 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...