CSS font-size Property

font-size 

In CSS, we can use font-size property to increase or decrease the size of selected element. It is a styling language so it has its own properties that have rules for styling elements. We can style any HTML element using CSS by just using selectors .

You can learn about selectors in this tutorial  here.

The font size property sets the size of the font.One way to set the fonts on the web is to use Keywords. For example, xx-small,small,medium,large,larger, etc.

Keywords are useful if you don't want the user to be able to increase the size of the font because it will adversely affect your site's appearance.

Let us see an example of setting font-size property in CSS.

The HTML Code:

<p class="small">

          Paragraph set to be small.
</p>
<p class="medium">
            Paragraph set to be medium.
</p>
<p class="large">
            Paragraph set to be large.
</p>
<p class="xlarge">
            Paragraph set to be very large.
</p>

The CSS Code:

p.small{
      font-size: small;
}
p.medium{
      font-size: medium;
}
p.large{
     font-size: large;
}
p.xlarge{
     font-size: x-large;
}

Result:

You can also set the font-size  property using pixel or em.

• Pixels

Setting font using pixels is a good choice when you need pixel accuracy,and it gives you full control over the text size. It is more convenient to use pixels over other ways.

For example:

h1{

     font-size: 20px;
}

• em

The em size unit is another way to set the font size(em is relative size unit). It allows all major browsers to resize the text. if you have not set the font size anywhere on the page, then it is the browser default size, which is 16px.

To calculate the em size ,just use the following formula: em=pixels/16

For example:

h1{

     font-size: 1.25em;

}

Both the examples will produce same result. In the browser, because 20/16=1.25em.