How to set all the font properties in one declaration using CSS ?
In this article, we will learn how to set all the font properties in one declaration using CSS. This can be used for quickly setting the required font properties without specifying each of them separately.
Approach: We will use the font property of CSS which is the shorthand property for all the font properties. This takes five values font-style, font-variant, font-weight, font-size, and font-family. The font-size and font-family properties must be set for this property to work. All the properties that are to be used are defined in the below order:
- font-style: It is the style of the font.
- font-variant: It sets whether the font should be displayed in small-caps.
- font-weight: It set the weight of the font.
- font-size: It set the size of the font.
- font-family: It set the family of the font.
Syntax:
font: font-style font-variant
font-weight font-size
font-familyExample: In this example, we are using the above-explained method.
HTML
<!DOCTYPE html><html><head> <style> body { /* font: font-weight font-variant font-size font-style */ font: bold small-caps 30px serif; } .gfg { column-count: 3; column-gap: 50px; column-rule: 5px dotted blue; } </style></head><body> <div class="parent"> <div class="gfg"> GeeksforGeeks is my favourite site where i can gain a lot of knowledge and can also share my knowledge what I have gained while learning. We can add more pharagraphs for content. </div> </div></body></html> |
Output:
Please Login to comment...