Skip to content
Related Articles

Related Articles

How to set all the font properties in one declaration using CSS ?
  • Last Updated : 31 Mar, 2021

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:

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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :