How to set all the font properties in one declaration using CSS ?
Last Updated :
06 Jun, 2023
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:
Syntax:
font: font-style font-variant
font-weight font-size
font-family
Example: 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:
