जिस तरह से 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>

Hey ! I'm Rahul founder of learnhindituts.com. Working in IT industry more than 4.5 years. I love to talk about programming as well as writing technical tutorials and blogs that can help to others .... keep learning :)

Get connected with me - LinkedIn Twitter Instagram Facebook