जिस तरह से font-family और font-style किसी website के लिए important होती है ठीक उसी तरह से font-size भी user experience increase करता है , CSS में font-size property का use करके हम , font का size set करते हैं।

element{
  font-size : 20px;
}

Hello ! my name is Rahul.

And this is all about me.

And this is also about me :).

CSS font-size example

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS font-size example</title>
  </head>
  <body>
    <p style="font-size:40px">Hello ! my name is Rahul.</p>
    <p style="font-size:30px">And this is all about me.</p>
    <p style="font-size:20px">And this is also about me :).</p>
  </body>
</html>

हालाँकि ये जरूरी नहीं कि font-size को px में ही define करें , आप percent या rem/em में भी define कर सकते हैं। 1 rem/em में 16 px होते हैं।

p{
  font-size : 100% /*100 % means full default value*/

  or 

  font-size : 2 em / rem


  1 em / rem = 16px;
}

Text with 3 rem size.

Text with 2 rem size.

Text size with 100%.

Text size with 50%.

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS font-size example</title>
  </head>
  <body>
    <p style="font-size:3rem">Text with 3 rem size.</p>
    <p style="font-size:2em">Text with 2 rem size.</p>
    <p style="font-size:100%">Text size with 100%.</p>
    <p style="font-size:50%">Text size with 50%.</p>
  </body>
</html>

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! My name is Rahul Kumar Rajput. I'm a back end web developer and founder of learnhindituts.com. I live in Uttar Pradesh (UP), India and I love to talk about programming as well as writing technical tutorials and tips that can help to others.

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers