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.Beginner { font-variant: small-caps; } .gfg { font-variant: small-caps; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >font-variant:small-caps;</ h2 > < p class = "Beginner" >w3wiki.</ p > < p class = "gfg" > It is a computer science portal for Beginner. </ 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.Beginner { font-variant: small-caps; } .gfg { font-variant: small-caps; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >font-variant:small-caps;</ h2 > < p class = "Beginner" >w3wiki.</ p > < h4 class = "gfg" > It is a computer science portal for Beginner. </ h4 > </ center > </ body > </ html > |
Output: