css font property tutorial

Introduction of Css Font property

css Font property is used to text display of webpage.css provides several properties related to font.

  Syntex :
    selector
    {
      font-family  : value;
      font-size    : value;
      font-style   : value;
      font-weight  : value;
      font-variant : value;
    }
 

Detailed font properties

1. font-family : This property change font family of text. We can use common font-family(sans-serif,serif,arial).

       Syntex :
       selector
       {
         font-family : arial;
       }
       

2. font-size : This property change font-size of text.

       Syntex :
       selector
       {
         font-size : 10px;
       }
       

3. font-style : This property change font-style of text. Using this we can set italic,oblique,normal values for html text.

       Syntex :
       selector
       {
         font-style : bold;
       }
       

4. font-weight : This property sets thickness of font. It's value always multiple of 100.

       Syntex :
       selector
       {
         font-weight : 300;
       }
       

5. font-variant : This property is used to change upper case to lower case or lower case to upper case.we can use small-caps,upper-caps.

       Syntex :
       selector
       {
         font-variant : small-caps;
       }
       

6. Example

       Syntex :
       selector
       {
          font-family : arial;
          font-size : 10px;
          font-style : bold;
          font-weight : 300;
          font-variant : small-caps;
       }
       

   Click to practice online example